js制作动态图片时钟

本篇文章主要介绍动态图片时钟的制作，旨在练习函数的运用

css代码如下：

 *{padding: 0px;margin: 0px;}#div1{width: 450px;height: 70px;margin: auto;}.dd{width: 50px;height: 70px;background-image: url(./素材/img/c.jpg);background-repeat: no-repeat;display: inline-block;}

html代码如下：

<div id="div1"><img src="./素材/img/0.jpg" alt=""><img src="./素材/img/0.jpg" alt=""><div class="dd"></div><img src="./素材/img/0.jpg" alt=""><img src="./素材/img/0.jpg" alt=""><div class="dd"></div><img src="./素材/img/0.jpg" alt=""><img src="./素材/img/0.jpg" alt=""></div>

js代码如下：

function toNum(num){   //以为当是个位数时，要显示01的状态if(num<10){{return '0'+num;}}else{{return ""+num;}}
}window.onload=function(){var obj=document.getElementsByTagName("img");function tick(){var time= new Date();var time1=toNum(time.getHours())+toNum(time.getMinutes())+toNum(time.getSeconds()); //获取小时分钟秒的一个字符串for (var i=0;i<obj.length;i++){   //一个有六张图片，前两张代表小时，中间两张代表分钟，后两张代表秒，obj[i].src="./素材/img/"+time1[i]+".jpg"; //时间字符串是什么，就显示什么图片}   }window.setInterval(tick, 1000); tick();//为了一开始不显示00:00:00}

效果展示：

js制作动态图片时钟相关推荐

利用js制作动态小时钟
利用js制作动态小时钟在学完Date()函数之后,可以用来与CSS结合制作一个能转动的时钟. 新建html文件,写好基本结构,代码如下: <!DOCTYPE html> <html ...
如何制作动态图片gif
制作动态图片: 1.首先我们要先准备一个视频,并记住视频的总时长. 2.打开 http://ezgif.com/ 如图所示: 3.点击 Video to GIF,进入如下页面: 4.点击浏览,并选择视 ...
怎么制作动态图片？教你三步制作GIF图片？
我们在平时生活中跟朋友使用聊天软件聊天的时候经常会发一些有趣的GIF图片来增加聊天的乐趣,有时候我们看到有趣的图片也想制作成GIF图片当表情包的时候,就可以使用在线制作动态图片(https://www ...
1小时搞定cropper.js制作头像/图片上传、裁剪、并发送至后端
1小时搞定cropper.js制作头像/图片上传.裁剪.并发送至后端先给大家看一下最终效果. 大多数功能都是由Cropper.js封装好的,调整并制作了: 上传图片对图片的裁剪以及调整(旋转.缩放 ...
js制作简单的时钟v1.0
js制作简单的时钟 getFullYear():获取四位数年份 getMonth():获取月份 getDate:获取日期 getDay:获取一周中的周几 getHours():获取小时 getMinu ...
使用 FlipClock.js 制作精美的时钟、定时器和倒计时功能
FlipClock.js 被创建出来是因为其他的解决方案不够抽象,不能够在不重写的代码的情况下提供了深层次的自定义.有些库的参数过多,而另外一些则是脚本中的硬编码太多,不够灵活. 在参考许多现有的解决 ...
js入门·动态的时钟,显示完整的一些方法,新年倒计时
时间对象作为非常重要的一个对象,对我们学.net的人来说,并不是很重要,但这并不意味着我们可以忽略,事实上,用得着的时候还是很多的,如果完全依赖JS处理时间,那是会出问题的,因为JS总是假设本地机器上 ...
JS实现简易图片时钟效果
简易图片时钟思路 1.首先创建一个div,在div中有6个img标签,分别代表时分秒. 2.通过dom操作获取这6个img标签. 3.通过new Date()获取时间,根据时间来修改图片的显示. 4 ...
js实现动态数码时钟
数码时钟在写数码时钟之前,你需要准备0-9数字的图片,你可以自己在网上找,也可以通过ps自己制作喜欢的图片(图片要重命名为"数字".jpg),下面我给大家简单介绍一下,数码时钟的 ...
netbeans 添加gif图片_怎么制作动态图片？手机如何制作清晰gif动图？
对于gif动图大家是非常熟悉的一种图片展现形式,比如平常在微信,QQ中使用的表情包就是gif动图样式的一种.一般获取GIF动图的渠道主要是来自网上或者对于好友使用的比较有趣的图片进行收藏,然后在聊天的 ...

js制作动态图片时钟

js制作动态图片时钟相关推荐

最新文章

热门文章