场景描述：
在限时竞速类活动中，为给用户渲染紧张的时间氛围，往往在最后五秒采用不一样的时间样式，这里实现的是一种类似雷达的效果（具体效果由于本人不会制作动图，各位看官自行新建html后缀文件复制代码运行即可查看，别忘了点赞+关注哦，谢谢支持）。废话不多说，直接上代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>仿雷达倒动效计时</title>
<style>
#myCanvas {
width: 200px;
height: 200px;
background-color: #fff;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
div {
width: 400px;
height: 400px;
background-color: black;
display: flex;
align-items: center;
justify-content: center;
margin: 50px auto;
position: relative;
}
p {
width: 20px;
height: 20px;
line-height: 20px;
text-align: center;
color: red;
position: relative;
z-index: 99;
}
.active {
font-size: 30px;
animation: scale 1s infinite ;
}
@keyframes scale {
0%{
transform: scale(1);
}
50% {
transform: scale(.6);
}
100% {
transform: scale(1);
}
}
h1 {
text-align: center;
margin: auto;
color: aquamarine;
}
</style>
</head>
<body>
<h1>茜氏男友出品</h1>
<div>
<p id="timeText" class="">10</p>
<canvas id="myCanvas" width="200" height="200"></canvas>
</div>
<script>
// 核心思想 通过两个定时器结合canvas实现
// 具体项目中可根据具体需求进行打磨与细节优化
const timeText = document.getElementById('timeText')
const content = document.getElementById('myCanvas')
const ctx = content.getContext('2d')
let time = 10 // 倒计时时长（动态值）
let timer = null // 倒计时承载器
let drawer = null // 动效渲染承载器
let deg = -90 // 角度
window.onload = ()=>{
// 页面加载完成开始执行
timer = setInterval(()=>{
if(time < 6) {
// 最后五秒倒计时开始动画
timeText.setAttribute('class','active')
console.log(timeText)
if(drawer) drawer = null // 清掉上次动画承载器（兜底，其实下面已经请过了）
drawer = setInterval(()=>{
// 进行本轮动画
deg += 3
draw()
},0)
return
}
time-- // 时间每隔一秒减一
timeText.innerText = time // 更改页面dom元素内容
},1000)
}
/** 动画函数 */
function draw() {
ctx.beginPath()
if (deg === 360) {
// 旋转一周
clearInterval(drawer) // 清除动画
deg = -90 // 重置初始化角度
ctx.clearRect(0, 0, 200, 200) // 清除画布
time-- // 计算时间
if(time < 1) {
// 结束
time = '结束'
timeText.setAttribute('class','')
timeText.innerText = time
clearInterval(timer)
return
}
timeText.innerText = time
return
}
ctx.moveTo(100, 100)
ctx.arc(100, 100, 100, -90 * Math.PI / 180, deg * Math.PI / 180)
ctx.fillStyle = '#ff0'
ctx.fill()
ctx.closePath()
}
</script>
</body>
</html>