写在前面:本文内容如题,自己做的一个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> <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…
以上。