JavaScript页面倒计时功能完整示例


Posted in Javascript onMay 15, 2019

本文实例讲述了JavaScript页面倒计时功能。分享给大家供大家参考,具体如下:

效果图:

JavaScript页面倒计时功能完整示例

源码:

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title>3water.com JS倒计时</title>
  <style>
    h3{text-align:center;line-height:50px;height:50px;margin-top:100px;}
    #timer{text-align:center;}
  </style>
</head>
<body>
<h3>倒计时</h3>
<p id="timer">00:00:00</p>
<script>
  var timeObj=document.getElementById("timer");
//  var startTime=new Date();
//  startTime=startTime.getTime();
//  var endTime="2017-4-20 19:30:00";
//  endTime=new Date(endTime.replace(/-/g,'/')).getTime();
//  var diffTime = endTime-startTime;
  var diffTime=400000;
  //-----------------------------------倒计时start--------------------------------
  function timeBack(){
    var timer = setInterval(function(){
      if(diffTime>=1000){
        diffTime -= 1000;
        timeObj.innerHTML = formatDate(diffTime);
      }
    },1000)
  }
  timeBack();
  function formatDate(maxtime) {
    var d = Math.floor(maxtime / (1000 * 60 * 60 * 24));
    var h = Math.floor(maxtime / (1000*3600)) - (d * 24);
    var m = Math.floor(maxtime / (1000*60)) - (d * 24 *60) - (h * 60);
    var s = Math.floor(maxtime / (1000)) - (d * 24 *60*60) - (h * 60 * 60) - (m*60);
    var hour=(d*24)+h,minutes=m,seconds=s;
    if(hour>100){
      hour=99
    }
    if(hour < 10){
      hour="0"+hour;
    }
    if (m < 10 ) {
      minutes = "0"+minutes
    }if(s <10){
      seconds = "0"+seconds;
    }
    return hour+":"+minutes+":"+seconds;
  }
</script>
</body>
</html>

感兴趣的朋友还可以使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun测试上述代码运行效果。

Javascript 相关文章推荐
javascript的字符串按引用复制和传递,按值来比较介绍与应用
Dec 28 Javascript
浅谈类似于(function(){}).call()的js语句
Mar 30 Javascript
Easyui Treegrid改变默认图标的方法
Apr 29 Javascript
jQuery实现可拖拽的许愿墙效果【附demo源码下载】
Sep 14 Javascript
JS正则RegExp.test()使用注意事项(不具有重复性)
Dec 28 Javascript
深入理解Node中的buffer模块
Jun 03 Javascript
Bootstrap Table使用整理(三)
Jun 09 Javascript
jquery拖动改变div大小
Jul 04 jQuery
bootstrap fileinput实现文件上传功能
Aug 23 Javascript
javascript设计模式 ? 适配器模式原理与应用实例分析
Apr 13 Javascript
js中!和!!的区别与用法
May 09 Javascript
jquery实现淡入淡出轮播图效果
Dec 13 jQuery
vue组件间通信六种方式(总结篇)
May 15 #Javascript
JS正则表达式封装与使用操作示例
May 15 #Javascript
微信小程序实现授权登录
May 15 #Javascript
基于vue实现一个神奇的动态按钮效果
May 15 #Javascript
微信小程序导航栏跟随滑动效果的实现代码
May 14 #Javascript
详解VSCode配置启动Vue项目
May 14 #Javascript
微信小程序下拉菜单效果的实例代码
May 14 #Javascript
You might like
php 缓存函数代码
2008/08/27 PHP
彻底杜绝PHP的session cookie错误
2009/08/09 PHP
php中操作memcached缓存进行增删改查数据的实现代码
2014/08/15 PHP
CI框架中数据库操作函数$this-&gt;db-&gt;where()相关用法总结
2016/05/17 PHP
php使用ftp远程上传文件类(完美解决主从文件同步问题的方法)
2016/09/23 PHP
php实现文件管理与基础功能操作
2017/03/21 PHP
php生成条形码的图片的实例详解
2017/09/13 PHP
Laravel 5.5官方推荐的Nginx配置学习教程
2017/10/06 PHP
PHP设计模式之原型模式定义与用法详解
2018/04/03 PHP
URL编码转换,escape() encodeURI() encodeURIComponent()
2006/12/27 Javascript
基于jquery的拖动布局插件
2011/11/25 Javascript
Javascript操作URL函数修改版
2013/11/07 Javascript
AJAX跨域请求json数据的实现方法
2013/11/11 Javascript
document.addEventListener使用介绍
2014/03/07 Javascript
jQuery之Deferred对象详解
2014/09/04 Javascript
javascript获取四位数字或者字母的随机数
2015/01/09 Javascript
JavaScript实现当网页加载完成后执行指定函数的方法
2015/03/21 Javascript
Vuejs第六篇之Vuejs与form元素实例解析
2016/09/05 Javascript
Vue自定义图片懒加载指令v-lazyload详解
2020/12/31 Javascript
Angularjs中数据绑定的实例详解
2017/08/25 Javascript
[js高手之路]单例模式实现模态框的示例
2017/09/01 Javascript
JS简单实现动态添加HTML标记的方法示例
2018/04/08 Javascript
vue+webpack实现异步加载三种用法示例详解
2018/04/24 Javascript
JS浅拷贝和深拷贝原理与实现方法分析
2019/02/28 Javascript
详解ES6 Promise的生命周期和创建
2019/08/18 Javascript
使用vuex较为优雅的实现一个购物车功能的示例代码
2019/12/09 Javascript
python笔记(1) 关于我们应不应该继续学习python
2012/10/24 Python
python 基本数据类型占用内存空间大小的实例
2018/06/12 Python
Python之列表的插入&amp;替换修改方法
2018/06/28 Python
Python内置函数locals和globals对比
2020/04/28 Python
椰子猫砂:CatSpot
2018/08/27 全球购物
致共产党员倡议书
2014/04/16 职场文书
发展党员工作情况汇报
2014/10/28 职场文书
2015建军节87周年演讲稿
2015/03/19 职场文书
家长会开场白和结束语
2015/05/29 职场文书
商业计划书格式、范文
2019/03/21 职场文书