js实现图片实时时钟

2023年5月27日下午2:00 • JavaScript

实现图片实时时钟的完整攻略如下。

一、准备工作

引入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技术站