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 相关文章推荐
jQuery使用手册之一
Mar 24 Javascript
JQERY limittext 插件0.2版(长内容限制显示)
Aug 27 Javascript
Javascript基础 函数“重载” 详细介绍
Oct 25 Javascript
node.js实现多图片上传实例
Jun 03 Javascript
Javascript核心读书有感之表达式和运算符
Feb 11 Javascript
jQuery插件实现多级联动菜单效果
Dec 01 Javascript
内容滑动切换效果jquery.hwSlide.js插件封装
Jul 07 Javascript
微信小程序 限制1M的瘦身技巧与方法详解
Jan 06 Javascript
JavaScript实现的选择排序算法实例分析
Apr 14 Javascript
Node.js笔记之process模块解读
May 31 Javascript
ES6与CommonJS中的模块处理的区别
Jun 13 Javascript
Threejs实现滴滴官网首页地球动画功能
Jul 13 Javascript
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
phpize的深入理解
2013/06/03 PHP
Yii编程开发常见调用技巧集锦
2016/07/15 PHP
PHP设计模式之工厂模式与单例模式
2016/09/28 PHP
ThinkPHP实现图片上传操作的方法详解
2017/05/08 PHP
PHP迭代与递归实现无限级分类
2017/08/28 PHP
基于Laravel 5.2 regex验证的正确写法
2019/09/29 PHP
基于jquery的网页SELECT下拉框美化代码
2010/10/28 Javascript
基于JQuery实现的类似购物商城的购物车
2011/12/06 Javascript
jquery offset函数应用实例
2012/11/14 Javascript
JS实现悬浮移动窗口(悬浮广告)的特效
2013/03/12 Javascript
jquery 合并内容相同的单元格(示例代码)
2013/12/13 Javascript
JavaScript中this关键词的使用技巧、工作原理以及注意事项
2014/05/20 Javascript
js实现局部页面打印预览原理及示例代码
2014/07/03 Javascript
javascript解三阶幻方(九宫格)
2015/04/22 Javascript
终于实现了!精彩的jquery弹幕效果
2016/07/18 Javascript
js从外部获取图片的实现方法
2016/08/05 Javascript
微信小程序 页面跳转传递值几种方法详解
2017/01/12 Javascript
手动下载Chrome并解决puppeteer无法使用问题
2018/11/12 Javascript
[jQuery] 事件和动画详解
2019/03/05 jQuery
vue-cli3 配置开发与测试环境详解
2019/05/17 Javascript
Vue实现滑动拼图验证码功能
2019/09/15 Javascript
JS面向对象编程——ES6 中class的继承用法详解
2020/03/03 Javascript
python学习之hook钩子的原理和使用
2018/10/25 Python
python 解决动态的定义变量名,并给其赋值的方法(大数据处理)
2018/11/10 Python
Python时间和字符串转换操作实例分析
2019/03/16 Python
python装饰器使用实例详解
2019/12/14 Python
pandas.DataFrame.drop_duplicates 用法介绍
2020/07/06 Python
Python gevent协程切换实现详解
2020/09/14 Python
使用Python将xmind脑图转成excel用例的实现代码(一)
2020/10/12 Python
经济系大学生求职信
2013/10/01 职场文书
外科实习自我鉴定
2013/10/06 职场文书
三好学生演讲稿范文
2014/04/26 职场文书
广播节目策划方案
2014/05/23 职场文书
城管执法人员纪律作风整顿思想汇报
2014/09/13 职场文书
创业计划书之书店
2019/09/10 职场文书
Django基础CBV装饰器和中间件
2022/03/22 Python