模考倒计时网页版
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>模考倒计时</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
}
body {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 100vh;
background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
color: white;
padding: 20px;
}
.container {
background-color: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
border-radius: 20px;
padding: 30px;
width: 90%;
max-width: 600px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
text-align: center;
}
h1 {
margin-bottom: 20px;
font-size: 2.5rem;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}
.exam-info {
margin-bottom: 30px;
padding: 15px;
background-color: rgba(255, 255, 255, 0.15);
border-radius: 10px;
}
.timer-display {
font-size: 5rem;
font-weight: bold;
margin: 30px 0;
text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.3);
font-family: 'Courier New', monospace;
}
.controls {
display: flex;
justify-content: center;
gap: 15px;
margin-bottom: 30px;
}
button {
padding: 12px 25px;
border: none;
border-radius: 50px;
font-size: 1.1rem;
font-weight: bold;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
#startBtn {
background-color: #4CAF50;
color: white;
}
#pauseBtn {
background-color: #FF9800;
color: white;
}
#resetBtn {
background-color: #f44336;
color: white;
}
button:hover {
transform: translateY(-3px);
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
}
button:active {
transform: translateY(1px);
}
.settings {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 15px;
margin-top: 20px;
}
.time-input {
display: flex;
align-items: center;
gap: 5px;
}
input {
padding: 10px;
border: none;
border-radius: 8px;
width: 70px;
text-align: center;
font-size: 1.1rem;
}
label {
font-size: 1.1rem;
}
.message {
margin-top: 20px;
padding: 10px;
border-radius: 8px;
background-color: rgba(255, 255, 255, 0.2);
font-size: 1.1rem;
}
@media (max-width: 500px) {
.timer-display {
font-size: 3.5rem;
}
.controls {
flex-direction: column;
align-items: center;
}
button {
width: 80%;
}
}
</style>
</head>
<body>
<div class="container">
<h1>模考倒计时</h1>
<div class="exam-info">
<h2>数学模拟考试</h2>
<p>总分: 150分 | 考试时间: 120分钟</p>
</div>
<div class="timer-display" id="timer">02:00:00</div>
<div class="controls">
<button id="startBtn">开始</button>
<button id="pauseBtn">暂停</button>
<button id="resetBtn">重置</button>
</div>
<div class="settings">
<div class="time-input">
<label for="hours">时:</label>
<input type="number" id="hours" min="0" max="23" value="2">
</div>
<div class="time-input">
<label for="minutes">分:</label>
<input type="number" id="minutes" min="0" max="59" value="0">
</div>
<div class="time-input">
<label for="seconds">秒:</label>
<input type="number" id="seconds" min="0" max="59" value="0">
</div>
</div>
<div class="message" id="message">
请设置考试时间，然后点击"开始"按钮
</div>
</div>
<script>
// 获取DOM元素
const timerDisplay = document.getElementById('timer');
const startBtn = document.getElementById('startBtn');
const pauseBtn = document.getElementById('pauseBtn');
const resetBtn = document.getElementById('resetBtn');
const hoursInput = document.getElementById('hours');
const minutesInput = document.getElementById('minutes');
const secondsInput = document.getElementById('seconds');
const messageDiv = document.getElementById('message');
let countdown;
let isRunning = false;
let remainingTime = 0;
// 初始化时间显示
updateDisplay();
// 开始倒计时
startBtn.addEventListener('click', function() {
if (!isRunning) {
if (remainingTime === 0) {
// 从输入框获取时间
const hours = parseInt(hoursInput.value) || 0;
const minutes = parseInt(minutesInput.value) || 0;
const seconds = parseInt(secondsInput.value) || 0;
remainingTime = hours * 3600 + minutes * 60 + seconds;
if (remainingTime <= 0) {
messageDiv.textContent = "请设置有效的时间";
return;
}
}
startCountdown();
messageDiv.textContent = "考试进行中...";
}
});
// 暂停倒计时
pauseBtn.addEventListener('click', function() {
if (isRunning) {
clearInterval(countdown);
isRunning = false;
messageDiv.textContent = "已暂停";
}
});
// 重置倒计时
resetBtn.addEventListener('click', function() {
clearInterval(countdown);
isRunning = false;
remainingTime = 0;
updateDisplay();
messageDiv.textContent = "已重置，请设置时间并开始";
});
// 开始倒计时函数
function startCountdown() {
isRunning = true;
countdown = setInterval(function() {
if (remainingTime <= 0) {
clearInterval(countdown);
isRunning = false;
timerDisplay.textContent = "00:00:00";
messageDiv.textContent = "时间到！考试结束";
// 播放提示音
playAlert();
return;
}
remainingTime--;
updateDisplay();
}, 1000);
}
// 更新显示时间
function updateDisplay() {
const hours = Math.floor(remainingTime / 3600);
const minutes = Math.floor((remainingTime % 3600) / 60);
const seconds = remainingTime % 60;
timerDisplay.textContent =
`${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
}
// 播放提示音
function playAlert() {
// 创建一个音频上下文
const audioContext = new (window.AudioContext || window.webkitAudioContext)();
// 创建振荡器
const oscillator = audioContext.createOscillator();
oscillator.type = 'sine';
oscillator.frequency.setValueAtTime(800, audioContext.currentTime);
// 创建增益节点控制音量
const gainNode = audioContext.createGain();
gainNode.gain.setValueAtTime(0.5, audioContext.currentTime);
// 连接节点
oscillator.connect(gainNode);
gainNode.connect(audioContext.destination);
// 播放声音
oscillator.start();
// 1秒后停止
setTimeout(() => {
oscillator.stop();
}, 1000);
}
</script>
</body>
</html>
功能说明
时间设置：可以通过输入框设置小时、分钟和秒数
控制按钮：
开始：启动倒计时
暂停：暂停倒计时
重置：重置倒计时到初始状态
时间显示：以"时:分:秒"格式清晰显示剩余时间
时间到提醒：考试结束时会有声音提示和文字提示
使用方法
在时间设置区域输入考试时长
点击"开始"按钮启动倒计时
需要暂停时点击"暂停"按钮
需要重新设置时间时点击"重置"按钮
这个倒计时页面简洁实用，适合模考场景使用。您可以直接复制上面的代码到HTML文件中，用浏览器打开即可使用。
