代码：单页面
<!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>
