html倒计时代码css
时间: 2024-06-17 18:04:23 浏览: 15
HTML倒计时代码和CSS可以用来实现网页上的倒计时效果,下面是一个简单的例子:
HTML代码:
```html
<div id="countdown">
<span id="days"></span>天
<span id="hours"></span>时
<span id="minutes"></span>分
<span id="seconds"></span>秒
</div>
```
CSS代码:
```css
#countdown {
font-size: 24px;
font-weight: bold;
color: #333;
}
#countdown span {
padding: 5px;
background-color: #eee;
border-radius: 5px;
margin-right: 5px;
}
```
JavaScript代码:
```javascript
function countdown() {
var now = new Date();
var eventDate = new Date("2021-10-01");
var currentTime = now.getTime();
var eventTime = eventDate.getTime();
var remTime = eventTime - currentTime;
var s = Math.floor(remTime / 1000);
var m = Math.floor(s / 60);
var h = Math.floor(m / 60);
var d = Math.floor(h / 24);
h %= 24;
m %= 60;
s %= 60;
document.getElementById("days").textContent = d;
document.getElementById("hours").textContent = h;
document.getElementById("minutes").textContent = m;
document.getElementById("seconds").textContent = s;
setTimeout(countdown, 1000);
}
countdown();
```
这个例子中,我们使用了一个`<div>`元素来容纳倒计时的各个部分,并用CSS样式来美化它们。在JavaScript代码中,我们获取当前时间和目标时间之间的差距,并将其转换为剩余时间(天数、小时数、分钟数和秒数)。然后我们将这些值插入到HTML中的相应元素中,并使用`setTimeout`函数每秒钟更新一次倒计时。
相关推荐
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)