JS实现的倒计时效果实例(2则实例)


Posted in Javascript onDecember 23, 2015

本文实例讲述了JS实现的倒计时效果。分享给大家供大家参考,具体如下:

我们经常会看到某些网站在注册的时候喜欢搞个按钮倒计时的效果,就是多少秒之后注册这个按钮才可以点击,其目的就是强迫你去看他的注册注意事项,这是一个很实用的效果;另外当我们进行在线考试的时候也必定会碰到答题倒计时的效果,这种倒计时效果是如何实现的呢?下面我们就用Js来实现一个倒计时效果,具体代码:

html页面:

<html> 
 <head> 
  <title>倒计时</title> 
  <!--以下为css样式--> 
  <style type= "text/css"> 
   .daojishi h2 
   { 
    font-family:Helvetica, Microsoft YaHei, Arial, sans-serif; 
    font-size:14px; 
    margin-bottom:5px; 
    color:#151515; 
   } 
   .daojishi #timer 
   { 
    font-family:Helvetica, Microsoft YaHei, Arial, sans-serif; 
    font-size:14px; 
    color:#151515; 
    font-weight:bold; 
   } 
  </style> 
  <script type = "text/javascript" src = "timer.js"> 
  </script> 
 </head> 
 <body onload = "timer()"> 
  <div class = "daojishi"> 
   <h2>剩余时间为:</h2> 
   <div id = "timer"> 
   </div> 
  </div> 
 </body> 
</html>

timer.js:

function timer() 
{
 var ts = (new Date(2018, 11, 11, 9, 0, 0)) - (new Date());//计算剩余的毫秒数
 var dd = parseInt(ts / 1000 / 60 / 60 / 24, 10);//计算剩余的天数
 var hh = parseInt(ts / 1000 / 60 / 60 % 24, 10);//计算剩余的小时数
 var mm = parseInt(ts / 1000 / 60 % 60, 10);//计算剩余的分钟数
 var ss = parseInt(ts / 1000 % 60, 10);//计算剩余的秒数
 dd = checkTime(dd);
 hh = checkTime(hh);
 mm = checkTime(mm);
 ss = checkTime(ss);
 document.getElementById("timer").innerHTML = dd + "天" + hh + "时" + mm + "分" + ss + "秒";
 setInterval("timer()",1000);
}
function checkTime(i)
{
  if (i < 10) {
  i = "0" + i;
 }
  return i;
}

运行效果截图如下:

JS实现的倒计时效果实例(2则实例)

再来看看另一个JS倒计时效果:

<!doctype html>
<html>
<head>
 <meta charset="utf-8">
 <title>倒计时js代码</title>
</head>
<body>
<DIV id="CountMsg" class="HotDate">
 <span id="t_d">00天</span>
 <span id="t_h">00时</span>
 <span id="t_m">00分</span>
 <span id="t_s">00秒</span>
</DIV>
<script type="text/javascript">
 function getRTime(){
  var EndTime= new Date('2016/05/1 10:00:00'); //截止时间
  var NowTime = new Date();
  var t =EndTime.getTime() - NowTime.getTime();
  /*var d=Math.floor(t/1000/60/60/24);
  t-=d*(1000*60*60*24);
  var h=Math.floor(t/1000/60/60);
  t-=h*60*60*1000;
  var m=Math.floor(t/1000/60);
  t-=m*60*1000;
  var s=Math.floor(t/1000);*/
  var d=Math.floor(t/1000/60/60/24);
  var h=Math.floor(t/1000/60/60%24);
  var m=Math.floor(t/1000/60%60);
  var s=Math.floor(t/1000%60);
  document.getElementById("t_d").innerHTML = d + "天";
  document.getElementById("t_h").innerHTML = h + "时";
  document.getElementById("t_m").innerHTML = m + "分";
  document.getElementById("t_s").innerHTML = s + "秒";
 }
 setInterval(getRTime,1000);
 </script>
</body>
</html>

运行效果截图如下:

JS实现的倒计时效果实例(2则实例)

读者可以按照自己的喜好选择一款倒计时代码使用。

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

Javascript 相关文章推荐
js 获取中文拼音,Select自动匹配字母获取值的代码
Sep 23 Javascript
js实现的常用的左侧导航效果
Oct 17 Javascript
解决json日期格式问题的3种方法
Feb 02 Javascript
网页瀑布流布局jQuery实现代码
Oct 21 Javascript
高性能的javascript之加载顺序与执行原理篇
Jan 14 Javascript
Vue.directive()的用法和实例详解
Mar 04 Javascript
vue中的自定义分页插件组件的示例
Aug 18 Javascript
vue项目部署到Apache服务器中遇到的问题解决
Aug 24 Javascript
js中的闭包实例展示
Nov 01 Javascript
详解vue在项目中使用百度地图
Mar 26 Javascript
小程序中设置缓存过期的实现方法
Jan 14 Javascript
vue-resource 拦截器interceptors使用详解
Jan 18 Vue.js
JavaScript对象数组排序函数及六个用法
Dec 23 #Javascript
JavaScript中的函数(二)
Dec 23 #Javascript
分享JavaScript与Java中MD5使用两个例子
Dec 23 #Javascript
js实现正则匹配中文标点符号的方法
Dec 23 #Javascript
jquery实现点击其他区域时隐藏下拉div和遮罩层的方法
Dec 23 #Javascript
node.js入门实例helloworld详解
Dec 23 #Javascript
基于JavaScript代码实现pc与手机之间的跳转
Dec 23 #Javascript
You might like
将文件夹压缩成zip文件的php代码
2009/12/14 PHP
php与mysql建立连接并执行SQL语句的代码
2011/07/04 PHP
php中删除字符串中最先出现某个字符的实现代码
2013/02/03 PHP
深入for,while,foreach遍历时间比较的详解
2013/06/08 PHP
php生成带logo二维码方法小结
2016/04/08 PHP
jQuery事件绑定.on()简要概述及应用
2013/02/07 Javascript
jQuery实现瀑布流的取巧做法分享
2015/01/12 Javascript
javascript实现带节日和农历的日历特效
2015/02/01 Javascript
jQuery左右滚动支持图片放大缩略图图片轮播代码分享
2015/08/26 Javascript
jQuery div拖拽用法实例
2016/01/14 Javascript
基于jquery实现即时检查格式是否正确的表单
2016/05/06 Javascript
jquery html动态添加的元素绑定事件详解
2016/05/24 Javascript
详解JavaScript的内置对象
2016/12/07 Javascript
Node.js读取文件内容示例
2017/03/07 Javascript
jQuery中clone()函数实现表单中增加和减少输入项
2017/05/13 jQuery
实例详解JavaScript中setTimeout函数的执行顺序
2017/07/12 Javascript
基于BootStrap实现简洁注册界面
2017/07/20 Javascript
vue全局使用axios的方法实例详解
2018/11/22 Javascript
python下如何让web元素的生成更简单的分析
2008/07/17 Python
kNN算法python实现和简单数字识别的方法
2014/11/18 Python
django启动uwsgi报错的解决方法
2018/04/08 Python
浅谈Pandas Series 和 Numpy array中的相同点
2019/06/28 Python
详解Django模版中加载静态文件配置方法
2019/07/21 Python
Python 实现将大图切片成小图,将小图组合成大图的例子
2020/03/14 Python
python绘图pyecharts+pandas的使用详解
2020/12/13 Python
国际领先的在线时尚服装和配饰店:DressLily
2019/03/03 全球购物
CheapTickets香港机票预订网站:CheapTickets.hk
2019/06/26 全球购物
戴尔新加坡官网:Dell Singapore
2020/12/13 全球购物
实习协议书范本
2014/04/22 职场文书
营销计划书范文
2015/01/17 职场文书
高中教师个人总结
2015/02/10 职场文书
盗窃罪辩护词范文
2015/05/21 职场文书
甲午大海战观后感
2015/06/02 职场文书
民警忠诚教育心得体会
2016/01/23 职场文书
如何做好员工培训计划?
2019/07/09 职场文书
vue前端工程的搭建
2021/03/31 Vue.js