js简单倒计时实现代码

本文实例讲述了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程序设计有所帮助。

(0)

相关推荐

  • js实现精确到秒的倒计时效果

    本文实例为大家分享了两种倒计时效果,供大家参考,具体内容如下 效果图: 1.倒计时效果  <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>倒计时</title> <link rel="stylesheet" href="css/common.css" type="text/css&quo

  • JS 实现倒计时数字时钟效果【附实例代码】

    这篇文章主要介绍了JS实现的网页倒计时数字时钟效果,是一款非常实用的javascript倒计时特效,具有一定参考借鉴价值,需要的朋友可以参考下 本文实例讲述了JS实现的网页倒计时数字时钟效果.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&

  • javascript显示倒计时控制按钮的简单实现

    html: <a><span id="sendAgain" onclick="sendEmail()">2.再次发送激活邮件</span></a> (span控制点击事件,disabled无效) js: /*发送邮件*/ function sendEmail(){//发送邮箱认证邮件 var me = $("#sendAgain"); me.time = 60; (function() { if (

  • javascript实现数字倒计时特效

    本文实例讲述了JS实现的网页倒计时数字时钟效果,分享给大家供大家参考,具体实现方法如下: 效果图: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>javascript实现的倒计时时钟</title> <style> body,div{margin:0;paddi

  • 基于javascript实现精确到毫秒的倒计时限时抢购

    这篇文章为大家分享了javascript实现倒计时限时抢购,精确到毫秒的倒计时,供大家参考,具体内容如下 一.效果图 下面的图片就是聚划算上面的限时抢的效果 二.实现限时抢的效果需要用到的知识 :Javascript Date()对象 Date()返回当前的日期和事件 getYear()返回年份 获得年最好用 getFullYear()方法来操作(完整格式如2016) getMonth()返回月份值(从0开始,+1) getDay()返回星期几(0-6) getHours()返回小时数(0-23

  • js简单倒计时实现代码

    本文实例讲述了js简单倒计时实现代码.分享给大家供大家参考,具体如下: <div class="time"> 距离活动结束还有<span id="day"></span>天 <span id="hours"></span>小时 <span id="min"></span>分 <span id="sec"><

  • js实现倒计时关键代码

    我们经常会在一些电商网站上看到秒杀倒计时,双11倒计时.其实倒计时的效果实现起来也是很简单的,并不复杂. 首先呢,开始写之前一定要理清楚思路,思路清晰了,那写起来就容易多了,下面我分了几个步骤: 1.获取当前的时间,并且定义结束的时间 2.用求未来时间和当前时间的时间差,并且求出时分秒 3.设置定时器,让时间每秒递减 var div = document.getElementsByTagName("div")[0]; var timer = setInterval(timers, 10

  • 纯js简单日历实现代码

    复制代码 代码如下: <!doctype html> <html> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style type="text/css"> body,ul,li,h2,p { margin:0px; pa

  • js实现倒计时及时间对象

    JS实现倒计时效果代码如下: <!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title>h <style> #box { width: 100%; height: 400px; background: black; color: #fff; font-size:40px; line-height:400px; tex

  • 简单的JS轮播图代码

    在团队带人,突然被人问到轮播图如何实现,进入前端领域有一年多了,但很久没自己写过,一直是用大牛写的插件,今天就写个简单的适合入门者学习的小教程.当然,轮播图的实现原理与设计模式有很多种,我这里讲的是用面向过程函数式编程去实现,相对于面向对象设计模式,代码难免会显得臃肿冗余.但没有面向对象的抽象却很适合新手理解与学习.已经在BAT的同学看到希望少喷点.另外可以多提意见. 轮播图的原理: 一系列的大小相等的图片平铺,利用CSS布局只显示一张图片,其余隐藏.通过计算偏移量利用定时器实现自动播放,或通过

  • JS实现的N多简单无缝滚动代码(包含图文效果)

    本文实例讲述了JS实现的N多简单无缝滚动代码.分享给大家供大家参考,具体如下: 实现原理很简单,注册事件之后,立即将元素的innerHTML累加一次. 接着滚动开始,当滚动条到达元素的中间位置时: 不要在子元素上设置margin和padding,因为CSS对margin或padding的叠加机制,会导致滚动出现"跳跃".稳妥的办法是套一个内联元素,然后再在里面设置margin或者padding! 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2

  • html+js实现简单的计算器代码(加减乘除)

    html+js实现简单的计算器代码(加减乘除) <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> </head> <body> <table> <tr> <td&

  • JS实现可调整倒计时间代码分享

    这是一款基于javascript实现可调整倒计时间的代码,我们可以手动调整倒计时间,可以精确到"天.时.分.秒",而且样式布局也很新颖. 先上运行效果图: 效果演示     源码下载 为大家分享的可调整倒计时间的JS代码如下(浏览器中如果不能正常运行,可以尝试切换浏览模式). <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&g

  • JS简单实现多级Select联动菜单效果代码

    本文实例讲述了JS简单实现多级Select联动菜单效果代码.分享给大家供大家参考.具体如下: JS联动菜单,简单代码实现JS多级Select联动菜单,也就是大家常用的一款菜单,Select联动状态的菜单,网页上经常见到的效果,希望大家能用得上. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-simple-select-ld-menu-codes/ 具体代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD

随机推荐