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 Zifa FormValid 0.1表单验证 代码打包下载
Jun 08 Javascript
禁用页面部分JavaScript方法的具体实现
Jul 31 Javascript
基于jQuery实现鼠标点击导航菜单水波动画效果附源码下载
Jan 06 Javascript
js中获取键盘事件的简单实现方法
Oct 10 Javascript
简单学习vue指令directive
Nov 03 Javascript
Bootstrap Table使用心得总结
Nov 29 Javascript
jQuery表格(Table)基本操作实例分析
Mar 10 Javascript
BootStrap 表单控件之单选按钮水平排列
May 23 Javascript
详解vue2.0+vue-video-player实现hls播放全过程
Mar 02 Javascript
Babel 入门教程学习笔记
Jun 13 Javascript
Vue实现页面添加水印功能
Nov 09 Javascript
一小时迅速入门Mybatis之bind与多数据源支持 Java API
Sep 15 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 项目的方法
2007/01/02 PHP
PHP中把对象转换为关联数组代码分享
2015/04/09 PHP
YII使用url组件美化管理的方法
2015/12/28 PHP
PHP读取Excel类文件
2017/05/15 PHP
PhpStorm 如何优雅的调试Hyperf的方法步骤
2019/11/24 PHP
Javascript日期对象的dateAdd与dateDiff方法
2008/11/18 Javascript
HTML5附件拖拽上传drop &amp; google.gears实现代码
2011/04/28 Javascript
js购物车实现思路及代码(个人感觉不错)
2013/12/23 Javascript
JavaScript极简入门教程(一):基础篇
2014/10/25 Javascript
js图片卷帘门导航菜单特效代码分享
2015/09/10 Javascript
通过Tabs方法基于easyUI+bootstrap制作工作站
2016/03/28 Javascript
JavaScript实现设计模式中的单例模式的一些技巧总结
2016/05/17 Javascript
一个超简单的jQuery回调函数例子(分享)
2016/08/08 Javascript
Vue.js 递归组件实现树形菜单(实例分享)
2016/12/21 Javascript
微信小程序 解析网页内容详解及实例
2017/02/22 Javascript
MUI 上拉刷新/下拉加载功能实例代码
2017/04/13 Javascript
JavaScript创建对象_动力节点Java学院整理
2017/06/27 Javascript
vue 子组件向父组件传值方法
2018/02/26 Javascript
[01:52]DOTA2完美大师赛Vega战队趣味视频——kpii老师小课堂
2017/11/25 DOTA
[59:36]2018DOTA2亚洲邀请赛 4.3 突围赛 Secret vs VG 第二场
2018/04/04 DOTA
python实现可下载音乐的音乐播放器
2020/02/25 Python
Python常用数据分析模块原理解析
2020/07/20 Python
Python 解析库json及jsonpath pickle的实现
2020/08/17 Python
10款最佳Python开发工具推荐,每一款都是神器
2020/10/15 Python
SmartBuyGlasses丹麦:网上购买名牌太阳镜、眼镜和隐形眼镜
2016/10/01 全球购物
美国隐形眼镜零售商:LensPure
2019/03/10 全球购物
计算机专业个人简短的自我评价
2013/10/23 职场文书
公务员职业生涯规划书范文  
2014/01/19 职场文书
个人查摆剖析材料
2014/02/04 职场文书
酒店仓管员岗位职责
2014/04/28 职场文书
微笑面对生活演讲稿
2014/05/13 职场文书
教师先进事迹材料
2014/12/16 职场文书
雷峰塔导游词
2015/02/09 职场文书
实习推荐信格式模板
2015/03/27 职场文书
汉字听写大会观后感
2015/06/12 职场文书
2015质检员个人年终工作总结
2015/10/23 职场文书