实现图片实时时钟的完整攻略如下。
一、准备工作
- 引入jQuery库
```
2. 在HTML页面中添加img标签，并设置id和src属性
3. 创建一个空的div容器，用于存放数字图片
4. 在css文件中设置图片的宽度和高度
#clock {
width: 150px;
height: 150px;
}
```
二、代码实现
- 获取当前时间
var date = new Date();
var hours = date.getHours();
var minutes = date.getMinutes();
var seconds = date.getSeconds(); - 将时间转换为两位数的字符串形式
hours = hours < 10 ? '0' + hours : hours;
minutes = minutes < 10 ? '0' + minutes : minutes;
seconds = seconds < 10 ? '0' + seconds : seconds; - 将时间每一位数对应的图片路径存到数组中
var nums = [['./images/0.png', './images/1.png', './images/2.png', './images/3.png', './images/4.png', './images/5.png', './images/6.png', './images/7.png', './images/8.png', './images/9.png'], ['./images/0.png', './images/1.png', './images/2.png', './images/3.png', './images/4.png', './images/5.png', './images/6.png', './images/7.png', './images/8.png', './images/9.png'], ['./images/0.png', './images/1.png', './images/2.png', './images/3.png', './images/4.png', './images/5.png', './images/6.png', './images/7.png', './images/8.png', './images/9.png']]; - 将数字图片展现在页面中
var clockHtml = '';
clockHtml += '<img src=" ' + nums[0][hours.toString().charAt(0)] + ' ">';
clockHtml += '<img src=" ' + nums[0][hours.toString().charAt(1)] + ' ">';
clockHtml += '<img src="./images/colon.png">';
clockHtml += '<img src=" ' + nums[1][minutes.toString().charAt(0)] + ' ">';
clockHtml += '<img src=" ' + nums[1][minutes.toString().charAt(1)] + ' ">';
clockHtml += '<img src="./images/colon.png">';
clockHtml += '<img src=" ' + nums[2][seconds.toString().charAt(0)] + ' ">';
clockHtml += '<img src=" ' + nums[2][seconds.toString().charAt(1)] + ' ">';
$('#clock-container').html(clockHtml);
三、完整代码示例
index.html文件代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>图片实时时钟</title>
<script src="https://cdn.bootcss.com/jquery/3.5.1/jquery.min.js"></script>
<style>
#clock {
width: 150px;
height: 150px;
}
</style>
</head>
<body>
<img id="clock" src="./images/00.png" />
<div id="clock-container"></div>
<script src="./js/jquery-1.7.2.min.js"></script>
<script src="./js/main.js"></script>
</body>
</html>
main.js文件代码：
setInterval(function() {
var date = new Date();
var hours = date.getHours();
var minutes = date.getMinutes();
var seconds = date.getSeconds();
hours = hours < 10 ? '0' + hours : hours;
minutes = minutes < 10 ? '0' + minutes : minutes;
seconds = seconds < 10 ? '0' + seconds : seconds;
var nums = [['./images/0.png', './images/1.png', './images/2.png', './images/3.png', './images/4.png', './images/5.png', './images/6.png', './images/7.png', './images/8.png', './images/9.png'], ['./images/0.png', './images/1.png', './images/2.png', './images/3.png', './images/4.png', './images/5.png', './images/6.png', './images/7.png', './images/8.png', './images/9.png'], ['./images/0.png', './images/1.png', './images/2.png', './images/3.png', './images/4.png', './images/5.png', './images/6.png', './images/7.png', './images/8.png', './images/9.png']];
var clockHtml = '';
clockHtml += '<img src=" ' + nums[0][hours.toString().charAt(0)] + ' ">';
clockHtml += '<img src=" ' + nums[0][hours.toString().charAt(1)] + ' ">';
clockHtml += '<img src="./images/colon.png">';
clockHtml += '<img src=" ' + nums[1][minutes.toString().charAt(0)] + ' ">';
clockHtml += '<img src=" ' + nums[1][minutes.toString().charAt(1)] + ' ">';
clockHtml += '<img src="./images/colon.png">';
clockHtml += '<img src=" ' + nums[2][seconds.toString().charAt(0)] + ' ">';
clockHtml += '<img src=" ' + nums[2][seconds.toString().charAt(1)] + ' ">';
$('#clock-container').html(clockHtml);
}, 1000);
示例说明：
- nums数组是将时间对应的数字图片路径按照个位、十位、百位的顺序存放。例如，hours.toString().charAt(0)可以获取当前时间的十位数字，再通过nums[0][hours.toString().charAt(0)]获取对应的图片路径。
- 在complete示例中，除了时分秒三个数字的图片外，还有一个colon.png的冒号图片用于分隔显示。
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：js实现图片实时时钟 - Python技术站
微信扫一扫 
支付宝扫一扫 