实现效果

实现思路

将0-9数字图像命名为0.png-9.png；
先获取时间对象，用字符串表达时间（即”时“+”分“+”秒“），同时要注意当时间数字小于10的时候，我们获取的只有一位数，需要在前面添加数字0；
利用循环输出每一位对应的图像路径；
再利用定时功能修改图像。

部分代码

HTML部分

<div id="box1"><div id="clock"><div id="time1"><img src="../images/0.png" alt=""><img src="../images/0.png" alt=""><span>:</span><img src="../images/0.png" alt=""><img src="../images/0.png" alt=""><span>:</span><img src="../images/0.png" alt=""><img src="../images/0.png" alt=""></div></div></div>

JavaScript部分代码

<script>var imgs = document.querySelectorAll('img');function getNum(num){if(num<10){return '0'+num;}else{return ''+num;}}function toImg(){var myDate = new Date();var str = getNum(myDate.getHours())+ getNum(myDate.getMinutes())+ getNum(myDate.getSeconds());for(var i=0;i<imgs.length;i++){imgs[i].src = "../images/"+str.charAt(i)+".png";}}window.onload = function(){toImg();setInterval(toImg,1000);}</script>

如有问题，可以在评论区讨论一下。

HTML+CSS+JavaScript实现电子时钟（数字换成图片）相关推荐

基于8051单片机实现电子时钟+数字秒表设计
电子时钟+数字秒表设计概述设计任务的基本要求整体方案电路设计原理软件设计元件清单项目下载地址概述电子时钟是一种利用数字电路来显示秒.分.时的计时装置,与传统的机械钟相比,它具有走时准 ...
将接收的二进制流转换成图片保存
将接收的二进制流转换成图片保存 /*** 将接收的二进制流转换成图片保存* * @param imgByte* 二进制流* @param imgPath* 图片的保存路径* @param imgNam ...
【单片机毕业设计】【mcuclub-306】万年历电子时钟 | 数字时钟 | 多功能时钟 | 智能闹钟
设计简介: 项目名:基于单片机的万年历电子时钟的设计.基于单片机的多功能时钟的设计.基于单片机的数字时钟的设计单片机:STC89C52 功能简介: 1.通过DS1302实时获取时间,并掉电保存时间 ...
JavaScript实现React实现网页转换成图片截屏下载
最近有项目的需求需要把网站内HTML内容转换成图片保存下载,找了一圈发现一个不错的插件HTML-to-image,npm 包地址:Html-to-image NPM | npm.io,该插件的原理是: ...
ps：把字体颜射换成图片背景
把字体颜色换为图片背景 1. (1.)首先我们可以找一下自己喜欢的图片或者一些喜欢的背景图片图片拖入ps里面.或者用Ctrl+O直接快捷打开.并且选择你需要的图片. 2. (2.)在右上角那你关掉箭头 ...
HTML+CSS+JavaScript简单实现时钟
首先我们要有几张代表数字的图片,来代表0-9如图: 然后开始实现功能下面展示完整代码. <!DOCTYPE html> <html><head><meta ...
css，div在线编辑器（换成html就OK了）
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
css将鼠标箭头换成图片
就一行代码 html,body{cursor: url('wish1.png'),auto;}
html媒体查询怎么把颜色换成图片,为网页中图片src添加媒体查询功能。
为图片src 增加媒体查询. Css 中的媒体查询默认是没有为图片指定src,的但是如果页面中需要根据浏览器宽度指定图片src, 比如当电脑的时候,加载大图,手机的时候加载小图. 今天发现一个很棒的 ...

HTML+CSS+JavaScript实现电子时钟（数字换成图片）

实现效果

实现思路

部分代码

HTML部分

JavaScript部分代码

HTML+CSS+JavaScript实现电子时钟（数字换成图片）相关推荐

最新文章

热门文章