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字符编码函数区别分析
Dec 28 Javascript
JQuery 图片滚动轮播示例代码
Mar 24 Javascript
js的touch事件的实际引用
Oct 13 Javascript
jQuery EasyUi实战教程之布局篇
Jan 26 Javascript
Jquery AJAX POST与GET之间的区别详细介绍
Oct 17 Javascript
基于Vue如何封装分页组件
Dec 16 Javascript
微信小程序使用toast消息对话框提示用户忘记输入用户名或密码功能【附源码下载】
Dec 09 Javascript
详解如何使用 vue-cli 开发多页应用
Dec 16 Javascript
详解node Async/Await 更好的异步编程解决方案
May 10 Javascript
vue 中使用 watch 出现了如下的报错的原因分析
May 21 Javascript
vue使用showdown并实现代码区域高亮的示例代码
Oct 17 Javascript
用vite搭建vue3应用的实现方法
Feb 22 Vue.js
原生态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设计模式 Command(命令模式)
2011/06/26 PHP
PHP number_format() 函数定义和用法
2012/06/01 PHP
php检测iis环境是否支持htaccess的方法
2014/02/18 PHP
php文件操作之小型留言本实例
2015/06/20 PHP
10款PHP开源商城系统汇总介绍
2015/07/23 PHP
PHP实现腾讯短网址生成api接口实例
2020/12/08 PHP
Nigma vs AM BO3 第二场2.13
2021/03/10 DOTA
解决 FireFox 下[使用event很麻烦] 的问题.
2006/08/22 Javascript
IE 下的只读 innerHTML
2009/08/21 Javascript
js 函数的执行环境和作用域链的深入解析
2009/11/01 Javascript
关于jquery动态增减控件的一些想法和小插件
2010/08/01 Javascript
基于JQuery的浮动DIV显示提示信息并自动隐藏
2011/02/11 Javascript
js函数setTimeout延迟执行的简单介绍
2013/07/17 Javascript
Node.js(安装,启动,测试)
2014/06/09 Javascript
基于JavaScript实现全屏透明遮罩div层锁屏效果
2016/01/26 Javascript
浅谈移动端之js touch事件 手势滑动事件
2016/11/07 Javascript
高性能js数组去重(12种方法,史上最全)
2019/12/21 Javascript
[59:15]完美世界DOTA2联赛PWL S2 LBZS vs FTD.C 第一场 11.20
2020/11/20 DOTA
python在linux中输出带颜色的文字的方法
2014/06/19 Python
Python实现树莓派WiFi断线自动重连的实例代码
2017/03/16 Python
Python Json序列化与反序列化的示例
2018/01/31 Python
对python多线程与global变量详解
2018/11/09 Python
python事件驱动event实现详解
2018/11/21 Python
python3 http提交json参数并获取返回值的方法
2018/12/19 Python
新年快乐! python实现绚烂的烟花绽放效果
2019/01/30 Python
HTML5中的postMessage API基本使用教程
2016/05/20 HTML / CSS
利物浦足球俱乐部官方商店(美国):Liverpool FC US
2019/10/09 全球购物
JSF界面控制层技术
2013/06/17 面试题
校园活动策划书范文
2014/01/10 职场文书
八一建军节部队活动方案
2014/02/04 职场文书
环保建议书500字
2014/05/14 职场文书
2015年员工工作表现评语
2015/03/25 职场文书
2015年机械设备管理工作总结
2015/05/04 职场文书
2015年社区消防安全工作总结
2015/10/14 职场文书
详解CSS中的特指度和层叠问题
2021/07/15 HTML / CSS
python pygame 开发五子棋双人对弈
2022/05/02 Python