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 相关文章推荐
使用Modello编写JavaScript类
Dec 22 Javascript
工作中常用到的JS表单验证代码(包括例子)
Nov 11 Javascript
IE6中使用position导致页面变形的解决方案(js代码)
Jan 09 Javascript
JQuery学习笔记 nt-child的使用
Jan 17 Javascript
JavaScript中OnLoad几种使用方法
Dec 15 Javascript
关于页面嵌入swf覆盖div层的问题的解决方法
Feb 11 Javascript
使用JQ来编写最基本的淡入淡出效果附演示动画
Oct 31 Javascript
JavaScript中的函数嵌套使用
Jun 04 Javascript
JavaScript制作简单的日历效果
Mar 10 Javascript
JS实现六边形3D拖拽翻转效果的方法
Sep 11 Javascript
Javascript 创建类并动态添加属性及方法的简单实现
Oct 20 Javascript
Vue.js父与子组件之间传参示例
Feb 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
使用php来实现网络服务
2009/09/15 PHP
php+jquery编码方面的一些心得(utf-8 gb2312)
2010/10/12 PHP
php网页标题中文乱码的有效解决方法
2014/03/05 PHP
搜索附近的人PHP实现代码
2018/02/11 PHP
use jscript List Installed Software
2007/06/11 Javascript
JavaScript中实现Map的示例代码
2015/09/09 Javascript
JS+CSS实现另类带提示效果的竖向导航菜单
2015/10/15 Javascript
基于Jquery easyui 选中特定的tab
2015/11/17 Javascript
jQuery学习笔记之回调函数
2016/08/15 Javascript
基于ExtJs在页面上window再调用Window的事件处理方法
2017/07/26 Javascript
Vue SSR 即时编译技术的实现
2020/05/06 Javascript
[01:09]模型精美,特效酷炫!TI9不朽宝藏Ⅰ鉴赏
2019/05/10 DOTA
Python中title()方法的使用简介
2015/05/20 Python
python获取文件扩展名的方法
2015/07/06 Python
浅谈五大Python Web框架
2017/03/20 Python
python实现决策树
2017/12/21 Python
django反向解析URL和URL命名空间的方法
2018/06/05 Python
Python多线程应用于自动化测试操作示例
2018/12/06 Python
关于python下cv.waitKey无响应的原因及解决方法
2019/01/10 Python
python生成器用法实例详解
2019/11/22 Python
pd.DataFrame统计各列数值多少的实例
2019/12/05 Python
python爬虫beautifulsoup解析html方法
2020/12/07 Python
Agoda香港:全球特价酒店预订
2017/05/07 全球购物
美国羽绒床上用品第一品牌:Pacific Coast
2018/08/25 全球购物
Edwaybuy西班牙:小米在线商店
2019/12/04 全球购物
农民工创业典型事迹
2014/01/25 职场文书
会计助理岗位职责
2014/02/17 职场文书
本科生导师推荐信范文
2014/05/18 职场文书
个人承诺书格式
2014/06/03 职场文书
2014幼儿教师个人工作总结
2014/12/03 职场文书
罚款通知怎么写
2015/04/22 职场文书
政审证明材料
2015/06/19 职场文书
美德少年事迹材料(2016推荐版)
2016/02/25 职场文书
阿里云Nginx配置https实现域名访问项目(图文教程)
2021/03/31 Servers
简单谈谈Python面向对象的相关知识
2021/06/28 Python
Python中非常使用的6种基本变量的操作与技巧
2022/03/22 Python