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读取中文COOKIE的解决办法
Feb 15 Javascript
table insertRow、deleteRow定义和用法总结
May 14 Javascript
使用js复制链接中的部分文字的方法
Jul 30 Javascript
javascript常见数据验证插件大全
Aug 03 Javascript
JQuery.validate在ie8下不支持的快速解决方法
May 18 Javascript
jQuery解决$符号命名冲突
Jun 18 Javascript
javascript循环链表之约瑟夫环的实现方法
Jan 16 Javascript
angular.js中解决跨域问题的三种方式
Jul 12 Javascript
Vue 仿QQ左滑删除组件功能
Mar 12 Javascript
Vue 监听列表item渲染事件方法
Sep 06 Javascript
详解mpvue实现对苹果X安全区域的适配
Jul 31 Javascript
js最全的数组的降维5种办法(小结)
Apr 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
使用dump函数,给php加断点测试
2013/06/25 PHP
PHP大批量插入数据库的3种方法和速度对比
2014/07/08 PHP
写一段简单的PHP建立文件夹代码
2015/01/06 PHP
php实现当前页面点击下载文件的简单方法
2016/09/22 PHP
PHP使用Redis替代文件存储Session的方法
2017/02/15 PHP
laravel框架之数据库查出来的对象实现转化为数组
2019/10/23 PHP
jquery属性选择器not has怎么写 行悬停高亮显示
2013/11/13 Javascript
jQuery截取指定长度字符串的实现原理及代码
2014/07/01 Javascript
jquery获取及设置outerhtml的方法
2015/03/09 Javascript
jQuery EasyUI提交表单验证
2016/07/19 Javascript
微信小程序 MINA文件结构
2016/10/17 Javascript
vue addRoutes实现动态权限路由菜单的示例
2018/05/15 Javascript
VueQuillEditor富文本上传图片(非base64)
2020/06/03 Javascript
用python登录Dr.com思路以及代码分享
2014/06/25 Python
跟老齐学Python之玩转字符串(3)
2014/09/14 Python
Python导入oracle数据的方法
2015/07/10 Python
Python自动化测试Eclipse+Pydev 搭建开发环境
2016/08/15 Python
微信跳一跳小游戏python脚本
2018/01/05 Python
Python学生成绩管理系统简洁版
2020/04/05 Python
Python批量提取PDF文件中文本的脚本
2018/03/14 Python
PyCharm在新窗口打开项目的方法
2019/01/17 Python
Python Process多进程实现过程
2019/10/22 Python
Matplotlib使用Cursor实现UI定位的示例代码
2020/03/12 Python
动态设置django的model field的默认值操作步骤
2020/03/30 Python
印度最大的旅游网站:MakeMyTrip
2016/10/05 全球购物
ziaja齐叶雅官方海外旗舰店:来自波兰的天然护肤品牌
2017/01/02 全球购物
毕业生物理教师求职信
2013/10/17 职场文书
学校食堂采购员岗位职责
2013/12/05 职场文书
高校十八大报告感想
2014/01/27 职场文书
租房协议书
2014/04/10 职场文书
联谊活动总结
2014/08/28 职场文书
2014年文员工作总结
2014/11/18 职场文书
道路交通事故人身损害赔偿协议书
2014/11/19 职场文书
大学生求职自荐信
2015/03/24 职场文书
公司安全管理制度范本
2015/08/05 职场文书
Java中的Kafka为什么性能这么快及4大核心详析
2022/09/23 Java/Android