<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8" />
<title>倒计时工具</title>
<style>
body {
background-image: url("img/background.jpg");
margin-top: 20px;
color: #f0f0f0;
font-family: 微软雅黑;
}
.top {
border: solid 1px #ff3300;
border-radius: 10px;
width: 900px;
height: 150px;
margin: 0 auto;
padding-top: 20px;
}
.top .logo {
float: left;
width: 300px;
text-align: center;
}
.top .text {
float: left;
width: 580px;
text-align: center;
font-size: 28px;
}
.main {
border: solid 1px #f0f0f0;
border-radius: 10px;
width: 900px;
height: 390px;
margin: 0 auto;
padding-top: 20px;
}
#total {
width: 150px;
height: 45px;
border: solid 1px #f0f0f0;
border-radius: 8px;
font-size: 32px;
text-align: center;
}
.timer-box {
border: solid 0px #f30;
width: 620px;
margin: 0 auto;
height: 170px;
text-align: center;
margin-top: 20px;
}
.main .count-box {
width: 550px;
margin: 0 auto;
height: 70px;
text-align: center;
padding-top: 10px;
}
.main .count {
float: left;
width: 200px;
line-height: 60px;
padding-top: 10px;
}
.main .unit {
float: left;
width: 120px;
font-size: 30px;
line-height: 70px;
}
.timer-box .dash {
width: 80px;
font-size: 100px;
float: left;
text-align: center;
font-weight: bold;
}
.timer-box .timer {
width: 150px;
font-size: 120px;
float: left;
text-align: center;
}
.button-box {
border: solid 0px #f30;
width: 550px;
margin: 0 auto;
height: 150px;
text-align: center;
}
.icon {
float: left;
width: 100px;
}
.icon img:hover {
opacity: 0.7;
cursor: pointer;
}
.bottom {
border: solid 1px #f0f0f0;
border-radius: 10px;
width: 900px;
height: 55px;
margin: 0 auto;
padding-top: 10px;
text-align: center;
font-size: 20px;
}
</style>
</head>
<body>
<div class="top">
<div class="logo">
<img src="img/logo.jpg" style="width: 130px" />
</div>
<div class="text">
蜗牛学院-学员活动专用倒计时工具
<br />
祝各位参赛选手取得优秀成绩!
</div>
</div>
<br />
<div class="main">
<div class="count-box">
<div class="icon">
<img src="img/minus.png" width="70" οnclick="minus();" />
</div>
<div class="count">
<input type="text" id="total" value="10" />
</div>
<div class="unit">分钟</div>
<div class="icon" style="float: left; width: 100px">
<img src="img/plus.png" width="70" οnclick="add()" />
</div>
</div>
<div class="timer-box">
<div class="timer" id="hour">00</div>
<div class="dash">-</div>
<div class="timer" id="minute">00</div>
<div class="dash">-</div>
<div class="timer" id="second">00</div>
</div>
<div class="button-box">
<div class="icon" style="float: left; width: 200px; padding-top: 20px;text-align:center;">
<img src="img/pause.png" width="60" οnclick="pause();" />
</div>
<div class="icon" style="float: left; width: 100px;text-align:center;">
<img src="img/start.png" width="90" οnclick="start();" />
</div>
<div class="icon" style="float: left; width: 200px; padding-top: 20px;text-align:center;">
<img src="img/refresh.png" width="60" οnclick="reset()" />
</div>
</div>
</div>
<br />
<div class="bottom">
技术支持:成都蜗牛创想科技有限公司(蜗牛学院),
<span style="font-size: 28px">http://www.woniuxy.com</span>
</div>
<audio src="闹钟.wav" id="music"></audio>
<script>
/*
实现倒计时:
*/
function add() {
var input = document.querySelector("#total");
input.value++;
}
function minus() {
var input = document.querySelector("#total");
if (input.value > 0) {
input.value--;
}
}
var timer;//保存定时器标识符
var totalSecond = 0; //保存剩余总秒数
function start() {//-----------------------开始
if (totalSecond <= 0) {
//倒计时重新开始
var input = document.querySelector("#total");//获取input
totalSecond = input.value * 60;//获取总秒数
console.log("aaa");
}
interval();//调用定时器函数
}
function pause() {//-----------------------暂停
clearInterval(timer);//停止间隔定时器
timer = undefined;
}
function reset(){//-----------------------重置
// 方式一:
// 定时器关闭
pause();
// 页面中的信息清零
document.querySelector("#hour").innerText="00";
document.querySelector("#minute").innerText="00";
document.querySelector("#second").innerText="00";
// 将总秒数清零
totalSecond = 0;
// 方式二:刷新页面
// location.reload();
}
// 定时器
function interval() {
if (timer == undefined) {
timer = setInterval(function () {
// 控制倒计时不能为负
if(totalSecond>0){
totalSecond--;
}else{
pause();
document.querySelector("#music").play()
}
console.log(totalSecond);
// 根据剩余的秒数来计算剩余的小时数、分钟数、秒数
// 小时数
var hour = parseInt(totalSecond / 60 / 60);
// 不足一小时的分钟数
var minute = parseInt(totalSecond / 60 % 60);
// 不足一分钟的秒数
var second = totalSecond % 60;
console.log(hour, minute, second);
document.querySelector("#hour").innerText = hour;
document.querySelector("#minute").innerText = minute;
document.querySelector("#second").innerText = second
}, 1000)
}
}
</script>
</body>
</html>