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 相关文章推荐
新手入门常用代码集锦
Jan 11 Javascript
Javascript 浮点运算的问题分析与解决方法
Aug 27 Javascript
jQuery实现自动滚动到页面顶端的方法
May 22 Javascript
Javascript监视变量变化的方法
Jun 09 Javascript
JS脚本实现动态给标签控件添加事件的方法
Jun 02 Javascript
JS封装的自动创建表格的实现代码
Jun 15 Javascript
你知道setTimeout是如何运行的吗?
Aug 16 Javascript
浅谈jquery.form.js的ajaxSubmit和ajaxForm的使用
Sep 09 Javascript
HTML5+JS+JQuery+ECharts实现异步加载问题
Dec 16 jQuery
Vue Element 分组+多选+可搜索Select选择器实现示例
Jul 23 Javascript
微信小程序使用setData修改数组中单个对象的方法分析
Dec 30 Javascript
JavaScript格式化json和xml的方法示例
Jan 22 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
smarty模板引擎之分配数据类型
2015/03/30 PHP
jQuery+php简单实现全选删除的方法
2016/11/28 PHP
PHP使用两个栈实现队列功能的方法
2018/01/15 PHP
laravel 配置路由 api和web定义的路由的区别详解
2019/09/03 PHP
为原生js Array增加each方法
2012/04/07 Javascript
jquery 面包屑导航 具体实现
2013/06/05 Javascript
nodejs批量修改文件编码格式
2015/01/22 NodeJs
分析了一下JQuery中的extend方法实现原理
2015/02/27 Javascript
JS脚本实现动态给标签控件添加事件的方法
2016/06/02 Javascript
nodejs的压缩文件模块archiver用法示例
2017/01/18 NodeJs
JavaScript之filter_动力节点Java学院整理
2017/06/28 Javascript
vue ssr 指南详读
2018/06/29 Javascript
全面了解JavaScript的作用域链
2019/04/03 Javascript
element-ui table组件如何使用render属性的实现
2019/11/04 Javascript
[00:55]2015国际邀请赛中国区预选赛5月23日——28日约战上海
2015/05/25 DOTA
详细解读Python中解析XML数据的方法
2015/10/15 Python
通过源码分析Python中的切片赋值
2017/05/08 Python
python中如何使用正则表达式的集合字符示例
2017/10/09 Python
Python3从零开始搭建一个语音对话机器人的实现
2019/08/23 Python
使用python远程操作linux过程解析
2019/12/04 Python
pytorch 自定义参数不更新方式
2020/01/06 Python
浅谈pytorch卷积核大小的设置对全连接神经元的影响
2020/01/10 Python
Python接口开发实现步骤详解
2020/04/26 Python
Python如何实现邮件功能
2020/05/27 Python
利用Python批量识别电子账单数据的方法
2021/02/08 Python
AVON雅芳官网:世界上最大的美容化妆品公司之一
2016/11/02 全球购物
AC Lens:购买隐形眼镜
2017/02/26 全球购物
英国殿堂级有机护肤品牌:Rodial
2017/04/17 全球购物
台湾全方位线上课程与职能学习平台:TibaMe
2019/12/04 全球购物
学期自我评价
2014/01/27 职场文书
八年级美术教学反思
2014/02/02 职场文书
高等教育学自荐书范文
2014/02/10 职场文书
服务质量承诺书
2014/03/27 职场文书
大学新闻系自荐书
2014/05/31 职场文书
《乌鸦喝水》教学反思
2016/02/19 职场文书
win10更新失败无限重启解决方法
2022/04/19 数码科技