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 相关文章推荐
Jquery异步请求数据实例代码
Dec 28 Javascript
javascript的日期对象、数组对象、二维数组使用说明
Dec 22 Javascript
js对象的复制继承实例
Jan 10 Javascript
JavaScript学习笔记之数组的增、删、改、查
Mar 23 Javascript
Vuex之理解Mutations的用法实例
Apr 19 Javascript
Vue中建立全局引用或者全局命令的方法
Aug 21 Javascript
JavaScript实现二叉树的先序、中序及后序遍历方法详解
Oct 26 Javascript
Django与Vue语法的冲突问题完美解决方法
Dec 14 Javascript
jquery在启动页面时,自动加载数据的实例
Jan 22 jQuery
Node4-5静态资源服务器实战以及优化压缩文件实例内容
Aug 29 Javascript
JS中比较两个Object数组是否相等方法实例
Nov 11 Javascript
Vue v-model组件封装(类似弹窗组件)
Jan 08 Javascript
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生成静态页的实现方法
2013/05/10 PHP
在WordPress的后台中添加顶级菜单和子菜单的函数详解
2016/01/11 PHP
PHP两种实现无级递归分类的方法
2017/03/02 PHP
浅析PHP7的多进程及实例源码
2019/04/14 PHP
jquery tools之tabs 选项卡/页签
2009/07/25 Javascript
基于jquery的返回顶部效果(兼容IE6)
2011/01/17 Javascript
防止按钮在短时间内被多次点击的方法
2014/03/10 Javascript
js与jquery回车提交的方法
2015/02/03 Javascript
基于SpringMVC+Bootstrap+DataTables实现表格服务端分页、模糊查询
2016/10/30 Javascript
Radio 单选JS动态添加的选项onchange事件无效的解决方法
2016/12/12 Javascript
详解jQuery简单的表单应用
2016/12/16 Javascript
微信小程序 chooseImage选择图片或者拍照
2017/04/07 Javascript
jQuery+CSS实现的table表格行列转置功能示例
2018/01/08 jQuery
webpack 静态资源集中输出的方法示例
2018/11/09 Javascript
Vue.js 图标选择组件实践详解
2018/12/03 Javascript
jQuery实现checkbox全选、反选及删除等操作的方法详解
2019/08/02 jQuery
解决Vue-Router升级导致的Uncaught (in promise)问题
2020/08/07 Javascript
python远程登录代码
2008/04/29 Python
Python3使用requests包抓取并保存网页源码的方法
2016/03/15 Python
Python多进程分块读取超大文件的方法
2016/04/13 Python
Python发送http请求解析返回json的实例
2018/03/26 Python
深入解析Python小白学习【操作列表】
2019/03/23 Python
PyCharm2019.3永久激活破解详细图文教程,亲测可用(不定期更新)
2020/10/29 Python
HTML5 画布canvas使用方法
2016/03/18 HTML / CSS
Html5定位终极解决方案
2020/02/05 HTML / CSS
前端水印的简单实现代码示例
2020/12/02 HTML / CSS
草莓网化妆品加拿大网站:Strawberrynet Canada
2016/09/20 全球购物
基督教卡片、励志礼品、家居装饰等:DaySpring
2018/10/12 全球购物
干部作风建设个人剖析材料
2014/10/11 职场文书
英语复习计划
2015/01/19 职场文书
2015年评职称工作总结范文
2015/04/20 职场文书
论文致谢词范文
2015/05/14 职场文书
详细谈谈MYSQL中的COLLATE是什么
2021/06/11 MySQL
使用feign服务调用添加Header参数
2021/06/23 Java/Android
基于python定位棋子位置及识别棋子颜色
2021/07/26 Python
SpringCloud之@FeignClient()注解的使用方式
2021/09/25 Java/Android