原生js实现,倒计时60秒后,切换显示第二张图片
2019-07-28 本文已影响0人
iMUST_Clown
本文内容
- JavaScript 实现倒计时,且页面显示
- 在倒计时为0后,切换为第二张图片,不是轮播图
- 抛砖引玉,本人前端渣渣,欢迎各位提出宝贵意见
前置知识
- HTML基础
- JavaScript基础
代码如下图:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
#two-imgs {
display: none;
}
</style>
</head>
<body>
<div id="show" name="n1"></div>
<div>
<img src="1.png" name="imgs" id="one-imgs">
<img src="2.png" id="two-imgs" alt="">
</div>
</body>
</html>
<script>
var one = document.getElementById('one-imgs');
var two = document.getElementById('two-imgs');
var switchPic = function () {
one.style.display = 'none'
two.style.display = 'block'
}
setTimeout("switchPic()", 60000);
function countdown() {
var n = 60;
var interval;
if (n > 0) {
interval = setInterval(() => {
n--;
document.getElementById("show").innerHTML = n;
if (n <= 0) {
clearInterval(interval)
}
}, 1000)
}
}
countdown();
</script>
