JS用图片制作的走动的时间表

今天的话题是描写时间的。有一件事一直困于我的心中，爱情到底是什么啊，最开始就好像打烂了蜜罐，你侬我侬，慢慢的时间久了，好像甜就越来越少了，可我是个奇怪的人，对一个人永远保持着那一颗炙热的心。她一直觉得我很小气，确实这样，我对一个喜欢的人可以保持了一辈子的小气，她却从来没有为此心动过。如果有人愿意为我这样此生足矣，在爱情面前我就是一个孩子，其他事情上面却从没有一丝一毫的小气，还略带一丝不苟的气息。时间就像生锈的斧子，雕琢着人世。每次都想借这个博客对她说我想说的话，就好像王小波总是把想要对李银河说的话写在信上，希望她能懂。

插入正题，用图片制作走动的时间表，我突然有点不想写了，我心情不好了，发个代码就是了

今天把它完善一下，如图所示，这是一个时间表，用0-9的数字图片组成的，他的时间是和系统电脑上的时间一致定义函数new Date() 即可，跟input type=date的万年历有点相似之处，代码很简单，如下所示。

HTML代码

<div id="box"><img src="img/0.png" alt=""><img src="img/0.png" alt=""><span class="span"></span><img src="img/0.png" alt=""><img src="img/0.png" alt=""><span class="span"></span><img src="img/0.png" alt=""><img src="img/0.png" alt=""></div>

CSS代码

#box{width:420px;height:400px;margin:0 auto;}#box img{width:57px;height:104px;}.span{display:inline-block;width:12px;height:12px;background:#333;position:relative;margin:0 5px 34px 5px;}.span:after{content:"";width:12px;height:12px;background:#333;position:absolute;bottom:24px;}

JS 代码

function show(){var box=document.getElementById("box");var img=document.getElementsByTagName("img");var time=new Date(),year=time.getFullYear(),month=time.getMonth()+1,date=time.getDate(),hours=time.getHours(),min=time.getMinutes(),sec=time.getSeconds(),week=time.getDay();function two(n){if(n<10){return '0'+n; //时间的数字有的只有一位 给前面增加一位0}else{return ''+n; }} /*box.innerHTML=getTime; 这句话没用*/getTime=two(hours)+two(min)+two(sec);  //刚好时间位数由六个数字组成for(i=0;i<img.length;i++){img[i].src="img/"+getTime[i]+".png";  //通过将图片的命名为0-9 让时间的的每一位数字刚好与它相符合 路径就会随卓时间的变化而变化}setTimeout(show,1000); //定时器 也可以写在函数的外面用setIterval}show();

JS用图片制作的走动的时间表相关推荐

js实现-限时抢购倒计时间表
<html> <head> <meta http-equiv="Content-Type" content="text/html; char ...
html文本框中加入跑马灯,js文本框走动跑马灯效果代码分享
本文实例讲述了js实现文本框走动跑马灯效果.分享给大家供大家参考.具体如下: 运行效果图: 小提示:直接复制下面分享的代码即可运行,大家可以自定义文字. 为大家分享的js实现文本框走动跑马灯效果代码如 ...
s时钟画布 android,Canvas画布实现自定义时钟效果
标题 *{margin:0; padding:0; list-style:none;} .box{ width: 420px; height: 420px; margin: 50px auto 0; ...
【万字解读】数据可视化图表使用场景大全！
转自:大数据分析和人工智能大家好,我是1480君可视化图表种类如此之多,什么场景下应该用什么图表展示,是一个让人头秃的难题. 数据可视化的爱好者Severino Ribecca,他在自己的网站上收 ...
60种数据可视化图表总结
可视化图表种类如此之多,什么场景下应该用什么图表展示,是一个让人头秃的难题. 数据可视化的爱好者Severino Ribecca,他在自己的网站上收录了 60 种可视化图表样式以及它们分别适用于什么样 ...
Python数据可视化图表大全
可视化图表种类如此之多,什么场景下应该用什么图表展示,是一个让人头秃的难题. 数据可视化的爱好者Severino Ribecca,他在自己的网站上收录了 60 种可视化图表样式以及它们分别适用于什么样 ...
数据可视化图表使用场景大全！
转自:大数据分析和人工智能大家好,我是小z 可视化图表种类如此之多,什么场景下应该用什么图表展示,是一个让人头秃的难题. 数据可视化的爱好者Severino Ribecca,他在自己的网站上收录了 ...
60种数据可视化图表总结（文末送书）
点击上方 "大数据肌肉猿"关注, 星标一起成长点击下方链接,进入高质量学习交流群今日更新| 1052个转型案例分享-大数据交流群来源:数据分析1480 可视化图表种类如此之多 ...
超赞！60种数据可视化图表使用场景及制作工具整理大全！
转自:大数据分析和人工智能大家好,我是 Lemon 可视化图表种类如此之多,什么场景下应该用什么图表展示,是一个让人头秃的难题. 数据可视化的爱好者Severino Ribecca,他在自己的网站上 ...
地表最全：60种数据可视化图表使用场景大全！
可视化图表种类如此之多,什么场景下应该用什么图表展示,是一个让人头秃的难题. 数据可视化的爱好者Severino Ribecca,他在自己的网站上收录了 60 种可视化图表样式以及它们分别适用于什么样 ...

JS用图片制作的走动的时间表

JS用图片制作的走动的时间表

HTML代码

CSS代码

JS 代码

JS用图片制作的走动的时间表相关推荐

最新文章

热门文章