1.创建一个倒计时页面 利用倒计时,每100毫秒变化一次倒计时
时间: 2024-03-14 19:45:26 浏览: 137
简洁美观的倒计时页面
5星 · 资源好评率100%
好的,创建一个倒计时页面可以使用 HTML、CSS 和 JavaScript 语言实现。我们可以先在 HTML 中创建一个容器,用于显示倒计时的时间,然后在 JavaScript 中编写倒计时的逻辑。
HTML 代码:
```html
<div id="countdown">00:00:00</div>
```
CSS 代码:
```css
#countdown {
font-size: 36px;
font-weight: bold;
text-align: center;
padding: 20px;
background-color: #f5f5f5;
}
```
JavaScript 代码:
```javascript
var countdown = 60 * 10; // 10 minutes in seconds
var interval = setInterval(function() {
var minutes = Math.floor(countdown / 60);
var seconds = countdown % 60;
var time = (minutes < 10 ? '0' : '') + minutes + ':' + (seconds < 10 ? '0' : '') + seconds;
document.getElementById('countdown').innerHTML = time;
countdown--;
if (countdown < 0) {
clearInterval(interval);
document.getElementById('countdown').innerHTML = 'Time is up!';
}
}, 100);
```
上述代码中,我们使用了 setInterval 方法,每 100 毫秒执行一次匿名函数。函数中先计算出还剩下的分钟数和秒数,然后拼接成时间字符串,最后将时间字符串更新到页面上。倒计时的初始值是 10 分钟,每次执行函数都将倒计时减 1 秒,直到倒计时结束,清除定时器并将页面上的时间字符串改为 “Time is up!”。
阅读全文