使用js实现一个简单的图片时钟

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>#box{width: 434px;margin:0 auto;}</style>
</head>
<body><div id="box"><img src="data:images/b.jpg" alt=""><img src="data:images/b.jpg" alt=""><img src="data:images/c.jpg" alt=""><img src="data:images/b.jpg" alt=""><img src="data:images/b.jpg" alt=""><img src="data:images/c.jpg" alt=""><img src="data:images/b.jpg" alt=""><img src="data:images/b.jpg" alt=""></div><script>function fun(){var img = document.getElementsByTagName("img");//获取现在时间var mydate = new Date();var hours = mydate.getHours();var Minutes = mydate.getMinutes();;var seconds = mydate.getSeconds();//当时间小于10时进行补零（字符串拼接）if(hours<10){hours = '0'+hours;}else if(Minutes<10){Minutes = '0'+Minutes;}else if(seconds<10){seconds ='0'+seconds;}img[0].src = "images/"+parseInt(hours/10)+".jpg";img[1].src = "images/"+hours%10+".jpg";img[3].src = "images/"+parseInt(Minutes/10)+".jpg";img[4].src = "images/"+Minutes%10+".jpg";img[6].src = "images/"+parseInt(seconds/10)+".jpg";img[7].src = "images/"+seconds%10+".jpg";}fun();setInterval(fun,1000);</script></body>
</html>

使用js实现一个简单的图片时钟相关推荐

用CSS和JS打造一个简单的图片编辑器
用CSS和JS打造一个简单的图片编辑器,本文主要是利用CSS的filter和简单的Jquery代码来实现一个简单的图片编辑器,包括对图片的透明度,黑白,图片亮度等调节. CSS filter 我们首先 ...
一个简单的图片懒加载
一个简单的图片懒加载所谓懒加载,是为了提高网页的打开的速度,获得更好用户体验的一种手段.其选择的重要的部分先加载,次要的部分需要的时候再加载.比如一个电商网站,首屏通常有很多的数据,清晰度较高的 b ...
Node.js搭建一个简单的服务器
文章目录 Node.js的安装了解Node.js模块系统服务器的搭建一.创建一个Web服务器注意程序代码运行二.静态资源托管静态资源注意程序代码运行三.简单接口的实现(简单服务 ...
python自动上传图片_使用Python实现一个简单的图片上传存储服务
使用flask实现的一个简单的图片上传服务设计初衷对于图片的存储,有很多选择,一般采用云服务如(七牛,又拍等),但是国内的服务像七牛自定义域名竟然需要域名备案(Excuse me,当初就是因为备 ...
[js] 写一个方法获取图片的方向
[js] 写一个方法获取图片的方向 <!DOCTYPE html> <html> <head><meta charset="utf-8"& ...
JS实现一个简单的计算器
使用JS完成一个简单的计算器功能.实现2个输入框中输入整数后,点击第三个输入框能给出2个整数的加减乘除.效果如上: 第一步: 创建构建运算函数count(). 第二步: 获取两个输入框中的值和获取选择 ...
python实现一个简单的图片浏览器
上一个博客中学习了如何在网页上进行简单的图片爬取,目的是制作一个简单的图片浏览器,然后可以选择喜欢的图片筛选到另一个文件夹中. 爬取图片的博客链接:https://blog.csdn.net/yql_ ...
如何用 Node.js 实现一个简单的 Websocket 服务？
最近正在研究 Websocket 相关的知识,想着如何能自己实现 Websocket 协议.到网上搜罗了一番资料后用 Node.js 实现该协议,倒也没有想象中那么复杂,除去注释语句和 console ...
JS写一个简单的五星评价
JS写一个简单的五星评价在做前端网页页面的时候很多时候回有遇到星级评价的模块,用到的地方挺多所以自己就上传下方便大家和自己使用(不支持半星评价因为没有半星的图). 效果图如下: 下面是我们的代码: ...

使用js实现一个简单的图片时钟

使用js实现一个简单的图片时钟相关推荐

最新文章

热门文章