JS倒计时两种实现方式代码实例


Posted in Javascript onJuly 27, 2020

最近做浏览器界面倒计时,用js就实现,两种方式:

一:设置时长,进行倒计时。比如考试时间等等

代码如下:

<html>
<head>
<meta charset="UTF-8">
<title>简单时长倒计时</title>
<SCRIPT type="text/javascript">
      var maxtime = 60 * 60; //一个小时,按秒计算,自己调整!
      function CountDown() {
        if (maxtime >= 0) {
          minutes = Math.floor(maxtime / 60);
          seconds = Math.floor(maxtime % 60);
          msg = "距离结束还有" + minutes + "分" + seconds + "秒";
          document.all["timer"].innerHTML = msg;
          if (maxtime == 5 * 60)alert("还剩5分钟");
            --maxtime;
        } else{
          clearInterval(timer);
          alert("时间到,结束!");
        }
      }
      timer = setInterval("CountDown()", 1000);
    </SCRIPT>
</head>
<body>
<div id="timer" style="color:red"></div>
<div id="warring" style="color:red"></div>
</body>
</html>

运行结果:

JS倒计时两种实现方式代码实例

二:设置时间戳,进行倒计时。比如距离活动结束时间等等

代码如下:

<html>
<head>
  <meta charset="UTF-8">
  <title>js简单时分秒倒计时</title>
  <script type="text/javascript">
    function countTime() {
      //获取当前时间
      var date = new Date();
      var now = date.getTime();
      //设置截止时间
      var str="2017/5/17 00:00:00";
      var endDate = new Date(str);
      var end = endDate.getTime();

      //时间差
      var leftTime = end-now;
      //定义变量 d,h,m,s保存倒计时的时间
      var d,h,m,s;
      if (leftTime>=0) {
        d = Math.floor(leftTime/1000/60/60/24);
        h = Math.floor(leftTime/1000/60/60%24);
        m = Math.floor(leftTime/1000/60%60);
        s = Math.floor(leftTime/1000%60);
      }
      //将倒计时赋值到div中
      document.getElementById("_d").innerHTML = d+"天";
      document.getElementById("_h").innerHTML = h+"时";
      document.getElementById("_m").innerHTML = m+"分";
      document.getElementById("_s").innerHTML = s+"秒";
      //递归每秒调用countTime方法,显示动态时间效果
      setTimeout(countTime,1000);

    }
  </script>
</head >
<body onload="countTime()" >
  <div>
    <span id="_d">00</span>
    <span id="_h">00</span>
    <span id="_m">00</span>
    <span id="_s">00</span>
  </div>
</body>
</html>

运行结果:

JS倒计时两种实现方式代码实例

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js Flash插入函数免激活代码
Mar 31 Javascript
基于Jquery 解决Ajax请求的页面 浏览器后退前进功能,页面刷新功能实效问题
Dec 11 Javascript
DB.ASP 用Javascript写ASP很灵活很好用很easy
Jul 31 Javascript
JS鼠标拖拽实例分析
Nov 23 Javascript
AngularJS中的Directive实现延迟加载
Jan 25 Javascript
Angular 中 select指令用法详解
Sep 29 Javascript
基于Javascript倒计时效果
Dec 22 Javascript
VUE 更好的 ajax 上传处理 axios.js实现代码
May 10 Javascript
vue和webpack安装命令详解
Jun 15 Javascript
vue实现重置表单信息为空的方法
Sep 29 Javascript
关于微信公众号开发无法支付的问题解决
Dec 28 Javascript
layer弹出框确定前验证:弹出消息框的方法(弹出两个layer)
Sep 21 Javascript
解决vue页面渲染但dom没渲染的操作
Jul 27 #Javascript
解决VUE mounted 钩子函数执行时 img 未加载导致页面布局的问题
Jul 27 #Javascript
Element Breadcrumb 面包屑的使用方法
Jul 26 #Javascript
Element PageHeader页头的使用方法
Jul 26 #Javascript
Element Dropdown下拉菜单的使用方法
Jul 26 #Javascript
Vue中的this.$options.data()和this.$data用法说明
Jul 26 #Javascript
解决vue的router组件component在import时不能使用变量问题
Jul 26 #Javascript
You might like
php用正则表达式匹配URL的简单方法
2013/11/12 PHP
ThinkPHP进程计数类Process用法实例详解
2015/09/25 PHP
Mac系统下搭建Nginx+php-fpm实例讲解
2020/12/15 PHP
根据对象的某一属性进行排序的js代码(如:name,age)
2010/08/10 Javascript
javascript string字符串优化问题
2011/07/31 Javascript
深入理解JavaScript系列(2) 揭秘命名函数表达式
2012/01/15 Javascript
JS实现商品倒计时实现代码
2013/05/03 Javascript
javascript中的document.open()方法使用介绍
2013/10/09 Javascript
Angular中$compile源码分析
2016/01/28 Javascript
JS实现“隐藏与显示”功能(多种方法)
2016/11/24 Javascript
一篇文章让你彻底弄懂JS的事件冒泡和事件捕获
2017/08/14 Javascript
[js高手之路]HTML标签解释成DOM节点的实现方法
2017/08/31 Javascript
vue 文件目录结构详解
2017/11/24 Javascript
Angular实现的进度条功能示例
2018/02/18 Javascript
vue配置请求本地json数据的方法
2018/04/11 Javascript
vue 本地环境跨域请求proxyTable的方法
2018/09/19 Javascript
微信小程序实现通过双向滑动缩放图片大小的方法
2018/12/30 Javascript
原生小程序封装跑马灯效果
2020/10/21 Javascript
[10:24]郎朗助力完美“圣”典,天籁交织奏响序曲
2016/12/18 DOTA
Python中实现常量(Const)功能
2015/01/28 Python
Python基于matplotlib绘制栈式直方图的方法示例
2017/08/09 Python
完美解决python中ndarray 默认用科学计数法显示的问题
2018/07/14 Python
对python中的 os.mkdir和os.mkdirs详解
2018/10/16 Python
python实现对指定字符串补足固定长度倍数截断输出的方法
2018/11/15 Python
Django框架首页和登录页分离操作示例
2019/05/28 Python
用Pytorch训练CNN(数据集MNIST,使用GPU的方法)
2019/08/19 Python
Python实现报警信息实时发送至邮箱功能(实例代码)
2019/11/11 Python
使用phonegap操作数据库的实现方法
2017/03/31 HTML / CSS
跑步爱好者一站式服务网站:Jack Rabbit
2016/09/01 全球购物
美国最大的高尔夫发球时间预订网站:TeeOff.com
2018/03/28 全球购物
全球烹饪课程的领先预订平台:Cookly
2020/01/28 全球购物
小米官方旗舰店:Xiaomi
2020/08/07 全球购物
工厂员工辞职信范文
2015/05/12 职场文书
遇事可以测出您的见识与格局
2019/09/16 职场文书
js实现上传图片到服务器
2021/04/11 Javascript
pytorch 如何使用float64训练
2021/05/24 Python