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 相关文章推荐
[原创]js获取数组任意个不重复的随机数组元素
Mar 15 Javascript
jQuery实现类似滑动门切换效果的层切换
Sep 23 Javascript
鼠标移到div,浮层显示明细,弹出层与div的上边距左边距重合(示例代码)
Dec 14 Javascript
jquery浏览器滚动加载技术实现方案
Jun 03 Javascript
jquery 新建的元素事件绑定问题解决方案
Jun 12 Javascript
jQuery实现简单隔行变色的方法
Feb 20 Javascript
jQuery实现点击查看大图并以弹框的形式居中
Aug 08 Javascript
JavaScript中removeChild 方法开发示例代码
Aug 15 Javascript
JavaScript引用类型RegExp基本用法详解
Aug 09 Javascript
详解VScode编辑器vue环境搭建所遇问题解决方案
Apr 26 Javascript
vue指令做滚动加载和监听等
May 26 Javascript
RxJS的入门指引和初步应用
Jun 15 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
收音机另类DIY - 纸巾盒做外壳
2021/03/02 无线电
fleaphp常用方法分页之Pager使用方法
2011/04/23 PHP
php堆排序(heapsort)练习
2013/11/13 PHP
ThinkPHP中获取指定日期后工作日的具体日期方法
2018/10/14 PHP
php实现QQ小程序发送模板消息功能
2019/09/18 PHP
JQuery从头学起第二讲
2010/07/04 Javascript
jquery form 加载数据示例
2014/04/21 Javascript
jquery 重写 ajax提交并判断权限后 使用load方法报错解决方法
2016/01/19 Javascript
RGB和YUV 多媒体编程基础详细介绍
2016/11/04 Javascript
详解handlebars+require基本使用方法
2016/12/21 Javascript
jQuery tip提示插件(实例分享)
2017/04/28 jQuery
nodejs简单访问及操作mysql数据库的方法示例
2018/03/15 NodeJs
vue 项目地址去掉 #的方法
2018/10/20 Javascript
对于Python的Django框架使用的一些实用建议
2015/04/03 Python
Python中比较特别的除法运算和幂运算介绍
2015/04/05 Python
Python3 适合初学者学习的银行账户登录系统实例
2017/08/08 Python
python如何读写json数据
2018/03/21 Python
分享Pycharm中一些不为人知的技巧
2018/04/03 Python
Python安装及Pycharm安装使用教程图解
2019/09/20 Python
如何将tensorflow训练好的模型移植到Android (MNIST手写数字识别)
2020/04/22 Python
解决IDEA 的 plugins 搜不到任何的插件问题
2020/05/04 Python
PyCharm2019.3永久激活破解详细图文教程,亲测可用(不定期更新)
2020/10/29 Python
CSS3 linear-gradient线性渐变生成加号和减号的方法
2017/11/21 HTML / CSS
决定成败的关键——创业计划书
2014/01/24 职场文书
《找不到快乐的波斯猫》教学反思
2014/02/24 职场文书
2014年公司庆元旦活动方案
2014/03/05 职场文书
社会发展项目建议书
2014/08/25 职场文书
争先创优活动总结
2014/08/27 职场文书
公务员学习习总书记“三严三实”思想汇报
2014/09/19 职场文书
课外活动实习计划
2015/01/19 职场文书
社区服务活动报告
2015/02/05 职场文书
水电施工员岗位职责
2015/04/11 职场文书
农业项目合作意向书
2015/05/08 职场文书
传单、海报早OUT了,另类传单营销方案送给你!
2019/07/15 职场文书
导游词之无锡东林书院
2019/12/11 职场文书
Android Gradle 插件自定义Plugin实现注意事项
2022/06/16 Java/Android