模考倒计时网页版

<!DOCTYPE html>

<head>

<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>

<h1>模考倒计时</h1>

<h2>数学模拟考试</h2>

</div>

</div>

</div>

</div>

</div>

请设置考试时间，然后点击"开始"按钮

</div>

// 获取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文件中，用浏览器打开即可使用。