js简单倒计时实现代码

 更新时间:2016年04月30日 11:30:21   作者:果冻  
这篇文章主要介绍了js简单倒计时实现代码,涉及JavaScript时间与日期的相关运算技巧,需要的朋友可以参考下

本文实例讲述了js简单倒计时实现代码。分享给大家供大家参考,具体如下:

<div class="time">
 距离活动结束还有<span id="day"></span>天
 <span id="hours"></span>小时
 <span id="min"></span>分
 <span id="sec"></span>秒
</div>
<script type="text/javascript">
var day = document.getElementById("day");
var hours = document.getElementById("hours");
var min = document.getElementById("min");
var sec = document.getElementById("sec");
var DifferenceHour = -1;
var DifferenceMinute = -1;
var DifferenceSecond = -1;
//var Tday = new Date("07 20,2016 10:00:00")  //**倒计时时间点-注意格式
var Tday = new Date("07/20/2016 10:00:00");  //IE:月/日/年
var daysms = 24 * 60 * 60 * 1000;
var hoursms = 60 * 60 * 1000;
var Secondms = 60 * 1000;
var microsecond = 1000;
function clock () {
 var time = new Date();
 var hour = time.getHours();
 var minute = time.getMinutes();
 var second = time.getSeconds();
 var timevalue = "" + ((hour > 12) ? hour-12:hour);
 timevalue += ((minute < 10) ? ":0":":") + minute;
 timevalue += ((second < 10) ? ":0":":") + second;
 timevalue += ((hour > 12) ? " PM":" AM");
 // document.formnow.now.value = timevalue
 var convertHour = DifferenceHour;
 var convertMinute = DifferenceMinute;
 var convertSecond = DifferenceSecond;
 var Diffms = Tday.getTime() - time.getTime();
 DifferenceHour = Math.floor(Diffms / daysms);
 Diffms -= DifferenceHour * daysms;
 DifferenceMinute = Math.floor(Diffms / hoursms);
 Diffms -= DifferenceMinute * hoursms;
 DifferenceSecond = Math.floor(Diffms / Secondms);
 Diffms -= DifferenceSecond * Secondms;
 var dSecs = Math.floor(Diffms / microsecond);
 if (convertHour != DifferenceHour) {
 day.innerHTML = DifferenceHour;
 }
 if (convertMinute != DifferenceMinute) {
 hours.innerHTML = DifferenceMinute;
 }
 if (convertSecond != DifferenceSecond) {
 min.innerHTML = DifferenceSecond;
 }
 sec.innerHTML = dSecs;
 // document.formnow.Tnow.value= DifferenceHour DifferenceMinute + DifferenceSecond + dSecs
 setTimeout("clock()", 1000);
}
clock();
</script>

更多关于JavaScript相关内容可查看本站专题:《JavaScript时间与日期操作技巧总结》、《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结

希望本文所述对大家JavaScript程序设计有所帮助。

相关文章

  • JavaScript数组排序reverse()和sort()方法详解

    JavaScript数组排序reverse()和sort()方法详解

    这篇文章主要介绍了JavaScript数组排序reverse()和sort()方法详解,需要的朋友可以参考下
    2017-12-12
  • 使用Chart.js图表库制作漂亮的响应式表单

    使用Chart.js图表库制作漂亮的响应式表单

    数据包围着我们。虽然搜索引擎和其他应用都对基于文本方式表示的数据偏爱有加,但人们发现可视化是更容易理解的一种方式。今年初,SitePoint 发表了 Aurelio 的文章《 Chart.js简介》。在深入研究 Chart.js 的功能后,本文将会讲解这篇简介的一些重点。
    2015-10-10
  • 深入理解JavaScript和TypeScript中的class

    深入理解JavaScript和TypeScript中的class

    class 声明创建一个基于原型继承的具有给定名称的新类,下面这篇文章主要给大家介绍了关于JavaScript和TypeScript中class的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下。
    2018-04-04
  • fullPage.js和CSS3实现全屏滚动效果

    fullPage.js和CSS3实现全屏滚动效果

    这篇文章主要为大家详细介绍了fullPage.js和CSS3实现全屏滚动效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-05-05
  • js 判断登录界面的账号密码是否为空

    js 判断登录界面的账号密码是否为空

    本文主要介绍了利用display的none与block判断登录界面的账号密码是否为空的方法。具有很好的参考价值,下面跟着小编一起来看下吧
    2017-02-02
  • mui js控制开关状态、修改switch开关的值方法

    mui js控制开关状态、修改switch开关的值方法

    今天小编就为大家分享一篇mui js控制开关状态、修改switch开关的值方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-09-09
  • js实现密码强度检测【附示例】

    js实现密码强度检测【附示例】

    下面小编就为大家带来一篇js实现密码强度检测【附示例】。小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-03-03
  • js代码实现下拉菜单【推荐】

    js代码实现下拉菜单【推荐】

    本篇文章主要分享了js代码实现下拉菜单的代码,可复制直接运行看效果,具有很好的参考价值,跟小编一起来看下吧
    2016-12-12
  • input输入框的自动匹配(原生代码)

    input输入框的自动匹配(原生代码)

    功能要求:使用原生代码实现,不可使用任何框架、只针对英文字符进行匹配,并且匹配到的内容在菜单中加粗、通过键盘上的上下箭头可以对菜单进行选择等等,感兴趣的你可以参考下
    2013-03-03
  • uniapp实现上拉加载更多功能的全过程

    uniapp实现上拉加载更多功能的全过程

    我们在项目中经常使用到上拉加载更多,下面这篇文章主要给大家介绍了关于uniapp实现上拉加载更多功能的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-10-10

最新评论