原生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 相关文章推荐
javascritp实现input输入框相关限制用法
Jun 29 Javascript
JavaScript字符串对象replace方法实例(用于字符串替换或正则替换)
Oct 16 Javascript
jquery+CSS实现的水平布局多级网页菜单效果
Aug 24 Javascript
jQuery.extend 函数及用法详细
Sep 06 Javascript
js确认框confirm()用法实例详解
Jan 07 Javascript
Angular 2父子组件数据传递之@Input和@Output详解 (上)
Jul 05 Javascript
使用 vue 实现灭霸打响指英雄消失的效果附demo
May 06 Javascript
js中值引用和地址引用实例分析
Jun 21 Javascript
基于vue+axios+lrz.js微信端图片压缩上传方法
Jun 25 Javascript
如何基于filter实现网站整体变灰功能
Apr 17 Javascript
Openlayers3实现车辆轨迹回放功能
Sep 29 Javascript
vuex刷新后数据丢失的解决方法
Oct 18 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
老照片 - 几十年前的收音机与人
2021/03/02 无线电
PHP安装攻略:常见问题解答(三)
2006/10/09 PHP
php中的字符编码转换函数用法示例
2014/10/20 PHP
php提高网站效率的技巧
2015/09/29 PHP
Yii2中使用asset压缩js,css文件的方法
2016/11/24 PHP
php 生成加密公钥加密私钥实例详解
2017/06/16 PHP
js url传值中文乱码之解决之道
2009/11/20 Javascript
javascript中使用css需要注意的地方小结
2010/09/01 Javascript
线路分流自动智能跳转代码,自动选择最快镜像网站(js)
2011/10/31 Javascript
jQuery代码优化 选择符篇
2011/11/01 Javascript
jQuery :first选择器使用介绍
2013/08/09 Javascript
js判断选择时间不能小于当前时间的示例代码
2013/09/24 Javascript
倒记时60刷新网页的js代码
2014/02/18 Javascript
node.js中的fs.readdir方法使用说明
2014/12/17 Javascript
JavaScript中的原型链prototype介绍
2014/12/30 Javascript
jquery.zclip轻量级复制失效问题
2017/01/08 Javascript
解析Vue2 dist 目录下各个文件的区别
2017/11/22 Javascript
nodejs调取微信收货地址的方法
2017/12/20 NodeJs
Node实战之不同环境下配置文件使用教程
2018/01/02 Javascript
Node.js 的 GC 机制详解
2019/06/03 Javascript
浅谈layui 数据表格前后台传值的问题
2019/09/12 Javascript
python如何拆分含有多种分隔符的字符串
2018/03/20 Python
python使用flask与js进行前后台交互的例子
2019/07/19 Python
django表单的Widgets使用详解
2019/07/22 Python
Django 使用easy_thumbnails压缩上传的图片方法
2019/07/26 Python
感知器基础原理及python实现过程详解
2019/09/30 Python
python jenkins 打包构建代码的示例代码
2019/11/29 Python
python实现五子棋游戏(pygame版)
2020/01/19 Python
python修改linux中文件(文件夹)的权限属性操作
2020/03/05 Python
html5 http的轮询和Websocket原理
2018/10/19 HTML / CSS
Myprotein加拿大官网:欧洲第一的运动营养品牌
2018/01/06 全球购物
美国最大的高尔夫发球时间预订网站:TeeOff.com
2018/03/28 全球购物
Linux不知道文件后缀名怎么判断文件类型
2012/04/26 面试题
母校寄语大全
2014/04/10 职场文书
检讨书模板大全
2015/05/07 职场文书
2015最新婚礼司仪主持词
2015/06/30 职场文书