原生JS实现简单的倒计时功能示例


Posted in Javascript onAugust 30, 2018

本文实例讲述了原生JS实现简单的倒计时功能。分享给大家供大家参考,具体如下:

1、第一种

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>3water.com JS倒计时</title>
</head>
<body>
<div id="div"></div>
<script type="text/javascript">
window.onload=clock;
function clock(){
var today=new Date(),//当前时间
    h=today.getHours(),
    m=today.getMinutes(),
    s=today.getSeconds();
  var stopTime=new Date("Feb 9 2019 00:00:00"),//结束时间
    stopH=stopTime.getHours(),
    stopM=stopTime.getMinutes(),
    stopS=stopTime.getSeconds();
  var shenyu=stopTime.getTime()-today.getTime(),//倒计时毫秒数
    shengyuD=parseInt(shenyu/(60*60*24*1000)),//转换为天
    D=parseInt(shenyu)-parseInt(shengyuD*60*60*24*1000),//除去天的毫秒数
    shengyuH=parseInt(D/(60*60*1000)),//除去天的毫秒数转换成小时
    H=D-shengyuH*60*60*1000,//除去天、小时的毫秒数
    shengyuM=parseInt(H/(60*1000)),//除去天的毫秒数转换成分钟
    M=H-shengyuM*60*1000;//除去天、小时、分的毫秒数
    S=parseInt((shenyu-shengyuD*60*60*24*1000-shengyuH*60*60*1000-shengyuM*60*1000)/1000)//除去天、小时、分的毫秒数转化为秒
    document.getElementById("div").innerHTML=(shengyuD+"天"+shengyuH+"小时"+shengyuM+"分"+S+"秒"+"<br>");
    // setTimeout("clock()",500);
    setTimeout(clock,500);
}
</script>
</body>
</html>

运行效果:

原生JS实现简单的倒计时功能示例

2、第二种

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>3water.com js倒计时</title>
  <style>
    *{
      margin: 0;
      padding:0;
    }
    p {
      font-size: 80px;
      text-align: center;
    }
    p span {
      color: red;
    }
    p span.time {
      color: black
    }
    body{padding-top:200px;}
  </style>
</head>
<body>
<p>距离2019年还有</p>
<p><span></span></p>
<script>
  var oSpan = document.getElementsByTagName('span')[0];
  function tow(n) {
    return n >= 0 && n < 10 ? '0' + n : '' + n;
  }
  function getDate() {
    var oDate = new Date();//获取日期对象
    var oldTime = oDate.getTime();//现在距离1970年的毫秒数
    var newDate = new Date('2019/1/1 00:00:00');
    var newTime = newDate.getTime();//2019年距离1970年的毫秒数
    var second = Math.floor((newTime - oldTime) / 1000);//未来时间距离现在的秒数
    var day = Math.floor(second / 86400);//整数部分代表的是天;一天有24*60*60=86400秒 ;
    second = second % 86400;//余数代表剩下的秒数;
    var hour = Math.floor(second / 3600);//整数部分代表小时;
    second %= 3600; //余数代表 剩下的秒数;
    var minute = Math.floor(second / 60);
    second %= 60;
    var str = tow(day) + '<span class="time">天</span>'
        + tow(hour) + '<span class="time">小时</span>'
        + tow(minute) + '<span class="time">分钟</span>'
        + tow(second) + '<span class="time">秒</span>';
    oSpan.innerHTML = str;
  }
  getDate();
  setInterval(getDate, 1000);
</script>
</body>
</html>

运行效果:

原生JS实现简单的倒计时功能示例

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

Javascript 相关文章推荐
jQuery中bind,live,delegate与one方法的用法及区别解析
Dec 30 Javascript
JS二维数组的定义说明
Mar 03 Javascript
javascript去除字符串左右两端的空格
Feb 05 Javascript
JavaScript数据类型判定的总结笔记
Jul 31 Javascript
JavaScript统计网站访问次数的实现代码
Nov 18 Javascript
jQuery simpleModal插件的使用介绍
Aug 30 Javascript
js获取Get值的方法
Sep 29 Javascript
jQuery设置图片等比例缩小的方法
Apr 29 jQuery
js获取元素的偏移量offset简单方法(必看)
Jul 05 Javascript
详解Angular4 路由设置相关
Aug 26 Javascript
基于 Vue 实现一个酷炫的 menu插件
Nov 14 Javascript
layui radio点击事件实现input显示和隐藏的例子
Sep 02 Javascript
JavaScript fetch接口案例解析
Aug 30 #Javascript
vue组件表单数据回显验证及提交的实例代码
Aug 30 #Javascript
原生JS实现的简单小钟表功能示例
Aug 30 #Javascript
使用Node搭建reactSSR服务端渲染架构
Aug 30 #Javascript
webpack4+Vue搭建自己的Vue-cli项目过程分享
Aug 29 #Javascript
JS实现的input选择图片本地预览功能示例
Aug 29 #Javascript
简述vue状态管理模式之vuex
Aug 29 #Javascript
You might like
PHP中使用Memache作为进程锁的操作类分享
2015/03/30 PHP
PHP中addcslashes与stripcslashes函数用法分析
2016/01/07 PHP
PHP中用Trait封装单例模式的实现
2019/12/18 PHP
JS JavaScript获取Url参数,src属性参数
2021/03/09 Javascript
Draggable Elements 元素拖拽功能实现代码
2011/03/30 Javascript
由JavaScript中call()方法引发的对面向对象继承机制call的思考
2011/09/12 Javascript
JS正则表达式获取分组内容的方法详解
2013/11/15 Javascript
通过js为元素添加多项样式,浏览器全兼容写法
2014/08/30 Javascript
Javascript 实现图片无缝滚动
2014/12/19 Javascript
jquery实现通用的内容渐显Tab选项卡效果
2015/09/07 Javascript
JavaScript中关联原型链属性特性
2016/02/13 Javascript
JS中Eval解析JSON字符串的一个小问题
2016/02/21 Javascript
JS实现回到页面顶部动画效果的简单实例
2016/05/24 Javascript
全面了解javascript三元运算符
2016/06/27 Javascript
jQuery stop()用法实例详解
2016/07/28 Javascript
JavaScript高仿支付宝倒计时页面及代码实现
2016/10/21 Javascript
浅谈js对象属性 通过点(.) 和方括号([]) 的不同之处
2016/10/29 Javascript
jQuery使用eraser.js插件实现擦除、刮刮卡效果的方法【附eraser.js下载】
2017/04/28 jQuery
vue中的event bus非父子组件通信解析
2017/10/27 Javascript
vue 运用mock数据的示例代码
2017/11/07 Javascript
jquery手机触屏滑动拼音字母城市选择器的实例代码
2017/12/11 jQuery
JavaScript执行环境及作用域链实例分析
2018/08/01 Javascript
React+Redux实现简单的待办事项列表ToDoList
2019/09/29 Javascript
js实现图片上传即时显示效果
2019/09/30 Javascript
JavaScript事件冒泡机制原理实例解析
2020/01/14 Javascript
Javascript模块化机制实现原理详解
2020/04/02 Javascript
Python实现计算文件夹下.h和.cpp文件的总行数
2015/04/23 Python
PyQt5实现简易电子词典
2019/06/25 Python
基于python的selenium两种文件上传操作实现详解
2019/09/19 Python
简单介绍一下pyinstaller打包以及安全性的实现
2020/06/02 Python
美国知名艺术画网站:Art.com
2017/02/09 全球购物
Veronica Beard官网:在酷、经典和别致之间找到了平衡
2018/01/11 全球购物
女生节标语
2014/06/26 职场文书
十佳标兵事迹材料
2014/08/18 职场文书
win10忘记pin密码登录不了怎么办?win10忘记pin密码登不进去的解决方法
2022/07/07 数码科技
react中useState使用:如何实现在当前表格直接更改数据
2022/08/05 Javascript