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 相关文章推荐
基于datagrid框架的查询
Apr 08 Javascript
如何让页面加载完成后执行js
Jun 26 Javascript
JavaScript cookie的设置获取删除详解
Feb 11 Javascript
jQuery简单实现网页选项卡特效
Nov 24 Javascript
简述AngularJS的控制器的使用
Jun 16 Javascript
微信小程序 视图容器组件的详解及实例代码
Jan 19 Javascript
jquery实现弹窗功能(窗口居中显示)
Feb 27 Javascript
webpack+vue2构建vue项目骨架的方法
Jan 09 Javascript
element ui 对话框el-dialog关闭事件详解
Feb 26 Javascript
React Native 混合开发多入口加载方式详解
Sep 23 Javascript
Node Mongoose用法详解【Mongoose使用、Schema、对象、model文档等】
May 13 Javascript
vue 解决mintui弹窗弹起来,底部页面滚动bug问题
Nov 12 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
全国FM电台频率大全 - 20 广西省
2020/03/11 无线电
Win9x/ME下Apache+PHP安装配置
2006/10/09 PHP
php获取某个目录大小的代码
2008/09/10 PHP
php获取根域名方法汇总
2014/10/28 PHP
网页里控制图片大小的相关代码
2006/06/13 Javascript
Using the TextRange Object
2006/10/14 Javascript
JQuery jsonp 使用示例代码
2009/08/12 Javascript
一个简单的js动画效果代码
2010/07/20 Javascript
使用jquery与图片美化checkbox和radio控件的代码(打包下载)
2010/11/11 Javascript
JavaScript.The.Good.Parts阅读笔记(一)假值与===运算符
2010/11/16 Javascript
一些常用的JavaScript函数(json)附详细说明
2011/05/25 Javascript
ASP.NET jQuery 实例11 通过使用jQuery validation插件简单实现用户登录页面验证功能
2012/02/03 Javascript
图片上传判断及预览脚本的效果实例
2013/08/07 Javascript
JavaScript onkeydown事件入门实例(键盘某个按键被按下)
2014/10/17 Javascript
8个超实用的jQuery功能代码分享
2015/01/08 Javascript
如何利用AngularJS打造一款简单Web应用
2015/12/05 Javascript
jQuery图片拖动组件Dropzone用法示例
2017/01/17 Javascript
vue-router路由简单案例介绍
2017/02/21 Javascript
vue组件通信传值操作示例
2019/01/08 Javascript
移动端吸顶fixbar的解决方案详解
2019/07/17 Javascript
Vue解决移动端弹窗滚动穿透问题
2020/12/15 Vue.js
Python subprocess模块功能与常见用法实例详解
2018/06/28 Python
详解python持久化文件读写
2019/04/06 Python
基于python生成英文版词云图代码实例
2020/05/16 Python
python中doctest库实例用法
2020/12/31 Python
浅析python字符串前加r、f、u、l 的区别
2021/01/24 Python
百思买美国官网:Best Buy
2016/07/28 全球购物
服装店营销方案
2014/03/10 职场文书
推广普通话标语
2014/06/27 职场文书
运动会铅球比赛加油稿
2014/09/26 职场文书
2014感恩节演讲稿大全
2014/10/11 职场文书
青涩记忆观后感
2015/06/18 职场文书
2015年教师节新闻稿
2015/07/17 职场文书
高中物理教学反思
2016/02/19 职场文书
离婚协议书范本(2016最新版)
2016/03/18 职场文书
Win11怎么添加用户?Win11添加用户账户的方法
2022/07/15 数码科技