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 相关文章推荐
由prototype_1.3.1进入javascript殿堂-类的初探
Nov 06 Javascript
html中table数据排序的js代码
Aug 09 Javascript
利用谷歌地图API获取点与点的距离的js代码
Oct 11 Javascript
web基于浏览器的本地存储方法应用
Nov 27 Javascript
js鼠标点击事件在各个浏览器中的写法及Event对象属性介绍
Jan 24 Javascript
通过js为元素添加多项样式,浏览器全兼容写法
Aug 30 Javascript
webpack+vue.js实现组件化详解
Oct 12 Javascript
jQuery插件WebUploader实现文件上传
Nov 07 Javascript
jquery+ajax实现省市区三级联动效果简单示例
Jan 04 Javascript
Redux 和 Mobx的选择问题:让你不再困惑!
Sep 18 Javascript
JavaScript实现的拼图算法分析
Feb 13 Javascript
vue动态绘制四分之三圆环图效果
Sep 03 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原生函数一定好吗?
2014/12/08 PHP
PHP实现图片的等比缩放和Logo水印功能示例
2017/05/04 PHP
php 中phar包的使用教程详解
2018/10/26 PHP
兼容多浏览器的iframe自适应高度(ie8 、谷歌浏览器4.0和 firefox3.5.3)
2009/11/04 Javascript
仅IE9/10同时支持script元素的onload和onreadystatechange事件分析
2011/04/27 Javascript
js防止表单重复提交实现代码
2012/09/05 Javascript
js关闭模态窗口刷新父页面或跳转页面
2012/12/13 Javascript
用C/C++来实现 Node.js 的模块(二)
2014/09/24 Javascript
AngularJS基础 ng-include 指令示例讲解
2016/08/01 Javascript
浅谈js中的变量名和函数名重名
2017/02/13 Javascript
如何使用bootstrap框架 bootstrap入门必看!
2017/04/13 Javascript
JavaScrpt的面向对象全面解析
2017/05/09 Javascript
Vue.js使用$.ajax和vue-resource实现OAuth的注册、登录、注销和API调用
2017/05/10 Javascript
通过学习bootstrop导航条学会修改bootstrop颜色基调
2017/06/11 Javascript
对存在JavaScript隐式类型转换的四种情况的总结(必看篇)
2017/08/31 Javascript
对Vue.js之事件的绑定(v-on: 或者 @ )详解
2018/09/15 Javascript
js实现网页版贪吃蛇游戏
2020/02/22 Javascript
vue+axios 拦截器实现统一token的案例
2020/09/11 Javascript
使用python将mdb数据库文件导入postgresql数据库示例
2014/02/17 Python
详解Python进程间通信之命名管道
2017/08/28 Python
python计算两个矩形框重合百分比的实例
2018/11/07 Python
Python多分支if语句的使用
2020/09/03 Python
Canvas 像素处理之改变透明度的实现代码
2019/01/08 HTML / CSS
AmazeUI 列表的实现示例
2020/08/17 HTML / CSS
Intimissimi德国网上商店:意大利知名内衣品牌
2018/04/03 全球购物
会计实习期自我鉴定
2013/10/06 职场文书
暑期社会实践方案
2014/02/05 职场文书
汽车技术服务与贸易专业求职信
2014/07/20 职场文书
纪念九一八事变83周年国旗下讲话稿
2014/09/15 职场文书
2014年业务工作总结
2014/11/17 职场文书
2014年绿化工作总结
2014/12/09 职场文书
幼儿园大班教师个人总结
2015/02/05 职场文书
大学生村官工作总结2015
2015/04/09 职场文书
2016年春节慰问信息大全
2015/11/30 职场文书
2016年父亲节寄语
2015/12/04 职场文书
详解使用 CSS prefers-* 规范提升网站的可访问性与健壮性
2021/05/25 HTML / CSS