倒计时跳转和获取实时时间

简介: 本文内容如题,自己做的一个demo,倒计时和获取实时时间在许多场景都用的到,所以还算蛮实用的,需要的朋友可以做个参考。代码解析:html代码 <body onload="startTime()"><div class="box"> <div class="time">请等待<span id="dd">6</span>秒</div> <!--设置时间长一点,不然一直跳转很烦--> ![](aaa.png) <div class="id-box"> <div id="time"></div>

image.png写在前面:本文内容如题,自己做的一个demo,倒计时和获取实时时间在许多场景都用的到,所以还算蛮实用的,需要的朋友可以做个参考。

微信截图_20220621152629.png

效果图:

image.png

页面效果


代码解析:


html代码

<body onload="startTime()">
<div class="box">
    <div class="time">请等待<span id="dd">6</span>秒</div>
    <!--设置时间长一点,不然一直跳转很烦-->
    ![](aaa.png)
    <div class="id-box">
        <div id="time"></div>
        <div id="date"></div>
    </div>
    <p>更多·更全·更好用</p>
</body>


js倒计时代码


function run(){
            var s = document.getElementById("dd");//获取dom,并获得数字
            if(s.innerHTML == 1){// 当dom==0的时候,跳转链接并且暂停函数
                window.location.href = "https://www.baidu.com/index.php?tn=98012088_3_dg&ch=1";
                clearInterval(run());//暂停setInterval调用的run()函数
            }
            s.innerHTML = s.innerHTML -1;//跑一秒减一个数字
        }
        window.setInterval("run();", 1000);//调用时间函数, 一秒跑一次


上面基本上每一行都有注释,所以我就为不知道的朋友写点定义和自己的理解,知道的朋友也可以加深点印象。


innerHTML定义和用法:

innerHTML 属性设置或返回表格行的开始和结束标签之间的 HTML。


作用意思就是删除原来的样式,插入html的文字之类的

(w3c解释:www.w3school.com.cn/jsref/prop_…)

setInterval定义和用法

setInterval() 方法可按照指定的周期(以毫秒计)来调用函数或计算表达式。

setInterval() 方法会不停地调用函数,直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。

(w3c解释:www.jb51.net/shouce/html…)


clearInterval定义和用法

clearInterval() 方法可取消由 setInterval() 设置的 timeout。(就是暂停的意思,这里是到了一秒就暂停住了,不再往下数了。)

clearInterval() 方法的参数必须是由 setInterval() 返回的 ID 值。(这里的ID值是run()相当于获取这个dom。)

(w3c解释:                 www.w3school.com.cn/jsref/met_w…)


ps:还有不懂的可以把我的demo复制到本地,自己演示一下。


html代码在上面。

获取实时时间js代码:


function checkTime(i){
            if (i<10){
                i = "0" + i;
                //    当数值小于10的时候,在i前面加个0字符串。
            }return i;
        }
        function startTime(){//onload事件
            var today = new Date();
            var y = today.getFullYear();
            var month = today.getMonth();
            //获取当前时间。get。
            var d = today.getDate();
            var h = today.getHours();
            var m = today.getMinutes();
            var s = today.getSeconds();
            // add a zero in front of numbers<10
            month =checkTime(month+1);//因为月份是0-11月份,+1是把区间定在1-12月份,毕竟没有0月份,笑。
            d = checkTime(d);
            h =checkTime(h);
            m =checkTime(m);
            //将函数checkTime作用于时间变量,当变量小于10的时候将再变量前面加个字符串0
            s =checkTime(s);
            document.getElementById("time").innerHTML = h+":"+m+":"+s;//将实时时间结合字符串写出来。
            document.getElementById("date").innerHTML = y+"/"+month+"/"+d;
            t=setTimeout("startTime()",1000);//    每隔1000毫秒,再调用一下这个函数,刷新一下时间
        }


这个比较简单,在w3c上面演化出来的。


w3cDate对象:www.w3school.com.cn/jsref/jsref…


checkTime(i):这里主要是符合我们看时间的习惯,比如18点05分。这里的0就是这个函数的"0"字符串。


onload事件:页面加载之后立即执行一段 JavaScript:


核心思想就是:获取实时的时间,然后通过+操作符,把他们链接起来,并跟html关联,使其呈现出来。


其他的,在注释里面都介绍的很清楚了,不会的,自己写一个试试就知道了。


demo链接:obkoro1.github.io/article-dem…


以上。


目录
相关文章
|
8月前
|
C# C++
C# 自定义时间进度条
本文作者通过参考leslie_xin的一篇文章,成功创建了一个自定义的WinForms控件——时间进度条,该控件带有时间刻度和多种可定制的属性,如颜色、时间间隔等。作者在控件中加入了开始和结束时间,以及自适应的时间刻度间隔。控件能根据设置显示时间标签,并提供了事件处理,如值改变时的触发。代码中包含了计算时间刻度、绘制刻度线和时间标签的逻辑。作者强调了避免循环调用事件、使用OnXXX()形式的事件处理函数以及注意自定义控件中的属性和事件设计。
176 7
|
8月前
|
小程序 API
技术心得记录:微信小程序之图片频繁变化,几秒之后输出结果(适用于抽奖)
技术心得记录:微信小程序之图片频繁变化,几秒之后输出结果(适用于抽奖)
45 0
|
9月前
左右可以滑动半年的超级日历,支持日历部分收起和自动重定向为北京时间
左右可以滑动半年的超级日历,支持日历部分收起和自动重定向为北京时间
59 0
|
JavaScript 前端开发
JavaScript实现显示时间,暂停时间,和取消显示时间
JavaScript实现显示时间,暂停时间,和取消显示时间
uniapp写一个随时间变化的预约日期列表
const today = new Date(); const dateArray = []; const dayOfWeekArray = []; const yearMonthDayArray = [];
105 0
|
JavaScript
[js倒计时]指定对应时间自动倒计时
[js倒计时]指定对应时间自动倒计时
199 0
|
JavaScript 前端开发
使用Js定时器来定时跳转
记录:想实现在5秒后跳转到指定页面,使用到JS定时器和Location对象。
186 0
|
前端开发 JavaScript NoSQL
[前端]每间隔一段时间查询接口获取到百分比,在页面上按照百分比展示进度条,百分比进度后下载文件
[前端]每间隔一段时间查询接口获取到百分比,在页面上按照百分比展示进度条,百分比进度后下载文件