JS实现简单网页倒计时器

 更新时间:2022年08月09日 11:30:01   作者:小杨不香菜  
这篇文章主要为大家详细介绍了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>

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

相关文章

  • TypeScript中的接口Interface详解(对象类型的强大工具)

    TypeScript中的接口Interface详解(对象类型的强大工具)

    TypeScript中的接口是一个强大而灵活的特性,它为我们提供了一种清晰、简洁的方式来定义对象的结构和类型,通过使用接口,我们可以编写更加健壮、可维护的代码,这篇文章主要介绍了TypeScript中的接口(Interface):对象类型的强大工具,需要的朋友可以参考下
    2024-08-08
  • JS中toFixed()方法四舍五入的精度问题详解

    JS中toFixed()方法四舍五入的精度问题详解

    最近在做项目的时候,遇到了有四舍五入保留两位的需求,当时不假思索的直接使用了js原生的toFixed方法,结果出现了问题,这篇文章主要给大家介绍了关于JS中toFixed()方法四舍五入精度问题的相关资料,需要的朋友可以参考下
    2021-10-10
  • 全面解析JavaScript Module模式

    全面解析JavaScript Module模式

    这篇文章主要介绍了JavaScript Module模式的相关资料,文中讲解非常细致,代码帮助大家更好的理解和学习,感兴趣的朋友可以了解下
    2020-07-07
  • node.js+express+mySQL+ejs+bootstrop实现网站登录注册功能

    node.js+express+mySQL+ejs+bootstrop实现网站登录注册功能

    这篇文章主要介绍了node.js+express+mySQL+ejs+bootstrop实现网站登录注册功能,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2018-01-01
  • JavaScript数组操作函数汇总

    JavaScript数组操作函数汇总

    这篇文章主要针对JavaScript数组操作函数push,pop,join,shift,unshift,slice,splice,concat进行总结,感兴趣的小伙伴们可以参考一下
    2016-08-08
  • Bootstrap笔记之缩略图、警告框实例详解

    Bootstrap笔记之缩略图、警告框实例详解

    本文通过实例给大家详解介绍了Bootstrap笔记之缩略图、警告框知识,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2017-03-03
  • 详解基于DllPlugin和DllReferencePlugin的webpack构建优化

    详解基于DllPlugin和DllReferencePlugin的webpack构建优化

    这篇文章主要介绍了详解基于DllPlugin和DllReferencePlugin的webpack构建优化,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-06-06
  • 一文带你搞懂JavaScript中的原型和原型链

    一文带你搞懂JavaScript中的原型和原型链

    JavaScript是基于原型继承的语言,每个对象都有一个原型(prototype),本文则是重点对prototype相关知识点做拆解和梳理,感兴趣的可以了解下
    2023-08-08
  • 微信小程序以ssm做后台开发的实现示例

    微信小程序以ssm做后台开发的实现示例

    这篇文章主要介绍了微信小程序以ssm做后台开发的实现示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-04-04
  • js 页面关闭前的出现提示的实现代码

    js 页面关闭前的出现提示的实现代码

    主流的浏览器都支持onbeforeunload事件(即页面卸载前触发的事件),而现在大多网站都用到了此功能
    2011-05-05

最新评论