纯前端实现—“王者荣耀开局十秒倒计时效果”
Posted 孤寒者
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了纯前端实现—“王者荣耀开局十秒倒计时效果”相关的知识，希望对你有一定的参考价值。
实现效果：
源码：
<!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>
以上是关于纯前端实现—“王者荣耀开局十秒倒计时效果”的主要内容，如果未能解决你的问题，请参考以下文章
猜数字游戏——纯前端实现（纯小白也能看懂&CV直接拿走直接玩）
抽奖小游戏——纯前端实现（纯小白也能看懂&CV直接拿走直接玩）