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中剪贴板兼容性、判断复制成功或失败
Mar 09 Javascript
JQUERY THICKBOX弹出层插件
Aug 30 Javascript
jquery重新播放css动画所遇问题解决
Aug 21 Javascript
jQuery 复合选择器应用的几个例子
Sep 11 Javascript
z-blog SyntaxHighlighter 长代码无法换行解决办法(jquery)
Nov 16 Javascript
41个Web开发者必须收藏的JavaScript实用技巧
Jul 22 Javascript
javascript实现用户点击数量统计
Dec 25 Javascript
vue2.0在没有dev-server.js下的本地数据配置方法
Feb 23 Javascript
Vue3 源码导读(推荐)
Oct 14 Javascript
微信小程序学习总结(三)条件、模板、文件引用实例分析
Jun 04 Javascript
antd Form组件方法getFieldsValue获取自定义组件的值操作
Oct 29 Javascript
让Vue响应Map或Set的变化操作
Nov 11 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 array_intersect()函数使用代码
2009/01/14 PHP
分享一则PHP定义函数代码
2015/02/26 PHP
php UNIX时间戳用法详解
2017/02/16 PHP
PHP实现批量重命名某个文件夹下所有文件的方法
2017/09/04 PHP
PHP实现数据库统计时间戳按天分组输出数据的方法
2017/10/10 PHP
laravel 5.3 单用户登录简单实现方法
2019/10/14 PHP
JavaScript面向对象之静态与非静态类
2010/02/03 Javascript
jQuery UI 应用不同Theme的办法
2010/09/12 Javascript
js+div实现图片滚动效果代码
2014/02/10 Javascript
浅析JQuery中的html(),text(),val()区别
2014/09/01 Javascript
上传文件返回的json数据会被提示下载问题解决方案
2014/12/03 Javascript
Jquery中的$.each获取各种返回类型数据的使用方法
2015/05/03 Javascript
javascript中$(function() {});写与不写有哪些区别
2015/08/10 Javascript
谈谈基于iframe、FormData、FileReader三种无刷新上传文件的方法
2015/12/03 Javascript
Ionic实现仿通讯录点击滑动及$ionicscrolldelegate使用分析
2016/01/18 Javascript
AngularJS 2.0新特性有哪些
2016/02/18 Javascript
jQuery悬停文字提示框插件jquery.tooltipster.js用法示例【附demo源码下载】
2016/07/19 Javascript
深入理解Javascript箭头函数中的this
2017/02/13 Javascript
JavaScript中创建对象的7种模式详解
2017/02/21 Javascript
微信小程序 图片宽度自适应的实现
2017/04/06 Javascript
基于 Vue 的 Electron 项目搭建过程图文详解
2020/07/22 Javascript
js实现验证码功能
2020/07/24 Javascript
Python利用递归和walk()遍历目录文件的方法示例
2017/07/14 Python
Python代码块批量添加Tab缩进的方法
2018/06/25 Python
python pygame模块编写飞机大战
2018/11/20 Python
将python2.7添加进64位系统的注册表方式
2019/11/20 Python
解决python 找不到module的问题
2020/02/12 Python
浅谈Python 参数与变量
2020/06/20 Python
Python猫眼电影最近上映的电影票房信息
2020/09/18 Python
凯撒娱乐:Caesars Entertainment
2018/02/23 全球购物
Charles & Keith欧盟:新加坡时尚品牌
2019/08/01 全球购物
师范应届生求职信
2013/11/15 职场文书
八一演出活动方案
2014/02/03 职场文书
药剂专业求职信
2014/06/20 职场文书
《雷雨》教学反思
2016/02/20 职场文书
vue3种table表格选项个数的控制方法
2022/04/14 Vue.js