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 相关文章推荐
“不能执行已释放的Script代码”错误的原因及解决办法
Sep 09 Javascript
由JavaScript技术实现的web小游戏(不含网游)
Jun 12 Javascript
JS中动态添加事件(绑定事件)的代码
Jan 09 Javascript
简单漂亮的js弹窗可自由拖拽且兼容大部分浏览器
Oct 22 Javascript
js简单实现点击左右运动的方法
Apr 10 Javascript
详解Angular2 之 结构型指令
Jun 21 Javascript
JavaScript复制内容到剪贴板的两种常用方法
Feb 27 Javascript
微信小程序bindtap事件与冒泡阻止详解
Aug 08 Javascript
layui监听工具栏的实例(操作列表按钮)
Sep 10 Javascript
JS实现TITLE悬停长久显示效果完整示例
Feb 11 Javascript
详解JavaScript 作用域
Jul 14 Javascript
js+canvas实现五子棋小游戏
Aug 02 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
不错的一篇面向对象的PHP开发模式(简写版)
2007/03/15 PHP
PHP自定义函数收代码
2010/08/01 PHP
PHP中PDO基础教程 入门级
2011/09/04 PHP
PHP类相关知识点实例总结
2016/09/28 PHP
在线编辑器的实现原理(兼容IE和FireFox)
2007/03/09 Javascript
javascript 节点遍历函数
2010/03/28 Javascript
一个简单的jQuery插件制作 学习过程及实例
2010/04/25 Javascript
DLL+ ActiveX控件+WEB页面调用例子
2010/08/07 Javascript
javascript中字符串的定义示例代码
2013/12/19 Javascript
js获取select默认选中的Option并不是当前选中值
2014/05/07 Javascript
AngularJS HTML编译器介绍
2014/12/06 Javascript
JS实现的另类手风琴效果网页内容切换代码
2015/09/08 Javascript
JQuery validate插件Remote用法大全
2016/05/15 Javascript
vue webpack打包优化操作技巧
2018/02/22 Javascript
Vue.js做select下拉列表的实例(ul-li标签仿select标签)
2018/03/02 Javascript
基于Vue渲染与插件的加载顺序的问题详解
2018/03/05 Javascript
在react-router4中进行代码拆分的方法(基于webpack)
2018/03/08 Javascript
javascript和php使用ajax通信传递JSON的实例
2018/08/21 Javascript
JavaScript循环遍历你会用哪些之小结篇
2018/09/28 Javascript
Vue.js 实现地址管理页面思路详解(地址添加、编辑、删除和设置默认地址)
2019/12/11 Javascript
react实现移动端下拉菜单的示例代码
2020/01/16 Javascript
写给新手同学的vuex快速上手指北小结
2020/04/14 Javascript
Python数据类型中的“冒号“[::]——分片与步长操作示例
2018/01/24 Python
pytorch中的weight-initilzation用法
2020/06/24 Python
canvas基础之图形验证码的示例
2018/01/02 HTML / CSS
贝尔帐篷精品店:Bell Tent Boutique
2019/06/12 全球购物
Bluebella德国官网:英国性感内衣和睡衣品牌
2019/11/08 全球购物
java程序员面试交流
2012/11/29 面试题
新闻编辑专业自荐信
2014/07/02 职场文书
安全责任书怎么写
2014/07/28 职场文书
中国梦演讲稿范文
2014/08/28 职场文书
2014年销售人员工作总结
2014/11/27 职场文书
《小小的船》教学反思
2016/02/18 职场文书
python 利用 PIL 将数组值转成图片的实现
2021/04/12 Python
Spring Cloud Gateway去掉url前缀
2021/07/15 Java/Android
Win11自动黑屏怎么办 Win11自动黑屏设置教程
2022/07/15 数码科技