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 简短右键菜单 多浏览器兼容
Jan 01 Javascript
基于jquery的图片懒加载js
Jun 30 Javascript
jquery封装的对话框简单实现
Jul 21 Javascript
JS集成fckeditor及判断内容是否为空的方法
May 27 Javascript
使用JQuery选择HTML遍历函数的方法
Sep 17 Javascript
AngularJS 获取ng-repeat动态生成的ng-model值实例详解
Nov 29 Javascript
BootStrap 图标icon符号图标glyphicons不正常显示的快速解决办法
Dec 08 Javascript
JS实现的随机排序功能算法示例
Jun 09 Javascript
深入理解React Native原生模块与JS模块通信的几种方式
Jul 24 Javascript
Node.js 多线程完全指南总结
Mar 27 Javascript
基于vue实现一个禅道主页拖拽效果
May 27 Javascript
微信小程序实现卡片层叠滑动效果
Jun 21 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将数据库中的电话号码读取出来并生成图片
2008/08/31 PHP
php db类库进行数据库操作
2009/03/19 PHP
PHP URL参数获取方式的四种例子
2014/02/28 PHP
PHP批量检测并去除文件BOM头代码实例
2014/05/08 PHP
ThinkPHP文件上传实例教程
2014/08/22 PHP
php模拟post提交请求调用接口示例解析
2020/08/07 PHP
WordPress 插件——CoolCode使用方法与下载
2007/07/02 Javascript
几个比较经典常用的jQuery小技巧
2010/03/01 Javascript
通过JS自动隐藏手机浏览器的地址栏实现原理与代码
2013/01/02 Javascript
js实现按Ctrl+Enter发送效果
2014/09/18 Javascript
浅谈javascript中onbeforeunload与onunload事件
2015/12/10 Javascript
jQuery插件开发精品教程让你的jQuery提升一个台阶
2016/01/27 Javascript
JavaScript登录验证基础教程
2017/11/01 Javascript
[05:31]DOTA2英雄梦之声_第08期_莉娜
2014/06/23 DOTA
[18:20]DOTA2 HEROS教学视频教你分分钟做大人-昆卡
2014/06/11 DOTA
[01:23]2019完美世界全国高校联赛(春季赛)合肥全国总决赛
2019/06/10 DOTA
python通过pil为png图片填充上背景颜色的方法
2015/03/17 Python
Python装饰器基础详解
2016/03/09 Python
python类:class创建、数据方法属性及访问控制详解
2016/07/25 Python
Python实现购物车功能的方法分析
2017/11/10 Python
Python中的函数式编程:不可变的数据结构
2018/10/08 Python
python对于requests的封装方法详解
2019/01/03 Python
pyqt5 lineEdit设置密码隐藏,删除lineEdit已输入的内容等属性方法
2019/06/24 Python
Python实现最大子序和的方法示例
2019/07/05 Python
Django 模型类(models.py)的定义详解
2019/07/19 Python
关于TensorFlow新旧版本函数接口变化详解
2020/02/10 Python
Python实现封装打包自己写的代码,被python import
2020/07/12 Python
8款使用 CSS3 实现超炫的 Loading(加载)的动画效果
2015/03/17 HTML / CSS
俄罗斯最大的在线珠宝大卖场:Nebo
2019/12/08 全球购物
2014年综治宣传月活动总结
2014/04/28 职场文书
《我爱祖国》演讲稿1000字
2014/09/26 职场文书
战略性融资合作协议书范本
2014/10/17 职场文书
2014年护理部工作总结
2014/11/14 职场文书
浅谈redis五大数据结构和使用场景
2021/04/12 Redis
详解jQuery的核心函数和事件处理
2022/02/18 jQuery
Vue.Draggable实现交换位置
2022/04/07 Vue.js