JS实现简单网页倒计时器

制作一个简单的网页倒计时器(js原生代码),供大家参考,具体内容如下

实现一个简单的网页倒计时(距离xx年x月x日还剩多少时间),效果是这样的

首先HTML代码部分,我们需要简单编写一个html代码,用来接收倒计时时间显示。

<div id="box"></div>

接下来就是JS代码部分。

首先要知道当前的时间,然后还需要指定一个到期时间,拿到当前时间和指定时间的时间差

function antitime() {
    var now = new Date(); //获取当前时间
    var to = new Date(2032, 1, 1, 0, 0, 0); //指定到期时间
    // 然后拿到当前时间和指定时间的时间差,注意 是毫秒数
    var deltaTime = (to - now) / 1000; //到期时间和当前时间相差的毫秒数/1000换算出总的秒数,方便后边用
    // console.log(deltaTime)

判断 如果时间超了,停止倒计时

if (deltaTime <= 0) {
// 停止计时器
 window.clearInterval(antitime);
}

已知总的秒数,计算天数时分秒
这里用到了取整数的方法,用到哪在哪除,并给其定义赋值,方便后面取用,用parseInt()取整或者Math.floor()取整,在这里用的是Math.floor()。

// 计算天数并给其赋值
   var d = Math.floor(deltaTime / 3600 / 24),
    // 计算小时并给其赋值
     h = Math.floor(deltaTime / 3600 % 24),
   // 计算分钟并给其赋值
     m = Math.floor(deltaTime / 60 % 60),
   // 计算秒数并给其赋值
    s = Math.floor(deltaTime % 60);

实际上就是时间换算的基本运算,这里看懂了也就简单多了,只需要封装好函数就可以了。

为了增加用户体验,把时间的数字转成字符串,如果分秒毫秒不足10,则前面补0。
这里应该有更好的方法进行封装,为了更好理解,这样写出来。

if (d < 10) {
                d = '0' + d;
            } else if (h < 10) {
                h = '0' + h;
            } else if (m < 10) {
                m = '0' + m;
            } else if (s < 10) {
                s = '0' + s;
            }

接下来就是需要定义一个空的字符串用来接收最后字符串拼接的值。

var timer01 = '';
  timer01 = '距离2032年1月1日还有' + d + '天' + h + '小时' + m + '分' + s + '秒';
    document.getElementById('box');
    box.innerHTML = timer01;

document.getElementById() 获取DOM元素节点,方便向节点填入数据并显示。
box.innerHTML = timer01 让id拥有box属性的元素节点在页面显示timer01中的内容。

最后, 开启定时器,并让其1000毫秒更新一次

setInterval(antitime, 1000);

总体JS部分代码加上注释给大家放这里了

<script>
        //    指定计时器到期时间,首先先封装函数antitime()
        function antitime() {
            var now = new Date(); //获取当前时间
            var to = new Date(2032, 1, 1, 0, 0, 0); //指定到期时间
            // 然后拿到当前时间和指定时间的时间差,注意 是毫秒数
            var deltaTime = (to - now) / 1000; //到期时间和当前时间相差的毫秒数/1000换算出总的秒数,方便后边用
            // console.log(deltaTime)
            // 判断 如果时间超了,停止倒计时
            if (deltaTime <= 0) {
                // 停止计时器
                window.clearInterval(antitime);
            }
            // 已知毫秒数,计算天数时分秒
            // 这里用到了取整数的方法,用到哪在哪除,并给其定义赋值,方便后面取用,
            // 用parseInt()取整或者Math.floor()取整,在这里用的是Math.floor()。
            // 计算天数并给其赋值
            var d = Math.floor(deltaTime / 3600 / 24),
                // 计算小时并给其赋值
                h = Math.floor(deltaTime / 3600 % 24),
                // 计算分钟并给其赋值
                m = Math.floor(deltaTime / 60 % 60),
                // 计算秒数并给其赋值
                s = Math.floor(deltaTime % 60);

            //为了增加用户体验,把时间的数字转成字符串,如果分秒毫秒不足10,则前面补0。
            // 这里应该有更好的方法进行封装,为了更好理解,这样写出来。
            if (d < 10) {
                d = '0' + d;
            } else if (h < 10) {
                h = '0' + h;
            } else if (m < 10) {
                m = '0' + m;
            } else if (s < 10) {
                s = '0' + s;
            }
            // 定义一个空的字符串用来接收最后的值
            var timer01 = '';
            timer01 = '距离2032年1月1日还有' + d + '天' + h + '小时' + m + '分' + s + '秒';
            // document.getElementById() 获取DOM元素节点,方便向节点填入数据并显示
            document.getElementById('box');
            // 让id拥有box属性的元素节点在页面显示timer01中的内容
            box.innerHTML = timer01;
        }
        // 开启定时器,并让其1000毫秒更新一次
        setInterval(antitime, 1000);
</script>

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

(0)

相关推荐

  • js定时器实现倒计时效果

    本文实例为大家分享了js定时器实现倒计时效果展示的具体代码,供大家参考,具体内容如下 日期函数 倒计时 =  用 将来的时间  -   现在的时间 问题:将来时间 距离 1970 毫秒数   -     现在距离 1970年1 用将来的毫秒数 -  现在的毫秒数   不断转换就可以了 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <t

  • VB倒计时器和JS当前时间

    VBscript做计时器,遇到一个问题,怎么在页面上不断的调用一个VB函数呢.... 例如倒计时,如何让秒数在不刷新的情况下走动... 想了好久,查了好多地方都是用JavaScript做的... 最后才发现了一个,是VBscript帮助上都没有说的..SetTimeOut属性..真晕哦.. 倒计时如下. 倒计时 sec=2 min=1 hou=0 SetTimeOut "SpareTime()",1000 sub SpareTime() if sec=0 and min=0 and h

  • javascript同步服务器时间和同步倒计时小技巧

    之前在网上看到有人提问,如何在页面上同步显示服务器的时间,其实实现方法有几种,可能 一般人立马就想到可以使用Ajax每隔一秒去请求服务器,然后将服务器获取到时间显示在页面上,这样虽然能够实现,但存在一个很大的问题,那就是每隔一秒 去请求服务器,这样如果用户多了,服务器就会崩溃(内存占用率会很大),所以在我看来,这种方法不可行,我这里给出一种解决方案,能够实现同步服务器时间.同步倒计时,却不占用服务器太多资源,下面我给写实现的思路: 第一步,当用户第一次浏览页面时,服务器首先获取当前时间并显示在页

  • JS基于面向对象实现的多个倒计时器功能示例

    本文实例讲述了JS基于面向对象实现的多个倒计时器功能.分享给大家供大家参考,具体如下: 运行效果图如下: 实现代码如下: 代码 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> &l

  • js实现浏览器倒计时跳转页面效果

    本文实例为大家分享了js浏览器倒计时跳转页面效果,供大家参考,具体内容如下 效果图: <!DOCTYPE html> <html> <head> <title>浏览器对象</title> <meta http-equiv="Content-Type" content="text/html; charset=gb123"/> </head> <body> <H4>

  • 用JS写了一个30分钟倒计时器的实现示例

    前端页面倒计时功能在很多场景中会用到,如很多秒杀活动等,本文主要介绍了用JS写了一个30分钟倒计时器的实现示例,感兴趣的可以了解一下 <!DOCTYPE HTML> <html>     <head>         <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>         <title>Countdown Tim

  • JavaScript分秒倒计时器实现方法

    本文实例讲述了JavaScript分秒倒计时器实现方法.分享给大家供大家参考.具体分析如下: 一.基本目标 在JavaScript设计一个分秒倒计时器,一旦时间完成使按钮变成不可点击状态 具体效果如下图,为了说明问题,调成每50毫秒也就是每0.05跳一次表, 真正使用的时候,把window.onload=function(){...}中的setInterval("clock.move()",50);从50调成1000即可. 在时间用完之前,按钮还是可以点击的. 时间用完之后,按钮就不能

  • js实现倒计时器自定义时间和暂停

    js倒计时器可自定义时间和暂停,效果如下,点击start 开始计时,end结束计时 分别复制 H5 css js 代码即可实现,具体的算法在js控制函数中(都写了注释) css html,body{ width:100%;height:100%; } .content{ height:100%;width:100%; } .row-center{ display:flex;flex-direction:row;justify-content:center; align-items:center;

  • JavaScript定时器设置、使用与倒计时案例详解

    本文实例讲述了JavaScript定时器设置.使用与倒计时案例.分享给大家供大家参考,具体如下: 1.设置定时器 定时器,适用于定时执行的任务中.在BOM的window对象中,有这样的两个函数是用于设置定时器 setTimeout(function,delay);//设置延时多少毫秒执行该函数,只执行一次,返回值是一个id setInterval(function,delay);//设置间隔多少毫米一直执行该函数,执行多次,返回值是一个id 两者的区别就在于setTimeout方式只执行一次,而

  • js 倒计时(高效率服务器时间同步)

    方案1:每次倒计时去服务端请求时间 //开启定时器 var timer = setInterval(function () { //执行请求,获取当前服务端时间并进行相应操作 }, 1000); 这个方案对于稍微有点经验的开发人员来说,都知道是不可取的.因为这会给服务器造成无法想象的压力,导致应用崩溃.在这个页面停留一分钟,那么请求就发送了60次,假如此时有100个人在访问这个页面,那么一分钟就有6000条请求,人数如果再增长,这绝对会造成不必要的服务器压力.并且这个方案的倒计时,也会存在很大的

随机推荐