js倒计时简单实现代码


Posted in Javascript onAugust 11, 2016

倒计时: 

1.设置一个有效的结束日期 

2.计算剩余时间 

3.将时间转换成可用的格式 

4.输出时钟数据作为一个可重用的对象 

5.在页面上显示时钟,并在它到达0时停止

html

<div id="clock">
  <span id="days"></span>天
  <span id="hours"></span>时

  <span id="minutes"></span>分

  <span id="seconds"></span>秒

</div>

js代码 

<script><br>/*计算剩余时间*/
  function getTimeReamin(endtime){
   //剩余的秒数
    var remainSec=(Date.parse(endtime)-Date.parse(new Date()))/1000;
    var days=Math.floor(remainSec/(3600*24));
    var hours=Math.floor(remainSec/3600%24);
    var minutes=Math.floor(remainSec/60%60);
    var seconds=Math.floor(remainSec%60);
    return{"remainSec":remainSec,
     "days":days,
     "hours":hours,
     "minutes":minutes,
     "seconds":seconds
    }
  } 
var endtime="2016/10/10";
var clock=document.getElementById("clock");
//设置定时器
var timeid=setInterval(function () {
  var t=getTimeReamin(endtime);
  //判断时间格式
  days= t.days>=0&& t.days<10?"0"+t.days:t.days;
  hours= t.hours>=0&& t.hours<10?"0"+t.hours:t.hours;
  minutes=t.minutes>=0&&t.minutes<10?"0"+t.minutes:t.minutes;
  seconds=t.seconds>=0&&t.seconds<10?"0"+t.seconds:t.seconds;
  //设置时间
  document.getElementById("days").innerText= days;
  document.getElementById("hours").innerText= hours;
  document.getElementById("minutes").innerText= minutes;
  document.getElementById("seconds").innerText=seconds;
//清除定时器
  if(t.remainSec<=0){
    clearInterval(timeid);
  }
});
<script>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jqPlot jquery的页面图表绘制工具
Jul 25 Javascript
JavaScript 对象成员的可见性说明
Oct 16 Javascript
js检测浏览器版本、核心、是否移动端示例
Apr 24 Javascript
JS实现当前页居中分页效果的方法
Jun 18 Javascript
js获取当前日期时间及其它日期操作汇总
Mar 08 Javascript
详解vue 组件之间使用eventbus传值
Oct 25 Javascript
浅谈Vuex的状态管理(全家桶)
Nov 04 Javascript
vue-scroller记录滚动位置的示例代码
Jan 17 Javascript
Angular6封装http请求的步骤详解
Aug 13 Javascript
Vue源码探究之虚拟节点的实现
Apr 17 Javascript
vue-property-decorator用法详解
Dec 12 Javascript
在Webpack中用url-loader处理图片和字体的问题
Apr 28 Javascript
原生态js,鼠标按下后,经过了那些单元格的简单实例
Aug 11 #Javascript
vue分页组件table-pagebar使用实例解析
Nov 15 #Javascript
使用BootStrap实现用户登录界面UI
Aug 10 #Javascript
基于JSON格式数据的简单jQuery幻灯片插件(jquery-slider)
Aug 10 #Javascript
BootStrap Typeahead自动补全插件实例代码
Aug 10 #Javascript
BootStrap中Datepicker控件带中文的js文件
Aug 10 #Javascript
JS获取鼠标选中的文字
Aug 10 #Javascript
You might like
在普通HTTP上安全地传输密码
2007/07/21 PHP
php魔术方法与魔术变量、内置方法与内置变量的深入分析
2013/06/03 PHP
浅析PHP中call user func()函数及如何使用call user func调用自定义函数
2015/11/05 PHP
PHP实现Redis单据锁以及防止并发重复写入
2018/04/10 PHP
PHP如何搭建百度Ueditor富文本编辑器
2018/09/21 PHP
文字幻灯片
2006/06/26 Javascript
Jquery优化效率 提升性能解决方案
2010/09/06 Javascript
禁用键盘上的(全局)指定键兼容iE、Chrome、火狐
2013/05/14 Javascript
javascript深拷贝(deepClone)详解
2016/08/24 Javascript
js html css实现复选框全选与反选
2016/10/09 Javascript
JavaScript获取短信验证码(周期性)
2016/12/29 Javascript
Vue2.0用户权限控制解决方案
2017/11/29 Javascript
尝试自己动手用react来写一个分页组件(小结)
2018/02/09 Javascript
JS实现的类似微信聊天效果示例
2019/01/29 Javascript
实现一个 Vue 吸顶锚点组件方法
2019/07/10 Javascript
Vue2.0实现简单分页及跳转效果
2019/07/29 Javascript
React学习之受控组件与数据共享实例分析
2020/01/06 Javascript
JS浏览器BOM常见操作实例详解
2020/04/27 Javascript
JavaScript类的继承多种实现方法
2020/05/30 Javascript
vue 解决uglifyjs-webpack-plugin打包出现报错的问题
2020/08/04 Javascript
[44:39]2014 DOTA2国际邀请赛中国区预选赛 NE VS CNB
2014/05/21 DOTA
Python 中 Virtualenv 和 pip 的简单用法详解
2017/08/18 Python
python+selenium实现登录账户后自动点击的示例
2017/12/22 Python
详解python中的装饰器
2018/07/10 Python
python设置环境变量的作用和实例
2019/07/09 Python
Python新手学习raise用法
2020/06/03 Python
教师岗位聘任书范文
2014/03/29 职场文书
个人批评与自我批评发言稿
2014/09/28 职场文书
股东出资证明书范例
2014/10/04 职场文书
2014年科室工作总结
2014/11/20 职场文书
廉政承诺书
2015/01/19 职场文书
海上钢琴师观后感
2015/06/03 职场文书
机械原理课程设计心得体会
2016/01/15 职场文书
《曾国藩家书》读后感——读家书,立家风
2019/08/21 职场文书
《暗黑破坏神2:重制版》本周进行第一轮A测 目前可官网进行申请报名
2021/04/07 其他游戏
python 开心网和豆瓣日记爬取的小爬虫
2021/05/29 Python