javascript倒计时图片代码
时间: 2023-06-26 20:09:38 浏览: 46
以下是一个简单的示例,可以用 JavaScript 实现倒计时图片:
HTML 代码:
```
<div id="countdown"></div>
```
CSS 代码:
```
#countdown {
background-image: url('path/to/image.jpg');
width: /*图片宽度*/;
height: /*图片高度*/;
}
```
JavaScript 代码:
```
// 设置倒计时时间,单位为毫秒
var countDownTime = /*倒计时时间*/;
// 获取倒计时元素
var countdownElement = document.getElementById('countdown');
// 定时器每隔一秒更新倒计时图片
var timer = setInterval(function() {
// 剩余时间转换为秒数
var secondsLeft = Math.round((countDownTime - Date.now()) / 1000);
// 如果剩余时间小于等于 0,则停止定时器并显示图片
if (secondsLeft <= 0) {
clearInterval(timer);
countdownElement.style.backgroundImage = 'url(path/to/image.jpg)';
return;
}
// 计算小时、分钟和秒数
var hours = Math.floor(secondsLeft / 3600);
var minutes = Math.floor((secondsLeft - (hours * 3600)) / 60);
var seconds = secondsLeft % 60;
// 格式化倒计时字符串
var countdownString = hours + '小时 ' + minutes + '分 ' + seconds + '秒';
// 更新倒计时元素的文本内容
countdownElement.textContent = countdownString;
}, 1000);
```
注意替换代码中的 `path/to/image.jpg` 和 `倒计时时间` 为你自己的图片路径和倒计时时间。