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 相关文章推荐
从父页面读取和操作iframe中内容方法
Jul 25 Javascript
javascript查找字符串中出现最多的字符和次数的小例子
Oct 29 Javascript
jQuery学习笔记之jQuery原型属性和方法
Jun 09 Javascript
window.returnValue使用方法示例介绍
Jul 03 Javascript
推荐一个封装好的getElementsByClassName方法
Dec 02 Javascript
jQuery中outerWidth()方法用法实例
Jan 19 Javascript
Vue.js学习教程之列表渲染详解
May 17 Javascript
JS中Attr的用法详解
Oct 09 Javascript
axios向后台传递数组作为参数的方法
Aug 11 Javascript
vue弹窗插件实战代码
Sep 08 Javascript
详解ES6 Fetch API HTTP请求实用指南
Nov 14 Javascript
jQuery Datatables 动态列+跨列合并实现代码
Jan 30 jQuery
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/02/14 PHP
解析wamp5下虚拟机配置文档
2013/06/27 PHP
php+html5实现无刷新图片上传教程
2016/01/22 PHP
浅谈PHP面向对象之访问者模式+组合模式
2017/05/22 PHP
php自定义排序uasort函数示例【二维数组按指定键值排序】
2019/06/19 PHP
Yii框架多语言站点配置方法分析【中文/英文切换站点】
2020/04/07 PHP
iframe子父页面调用js函数示例
2013/11/07 Javascript
JS和JQ的event对象区别分析
2014/11/24 Javascript
浅析Node.js中使用依赖注入的相关问题及解决方法
2015/06/24 Javascript
教你用javascript实现随机标签云效果_附代码
2016/03/16 Javascript
AngularJS 教程及实例代码
2017/10/23 Javascript
详解Koa中更方便简单发送响应的方式
2018/07/20 Javascript
浅谈Vue.js路由管理器 Vue Router
2018/08/16 Javascript
浅谈javascript中的prototype和__proto__的理解
2019/04/07 Javascript
vue-cli脚手架引入弹出层layer插件的几种方法
2019/06/24 Javascript
javascript递归函数定义和用法示例分析
2020/07/22 Javascript
JS获取一个字符串中指定字符串第n次出现的位置
2021/02/10 Javascript
Python 文件重命名工具代码
2009/07/26 Python
使用Python的PIL模块来进行图片对比
2016/02/18 Python
Python安装使用命令行交互模块pexpect的基础教程
2016/05/12 Python
python中Switch/Case实现的示例代码
2017/11/09 Python
每天迁移MySQL历史数据到历史库Python脚本
2018/04/13 Python
python email smtplib模块发送邮件代码实例
2018/04/26 Python
python socket网络编程之粘包问题详解
2018/04/28 Python
一行python实现树形结构的方法
2019/08/09 Python
Python如何转换字符串大小写
2020/06/04 Python
Python实现上下文管理器的方法
2020/08/07 Python
python爬虫分布式获取数据的实例方法
2020/11/26 Python
上海微创软件面试题
2012/06/14 面试题
大学生自我鉴定
2013/12/08 职场文书
采购助理岗位职责
2014/02/16 职场文书
财务管理职业生涯规划书
2014/02/26 职场文书
个人专业技术总结
2015/03/05 职场文书
行政诉讼答辩状
2015/05/21 职场文书
2015年学校远程教育工作总结
2015/07/20 职场文书
Python安装及建立虚拟环境的完整步骤
2022/06/25 Servers