<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>倒计时</title>
<style type="text/css">
body {
margin: 0;
height: 100%;
}
.content {
width: 100%;
height: 100%;
position: fixed;
background: url("./background0.png") no-repeat center;
background-size: cover;
}
</style>
</head>
<body>
<div class="content">
<div>
<div class="top"></div>
<div class="right"></div>
<div class="bottom"></div>
<div class="left"></div>
<div style="position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);color:#ffe400">
<div style="text-align: center; font-size: 66px;" class="scoreName" id="count_title">路演倒计时</div>
<div class="score" style="font-size: 180px; max-width: 100%" id="time"></div>
</div>
</div>
<<div>
<audio id="road_show_audio" src="http://test.xytzq.cn:8080/orgmanage/files/roadshow.mp3"></audio>
<audio id="end_audio" src="http://test.xytzq.cn:8080/orgmanage/files/end.mp3"></audio>
</div>
</div>
</body>
<script>
const ws_ip = "ws://192.168.2.158:8080"
const rs_audio = new Audio("http://test.xytzq.cn:8080/orgmanage/files/roadshow.mp3")
const end_audio = new Audio("http://test.xytzq.cn:8080/orgmanage/files/end.mp3")
//状态
const STATE_IDLE = -1
const STATE_COUNTING = 0
const STATE_PAUSE = 2
const STATE_END = 3
//模式
const MODE_ROAD = 0
const MODE_DEFENCE = 1
//时间 可以考虑从服务器获取
const ROAD_TIME = 300
const DEFENCE_TIME = 300
//当前倒计时模式，默认为路演时间
let currentModel = MODE_ROAD
let currentState = STATE_IDLE
let currentTime
let timer = null
init()
function init() {
currentTime = currentModel === MODE_ROAD ? ROAD_TIME : DEFENCE_TIME
document.getElementById('time').innerHTML = getTimeStr(currentTime)
//音频重载
rs_audio.load()
end_audio.load()
changeColor(currentTime)
}
//监听键盘按键事件
window.addEventListener("keydown", function (event) {
if (event.defaultPrevented) {
return; // Do nothing if the event was already processed
}
switch (event.key) {
//用空格控制开始、暂停计时
case "Spacebar": // IE/Edge specific value
case "Space Bar":
case " ":
spaceEvent()
break;
//用回车控制模式切换
case "Enter":
enterEvent()
break;
case "Right": // IE/Edge specific value
case "ArrowRight":
//计时结束
endEvent()
break;
default:
return;
}
event.preventDefault();
}, true);
function spaceEvent() {
console.log("currentState: " + currentState + ", timer: "
+ timer + ", currentTime: " + currentTime)
if (currentState === STATE_END){
return
}
if (currentState === STATE_IDLE) {
timer = startTime(currentTime)
} else if (currentState === STATE_PAUSE) {
timer = startTime(currentTime)
} else {
pauseTime(timer)
}
}
function enterEvent() {
if (currentModel === MODE_ROAD) {
currentModel = MODE_DEFENCE
document.getElementById("count_title").innerHTML = "答辩倒计时";
} else {
currentModel = MODE_ROAD
document.getElementById("count_title").innerHTML = "路演倒计时";
}
//重置时间
init()
if (timer !== null) {
endTime(timer, false)
}
let msg = "当前模式：" + getModelStr() + "，当前状态：" + getStatusStr()
sendMsg(0, msg)
}
function endEvent() {
init()
if (timer !== null) {
endTime(timer, true)
}
currentState = STATE_END
let msg = "当前模式：" + getModelStr() + "，当前状态：" + getStatusStr()
sendMsg(0, msg)
}
function startTime(time) {
console.log("time: " + time)
if (time <= 0) {
return
}
currentState = time === 0 ? STATE_IDLE : STATE_COUNTING
let timer = window.setInterval(function () {
console.log("c time: " + currentTime)
currentTime--
document.getElementById('time').innerHTML = getTimeStr(currentTime)
if (currentTime === 60 && currentModel === MODE_ROAD) {
//提示倒计时还有1分钟
rs_audio.play()
}
if (currentTime === 3) {
end_audio.play()
}
changeColor(currentTime)
if (currentTime <= 0) {
endTime(timer, true)
currentTime = 0
currentState = STATE_END
}
}, 1000)
return timer
}
function changeColor(time) {
if (time <= 10) {
document.getElementById("time").style.color = "#ff0000";
document.getElementById("count_title").style.color = "#ff0000";
return
}
if (time <= 30) {
document.getElementById("time").style.color = "#ffe400";
document.getElementById("count_title").style.color = "#ffe400";
return
}
document.getElementById("time").style.color = "#ffffff";
document.getElementById("count_title").style.color = "#ffffff";
}
function endTime(timer, isShowEndStr = true) {
currentState = STATE_IDLE
window.clearInterval(timer)
if (isShowEndStr) {
document.getElementById('time').innerHTML = "时间到"
document.getElementById("time").style.color = "#ffdd00";
document.getElementById("count_title").style.color = "#ffdd00";
}
}
function pauseTime(timer) {
currentState = STATE_PAUSE
window.clearInterval(timer)
rs_audio.pause()
end_audio.pause()
}
/**
* 获取倒计时串
* @param countTime
* @returns {string}
*/
function getTimeStr(countTime = 300) {
let minute = Math.floor(countTime / 60 % 60)
let second = Math.floor(countTime % 60)
let minStr = minute < 10 ? "0" + minute : minute + ""
let secStr = second < 10 ? "0" + second : second + ""
return minStr + ":" + secStr
}
function getStatusStr() {
let status = ''
if (currentState === STATE_IDLE) {
status = '空闲'
} else if (currentState === STATE_COUNTING) {
status = '计时中'
} else if (currentState === STATE_END) {
status = '时间到'
} else if (currentState === STATE_PAUSE) {
status = '暂停'
}
return status
}
function getModelStr() {
return currentModel === MODE_ROAD ? "路演" : "答辩"
}
</script>
</html>
比赛倒计时（HTML）
需积分: 5 99 浏览量
2023-02-09
11:56:37
上传
评论
收藏 458KB ZIP 举报
倒计时.zip （2个子文件） 
应急倒计时5+5修改版 
倒计时大屏路演5+答辩5.html 7KB
background0.png 456KB资源评论
憨辰
- 粉丝: 152
- 资源: 18
