css js 计时器 |css样式和内容这么分开编写

在CSS中，大家可以使用关键帧动画来实现计时器效果。例如，以下代码可以实现一个简单的倒计时效果：

.timer{
animation: countDown 10s linear forwards;
font-size: 30px;
text-align: center;
}
@keyframes countDown{
from{ 
content: "10"; 
}
to{
content: "0";
}
}

以上代码中，大家使用了关键帧动画来实现计时器效果。在计时器的容器元素中设置动画属性，其中duration为10秒，timing-function为线性，iteration-count为1次。而@keyframes则是定义计时器变化的过程，从10开始递减到0。

而在JavaScript中，大家同样可以使用计时器函数来实现计时器效果。以下是一个简单的计时器实现：

function startTimer(duration, display) {
var timer = duration, minutes, seconds;
setInterval(function () {
minutes = parseInt(timer / 60, 10);
seconds = parseInt(timer % 60, 10);
minutes = minutes< 10 ? "0" + minutes : minutes;
seconds = seconds< 10 ? "0" + seconds : seconds;
display.textContent = minutes + ":" + seconds;
if (--timer< 0) {
timer = duration;
}
}, 1000);
}
window.onload = function () {
var tenMinutes = 60 * 10,
display = document.querySelector('#time');
startTimer(tenMinutes, display);
};

以上代码中，大家定义了一个startTimer函数，其中duration为计时器持续时间，display为展示计时器的元素。在函数内部，大家使用setInterval函数每隔1秒更新一次计时器的时间，并将时间显示在设置好的展示元素中。而if条件则是在计时器结束后重新从设定的时间开始。

综上，无论是使用CSS还是JavaScript，计时器的实现都并不复杂，只需要根据不同的需求选择不同的实现方式即可。