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判断浏览器是否是IE的比较好的办法
May 08 Javascript
修改jquery.lazyload.js实现页面延迟载入
Dec 22 Javascript
40款非常棒的jQuery 插件和制作教程(系列一)
Oct 26 Javascript
javascript中xml操作实现代码
Nov 21 Javascript
javascript实现起伏的水波背景效果
May 16 Javascript
AngularJS入门教程之数据绑定原理详解
Nov 02 Javascript
jQuery.Form实现Ajax上传文件同时设置headers的方法
Jun 26 jQuery
input file样式修改以及图片预览删除功能详细概括(推荐)
Aug 17 Javascript
JS验证码实现代码
Sep 14 Javascript
Node绑定全局TraceID的实现方法
Nov 14 Javascript
electron+vue实现div contenteditable截图功能
Jan 07 Javascript
vue制作toast组件npm包示例代码
Oct 29 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中创建空文件的代码[file_put_contents vs touch]
2012/01/20 PHP
Session服务器配置指南与使用经验的深入解析
2013/06/17 PHP
php查询mysql大量数据造成内存不足的解决方法
2015/03/04 PHP
Laravel5.1框架注册中间件的三种场景详解
2019/07/09 PHP
Yii2.0框架模型添加/修改/删除数据操作示例
2019/07/18 PHP
php+mysql+ajax 局部刷新点赞/取消点赞功能(每个账号只点赞一次)
2020/07/24 PHP
用javascript实现兼容IE7的类库 IE7_0_9.zip提供下载
2007/08/08 Javascript
prototype 学习笔记整理
2009/07/17 Javascript
两个数组去重的JS代码
2013/12/04 Javascript
jquery实现简单的表单验证
2015/11/17 Javascript
jQuery移动web开发中的页面初始化与加载事件
2015/12/03 Javascript
浅谈JS原型对象和原型链
2016/03/02 Javascript
JavaScript中const、var和let区别浅析
2016/10/11 Javascript
Bootstrap 模态框(Modal)插件代码解析
2016/12/21 Javascript
Javascript 使用ajax与C#获取文件大小实例详解
2017/01/13 Javascript
Bootstrap模态框案例解析
2017/03/05 Javascript
利用yarn代替npm管理前端项目模块依赖的方法详解
2017/09/04 Javascript
微信JS-SDK updateAppMessageShareData安卓不能自定义分享详解
2019/03/29 Javascript
Vue设置长时间未操作登录自动到期返回登录页
2020/01/22 Javascript
nodejs实现百度舆情接口应用示例
2020/02/07 NodeJs
python模拟登陆阿里妈妈生成商品推广链接
2014/04/03 Python
Django 日志配置按日期滚动的方法
2019/01/31 Python
python实现批量文件重命名
2019/10/31 Python
如何利用pygame实现简单的五子棋游戏
2019/12/29 Python
浅谈图像处理中掩膜(mask)的意义
2020/02/19 Python
Python-openCV开运算实例
2020/07/05 Python
Scrapy项目实战之爬取某社区用户详情
2020/09/17 Python
Python命令行参数argv和argparse该如何使用
2021/02/08 Python
canvas离屏技术与放大镜实现代码示例
2018/08/31 HTML / CSS
上海中网科技笔试题
2012/02/19 面试题
葛优非诚勿扰搞笑征婚台词
2014/03/17 职场文书
安全责任书怎么写
2014/07/28 职场文书
交通事故委托书范本精选
2014/10/04 职场文书
《悲惨世界》:比天空更广阔的是人的心灵
2020/01/16 职场文书
Python OpenCV 彩色与灰度图像的转换实现
2021/06/05 Python
vue3获取当前路由地址
2022/02/18 Vue.js