原生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 相关文章推荐
刷新时清空文本框内容的js代码
Apr 23 Javascript
JavaScript 脚本将当地时间转换成其它时区
Mar 19 Javascript
利用JS自动打开页面上链接的实现代码
Sep 25 Javascript
jQuery插件实现带圆点的焦点图片轮播切换
Jan 18 Javascript
如何解决jQuery EasyUI 已打开Tab重新加载问题
Dec 19 Javascript
详解用node-images 打造简易图片服务器
May 08 Javascript
JavaScript实现的原生态Tab标签页功能【兼容IE6】
Sep 18 Javascript
dropload.js插件下拉刷新和上拉加载使用详解
Oct 20 Javascript
Vue异步加载about组件
Oct 31 Javascript
利用ES6实现单例模式及其应用详解
Dec 09 Javascript
React如何避免重渲染
Apr 10 Javascript
微信小程序之下拉列表实现方法解析(附完整源码)
Aug 23 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
ThinkPHP3.1数据CURD操作快速入门
2014/06/19 PHP
javascript getElementsByTagName
2011/01/31 Javascript
使用jquery读取html5 localstorage的值的方法
2013/01/04 Javascript
浅析JavaScript原型继承的陷阱
2013/12/03 Javascript
JavaScript使用addEventListener添加事件监听用法实例
2015/06/01 Javascript
跟我学习javascript的浮点数精度
2015/11/16 Javascript
angularjs自定义ng-model标签的属性
2016/01/21 Javascript
jQuery AjaxUpload 上传图片代码
2016/02/02 Javascript
JS控制HTML元素的显示和隐藏的两种方法
2016/09/27 Javascript
js实现上传文件添加和删除文件选择框
2016/10/24 Javascript
JS组件系列之MVVM组件 vue 30分钟搞定前端增删改查
2017/04/28 Javascript
js学使用setTimeout实现轮循动画
2017/07/17 Javascript
Vue父子模版传值及组件传值的三种方法
2017/11/27 Javascript
JS实现碰撞检测的方法分析
2018/01/19 Javascript
React Native使用fetch实现图片上传的示例代码
2018/03/07 Javascript
JS基于开关思想实现的数组去重功能【案例】
2019/02/18 Javascript
微信小程序自定义yPicker组件实现省市区三级联动功能
2020/10/29 Javascript
Android模拟器无法启动,报错:Cannot set up guest memory ‘android_arm’ Invalid argument的解决方法
2016/07/01 Python
Python中scatter函数参数及用法详解
2017/11/08 Python
Python给你的头像加上圣诞帽
2018/01/04 Python
Python利用正则表达式实现计算器算法思路解析
2018/04/25 Python
python 解决动态的定义变量名,并给其赋值的方法(大数据处理)
2018/11/10 Python
django 实现手动存储文件到model的FileField
2020/03/30 Python
详解python 支持向量机(SVM)算法
2020/09/18 Python
英国的屈臣氏:Boots博姿
2017/12/23 全球购物
澳大利亚儿童精品仓库:Goo & Co.
2019/06/20 全球购物
请用用Java代码写一个堆栈
2012/01/26 面试题
区域总监的岗位职责
2013/11/21 职场文书
测绘专业大学生职业生涯规划书
2014/02/10 职场文书
班组长岗位职责
2014/03/03 职场文书
个人银行贷款担保书
2014/04/01 职场文书
司法助理专业自荐书
2014/06/13 职场文书
教学改革问题查摆整改措施
2014/09/27 职场文书
开展批评与自我批评发言稿
2014/10/16 职场文书
李清照的诗词赏析(20首)
2019/08/22 职场文书
导游词之贵州百里杜鹃
2019/10/29 职场文书