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 相关文章推荐
jQuery 1.0.4 - New Wave Javascript(js源文件)
Jan 15 Javascript
javascript动态向网页中添加表格实现代码
Feb 19 Javascript
Jquery仿IGoogle实现可拖动窗口示例代码
Aug 22 Javascript
JS倒计时代码汇总
Nov 25 Javascript
JS仿iGoogle自定义首页模块拖拽特效的方法
Feb 13 Javascript
关于延迟加载JavaScript
May 05 Javascript
jQuery自定义滚动条完整实例
Jan 08 Javascript
关于function类中定义变量this的简单说明
May 28 Javascript
Vux+Axios拦截器增加loading的问题及实现方法
Nov 08 Javascript
vue实现微信获取用户信息的方法
Mar 21 Javascript
layui 弹出层回调获取弹出层数据的例子
Sep 02 Javascript
vue组件库的在线主题编辑器的实现思路
Apr 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
我的论坛源代码(九)
2006/10/09 PHP
php下过滤html代码的函数 提高程序安全性
2010/03/02 PHP
PHP下对数组进行排序的函数
2010/08/08 PHP
[原创]php使用curl判断网页404(不存在)的方法
2016/06/23 PHP
PHPMailer发送邮件
2016/12/28 PHP
mongodb和php的用法详解
2019/03/25 PHP
javascript对JSON数据排序的3个例子
2014/04/12 Javascript
Angularjs 基础入门
2014/12/26 Javascript
NodeJs基本语法和类型
2015/02/13 NodeJs
javascript控制层显示或隐藏的方法
2015/07/22 Javascript
JS产生随机数的几个用法详解
2016/06/22 Javascript
JS点击缩略图整屏居中放大图片效果
2017/07/04 Javascript
关于前后端json数据的发送与接收详解
2017/07/30 Javascript
微信小程序实现顶部选项卡(swiper)
2020/06/19 Javascript
BACKBONE.JS 简单入门范例
2017/10/17 Javascript
使用nodejs实现JSON文件自动转Excel的工具(推荐)
2020/06/24 NodeJs
解决Nuxt使用axios跨域问题
2020/07/06 Javascript
原生JS实现记忆翻牌游戏
2020/07/31 Javascript
浅析JavaScript预编译和暗示全局变量
2020/09/03 Javascript
python中文分词教程之前向最大正向匹配算法详解
2017/11/02 Python
python实现自主查询实时天气
2018/06/22 Python
实例讲解Python爬取网页数据
2018/07/08 Python
对numpy中的where方法嵌套使用详解
2018/10/31 Python
python 利用浏览器 Cookie 模拟登录的用户访问知乎的方法
2019/07/11 Python
使用Python paramiko模块利用多线程实现ssh并发执行操作
2019/12/05 Python
python获取整个网页源码的方法
2020/08/03 Python
澳大利亚宠物食品和用品商店:PETstock
2020/01/02 全球购物
俄罗斯儿童和青少年服装、鞋子及配件的在线商店:Orby
2020/02/20 全球购物
介绍一下sql server的安全性
2014/08/10 面试题
业务主管岗位职责范本
2013/12/25 职场文书
优秀士兵先进事迹
2014/02/06 职场文书
咖啡厅商业计划书
2014/09/15 职场文书
2016秋季运动会前导词
2015/11/25 职场文书
《珍珠鸟》教学反思
2016/02/16 职场文书
mysq启动失败问题及场景分析
2021/07/15 MySQL
Android开发 使用文件储存的方式保存QQ密码
2022/04/24 Java/Android