纯前端实现—“王者荣耀开局十秒倒计时效果”
实现效果：
源码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p{
text-align: center;
font-size: 30px;
height: 50px;
line-height: 50px;
}
.sp2{
color: red;
font-size: 35px;
}
.sp4{
color: #ff25ec;
}
</style>
</head>
<body>
<!--第一行-->
<p>
<span class="sp1"></span>
<span class="sp2"></span>
<span class="sp1"></span>
</p>
<!--第二行-->
<p>
<span class="sp3"></span>
<span class="sp4"></span>
</p>
<script>
//获取元素
var sp11 = document.getElementsByClassName("sp1");
var sp22 = document.getElementsByClassName("sp2");
var p1 = document.getElementsByTagName("p")[0];
var sp33 = document.getElementsByClassName("sp3")[0];
var sp44 = document.getElementsByClassName("sp4")[0];
//第一行倒计时设置
var time = 10;
function time1() {
if(time>0){
sp11[0].innerText = "敌军还有";
sp22[0].innerText = time;
sp11[1].innerText = "秒到达战场！";
}else{
p1.innerText = "全军出击";
clearInterval(a);
clearInterval(b);
}
time--;
}
time1(); //自调用的原因：如果不自调用，因为定时器的使用，界面会在1s后才出现！
var a = setInterval("time1()",1000);
// 第二行的时间设置
function time2() {
var today = new Date();
var year = today.getFullYear();
var month = today.getMonth();
var date = today.getDate();
var hours = today.getHours();
var min = today.getMinutes();
var sec = today.getSeconds();
// 判断分钟和秒钟
if(min<10){
min = "0" + min;
}
if(sec<10){
sec = "0" + sec;
}
sp33.innerText = "现在是北京时间：" + year + "年" + month + "月" + date;
sp44.innerText = hours + ":" + min + ":" + sec;
}
time2();
var b = setInterval("time2()",1000);
</script>
</body>
</html>
??可通过点击下面——>关注本人运营
公众号??
【可以公众号里私聊并标明来自CSDN，会拉你进入技术交流群（群内涉及各个领域大佬级人物，任何问题都可讨论~）--->互相学习&&共同进步（非诚勿扰）】
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
THE END
二维码