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 相关文章推荐
图片自动缩小 点击放大
Jul 07 Javascript
jquery1.4 教程二 ajax方法的改进
Feb 25 Javascript
javasciprt下jquery函数$.post执行无响应的解决方法
Mar 13 Javascript
实现checkbox全选、反选、取消JavaScript小脚本异常
Apr 10 Javascript
浅谈bootstrap使用中的一些问题以及解决过程
Oct 18 Javascript
JS实现的表头列头固定页面功能示例
Jan 10 Javascript
浅谈angular.copy() 深拷贝
Sep 14 Javascript
jQuery滑动效果实现方法分析
Sep 05 jQuery
详解vue中localStorage的使用方法
Nov 22 Javascript
vue el-tree 默认展开第一个节点的实现代码
May 15 Javascript
vue Treeselect下拉树只能选择第N级元素实现代码
Aug 31 Javascript
javascript实现打砖块小游戏(附完整源码)
Sep 18 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
深入array multisort排序原理的详解
2013/06/18 PHP
详解PHP归并排序的实现
2016/10/18 PHP
thinkPHP5使用Rabc实现权限管理
2019/08/28 PHP
jWiard 基于JQuery的强大的向导控件介绍
2011/10/28 Javascript
JS的replace方法介绍
2012/10/20 Javascript
EasyUI中combobox默认值注意事项
2015/03/01 Javascript
JavaScript中的cacheStorage使用详解
2015/07/29 Javascript
JavaScript实现的MD5算法完整实例
2016/02/02 Javascript
你知道setTimeout是如何运行的吗?
2016/08/16 Javascript
微信小程序 本地图片按照屏幕尺寸处理
2017/08/04 Javascript
JS运动特效之完美运动框架实例分析
2018/01/24 Javascript
JavaScript实现学生在线做题计时器功能
2018/12/05 Javascript
vue实现新闻展示页的步骤详解
2019/04/11 Javascript
VSCode使用之Vue工程配置eslint
2019/04/30 Javascript
使用axios请求时,发送formData请求的示例
2019/10/29 Javascript
vue数据更新UI不刷新显示的解决办法
2020/08/06 Javascript
[03:39]DOTA2英雄梦之声_第05期_幽鬼
2014/06/23 DOTA
基于Python 的进程管理工具supervisor使用指南
2016/09/18 Python
浅谈Python实现2种文件复制的方法
2018/01/19 Python
使用Numpy读取CSV文件,并进行行列删除的操作方法
2018/07/04 Python
Django项目中添加ldap登陆认证功能的实现
2019/04/04 Python
Python 利用邮件系统完成远程控制电脑的实现(关机、重启等)
2019/11/19 Python
Python编写一个验证码图片数据标注GUI程序附源码
2019/12/09 Python
浅谈pytorch、cuda、python的版本对齐问题
2020/01/15 Python
Python实现多线程下载脚本的示例代码
2020/04/03 Python
python连接mongodb数据库操作数据示例
2020/11/30 Python
用纯css3实现的图片放大镜特效效果非常不错
2014/09/02 HTML / CSS
德国团购网站:Groupon德国
2018/03/13 全球购物
精灵市场:Pixie Market
2019/06/18 全球购物
初二政治教学反思
2014/01/12 职场文书
一份创业计划书范文
2014/02/08 职场文书
面试自我评价范文
2014/09/17 职场文书
材料员岗位职责范本
2015/04/11 职场文书
2015年保险业务员工作总结
2015/05/27 职场文书
2016年寒假家长评语
2015/10/10 职场文书
如何利用python实现列表嵌套字典取值
2022/06/10 Python