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对象弹出一个层
Mar 26 Javascript
Jquery下判断Id是否存在的代码
Jan 06 Javascript
分享8款优秀的 jQuery 加载动画和进度条插件
Oct 24 Javascript
60个很实用的jQuery代码开发技巧收集
Dec 15 Javascript
基于JavaScript实现鼠标悬浮弹出跟随鼠标移动的带箭头的信息层
Jan 18 Javascript
JavaScript检查子字符串是否在字符串中的方法
Feb 03 Javascript
jQuery实现图片轮播效果代码
Sep 27 Javascript
各种选择框jQuery的选中方法(实例讲解)
Jun 27 jQuery
详解Js中的模块化是如何实现的
Oct 18 Javascript
Vue 3.0双向绑定原理的实现方法
Oct 23 Javascript
Ajax常用封装库——Axios的使用
May 08 Javascript
Vue实现tab导航栏并支持左右滑动功能
Jun 28 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
地摊中国 - 珍藏老照片
2020/08/18 杂记
PHP使用PHPMailer发送邮件的简单使用方法
2013/11/12 PHP
php缩小png图片不损失透明色的解决方法
2013/12/25 PHP
javascript 控制弹出窗口
2007/04/10 Javascript
javascript document.referrer 用法
2009/04/30 Javascript
input的focus方法使用
2010/03/13 Javascript
获取焦点时,利用js定时器设定时间执行动作
2010/04/02 Javascript
基于jQuery的计算文本框字数的代码
2012/06/06 Javascript
jquery文本框中的事件应用以输入邮箱为例
2014/05/06 Javascript
jQuery中判断对象是否存在的方法汇总
2016/02/24 Javascript
浅谈bootstrap源码分析之scrollspy(滚动侦听)
2016/06/06 Javascript
javascript基础知识讲解
2017/01/11 Javascript
Bootstrap实现下拉菜单多级联动
2017/11/23 Javascript
全面介绍vue 全家桶和项目实例
2017/12/27 Javascript
Vue中使用canvas方法总结
2019/02/12 Javascript
Node.js 实现远程桌面监控的方法步骤
2019/07/02 Javascript
layui加载表格,绑定新增,编辑删除,查看按钮事件的例子
2019/09/06 Javascript
通过高德地图API获得某条道路上的所有坐标用于描绘道路的方法
2020/08/24 Javascript
跟老齐学Python之有容乃大的list(4)
2014/09/28 Python
win与linux系统中python requests 安装
2016/12/04 Python
Python3使用turtle绘制超立方体图形示例
2018/06/19 Python
python画折线图的程序
2018/07/26 Python
Python 闭包,函数分隔作用域,nonlocal声明非局部变量操作示例
2019/10/14 Python
详解Pandas 处理缺失值指令大全
2020/07/30 Python
phonegap常用事件总结(必看篇)
2017/03/31 HTML / CSS
美国休闲服装品牌:Express
2016/09/24 全球购物
大学在校生求职信范文
2013/11/21 职场文书
经济学博士求职自荐信范文
2013/11/23 职场文书
浪费资源的建议书
2014/03/12 职场文书
教师师德承诺书
2014/03/26 职场文书
触电现场处置方案
2014/05/14 职场文书
2014年小学生迎国庆65周年演讲稿
2014/09/27 职场文书
职工年度考核评语
2014/12/31 职场文书
个人年终总结怎么写
2015/03/09 职场文书
优秀班干部主要事迹材料
2015/11/04 职场文书
公历12个月名称的由来
2022/04/12 杂记