<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>新年倒计时</title>
<style type="text/css">
body{
height:100vh;
background:url(../img/xinnian3.jpg);
background-size: 1680px 900px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
user-select: none;
}
audio{
display: none;
}
#id2{
margin-top:240px;
margin-right:220px;
font-size:240px;
background-clip: border-box;
color: #FF512F;
font-weight: 700;
text-shadow: 0px 0px 7px #ffffff;
color: #FFC0CB;
box-sizing: border-box;
vertical-align: inherit;
background-clip: text;
animation: glow-animation 2s infinite linear;
display:none;
}
@keyframes glow-animation{
0%{filter:hue-rotate(0deg)}
100%{filter:hue-rotate(360deg)}
}
#id1{
cursor: pointer;
width:100px;
height: 40px;
background: rgba(220,20,60,0.5);
border:1px red;
box-shadow:0 0 18px #fff;
}
#id1:hover{
transform: scale(1.5);
transition:all 0.7s;
color: red;
}
</style>
</head>
<body>
<p id="id2">11</p>
<button id="id1" onclick="daojishi()">开始倒计时</button>
<audio src="../img/群星%20-%20恭喜发财贺新春(伴奏).mp3" loop="loop" controls="controls" autoplay="autoplay"></audio>
</body>
<script>
function daojishi()
{
var btn = document.getElementById("id1");
btn.style.display = "none";
var t = document.getElementById('id2');
t.style.display = 'block';
//获取id里的内置文本
var starttime=document.getElementById("id2").innerText;
if(starttime == 1)
{
location.href = '新年快乐.html'
}
//延迟函数
setTimeout("daojishi()",1000);
starttime--;
document.getElementById("id2").innerText=starttime;
}
</script>
</html>