代码：单页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>倒计时</title>
<style>
#currentTime{
text-align: right;
font-size: 20px;
margin-right: 10px;
}
.showTime{
width: 90%;
margin: 0 auto;
font-size: 120px;
text-align: center;
margin-top: 10%;
}
.setTime{
width: 750px;
margin: 0 auto;
position: absolute;
bottom: 80px;
left: 50%;
margin-left: -375px;
}
.setTime .form{
display: flex;
justify-content: left;
}
.setTime .form div{
margin-left: 30px;
}
</style>
</head>
<body>
<p id="currentTime">显示实时时间</p>
<p style="font-size:36px;margin-left: 40px;">您的演讲时间剩余：</p>
<div class="showTime">
<span id="showHour">0</span> 时
<span id="showMin">0</span> 分
<span id="showSec">0</span> 秒
</div>
<div class="setTime">
<p style="margin-left:30px;">请设置倒计时的时间：</p>
<div class="form">
<div>
<label for="hour">时:</label>
<input type="text" id="hour" value="0">
</div>
<div>
<label for="min">分:</label>
<input type="text" id="min" value="0">
</div>
<div>
<label for="sec">秒:</label>
<input type="text" id="sec" value="0">
</div>
<div>
<button onclick="startCountDown()" id="start">确定</button>
</div>
</div>
</div>
<script>
// 设置当前时间
var currentTime = setInterval(function(){
var date = new Date();
document.getElementById(‘currentTime‘).innerHTML = date.getFullYear() + ‘/‘ + checkTime((date.getMonth()+1)) + ‘/‘ + checkTime(date.getDate()) + ‘ ‘ + checkTime(date.getHours()) + ‘:‘ + checkTime(date.getMinutes()) + ‘:‘ + checkTime(date.getSeconds());
},1000);
// 设置月/天/时/分/秒等的个位数前加0
function checkTime(num){
if(num < 10) return ("0" + num);
return num;
}
// 设置倒计时
var startCountDown = function(){
document.getElementById(‘start‘).disabled = true;
var endTime = formatTime(document.getElementById(‘hour‘).value, document.getElementById(‘min‘).value, document.getElementById(‘sec‘).value);
var start = setInterval(function(){
endTime--;
// console.log(endTime);
if(endTime >= 0){
document.getElementById(‘showHour‘).innerHTML = checkTime(parseInt(endTime/60/60,10)); // 剩余多少小时
document.getElementById(‘showMin‘).innerHTML = checkTime(parseInt(endTime/60%60,10)); // 剩余多少分钟
document.getElementById(‘showSec‘).innerHTML = checkTime(parseInt(endTime%60,10)); // 剩余多少秒
}else{
clearInterval(start);
}
},1000);
}
// 格式化设置时间,返回时间以秒为单位
var formatTime = function(hour, min ,sec){
document.getElementById(‘showHour‘).innerHTML = checkTime(parseInt(hour));
document.getElementById(‘showMin‘).innerHTML = checkTime(parseInt(min));
document.getElementById(‘showSec‘).innerHTML = checkTime(parseInt(sec));
return (parseInt(hour*60*60) + parseInt(min*60) + parseInt(sec)); // 返回多少秒
}
</script>
</body>
</html>
原文地址：https://www.cnblogs.com/maoriaty/p/8372178.html
时间： 2024-10-28 20:12:16