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 相关文章推荐
javascript 对表格的行和列都能加亮显示
Dec 26 Javascript
JavaScript 事件系统
Jul 22 Javascript
Asp.net下使用Jquery Ajax传送和接收DataTable的代码
Sep 12 Javascript
jQuery之自动完成组件的深入解析
Jun 19 Javascript
浅谈checkbox的一些操作(实战经验)
Nov 20 Javascript
JS实现淡蓝色简洁竖向Tab点击切换效果
Oct 06 Javascript
前端jquery部分很精彩
May 03 Javascript
微信小程序 保留小数(toFixed)详细介绍
Nov 16 Javascript
ios设备中angularjs无法改变页面title的解决方法
Sep 13 Javascript
Node.js一行代码实现静态文件服务器的方法步骤
May 07 Javascript
小程序云开发获取不到数据库记录的解决方法
May 18 Javascript
vue项目接口管理,所有接口都在apis文件夹中统一管理操作
Aug 13 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
把从SQL中取出的数据转化成XMl格式
2006/10/09 PHP
php5.2.0内存管理改进
2007/01/22 PHP
关于PHP的相似度计算函数:levenshtein的使用介绍
2013/04/15 PHP
通过PHP current函数获取未知字符键名数组第一个元素的值
2013/06/24 PHP
php实现用手机关闭计算机(电脑)的方法
2015/04/22 PHP
PHP判断字符串长度的两种方法很实用
2015/09/22 PHP
JavaScript 入门·JavaScript 具有全范围的运算符
2007/10/01 Javascript
Extjs TriggerField在弹出窗口显示不出问题的解决方法
2010/01/08 Javascript
JavaScript 高效运行代码分析
2010/03/18 Javascript
jquery.autocomplete修改实现键盘上下键自动填充示例
2013/11/19 Javascript
jQuery操作input值的各种方法总结
2013/11/21 Javascript
Jquery中使用show()与hide()方法动画显示和隐藏图片
2015/10/08 Javascript
jQuery实现的倒计时效果实例小结
2016/04/16 Javascript
使用BootStrap实现悬浮窗口的效果
2016/12/13 Javascript
vue+swiper实现侧滑菜单效果
2017/12/28 Javascript
基于vue+axios+lrz.js微信端图片压缩上传方法
2019/06/25 Javascript
在微信小程序中使用mqtt服务的方法
2019/12/13 Javascript
Vue数字输入框组件示例代码详解
2020/01/15 Javascript
Vue.js实现立体计算器
2020/02/22 Javascript
vue学习笔记之slot插槽用法实例分析
2020/02/29 Javascript
python实现聊天小程序
2018/03/13 Python
Python实现SQL注入检测插件实例代码
2019/02/02 Python
对pyqt5中QTabWidget的相关操作详解
2019/06/21 Python
解决pyecharts在jupyter notebook中使用报错问题
2020/04/23 Python
Pycharm 字体大小调整设置的方法实现
2019/09/27 Python
基于Python+Appium实现京东双十一自动领金币功能
2019/10/31 Python
Python中生成ndarray实例讲解
2021/02/22 Python
一款css实现的鼠标经过按钮的特效
2014/09/11 HTML / CSS
加拿大租车网站:Enterprise Rent-A-Car
2018/07/26 全球购物
来自世界各地的饮料:Flavourly
2019/05/06 全球购物
Booking.com德国:预订最好的酒店和住宿
2020/02/16 全球购物
党员一帮一活动总结
2014/07/08 职场文书
教师党员批评与自我批评
2014/10/15 职场文书
导游词之无锡丝业博物馆
2019/11/12 职场文书
Vue全局事件总线你了解吗
2022/02/24 Vue.js
win10滚动条自动往上跑怎么办?win10滚动条自动往上跑的解决方法
2022/08/05 数码科技