效果：

代码：

 <head runat="server">

     <title></title>

     <script type="text/javascript">

         function toDou(n) {

             if (n < 10) {

                 return '0' + n;

             }

             else {

                 return '' + n;

             }

         }

         setInterval(

         window.onload = function () {

             var aImg = document.getElementsByTagName('img');

             var oDate = new Date();

             var str = toDou(oDate.getHours()) + toDou(oDate.getMinutes()) + toDou(oDate.getSeconds());

             for (var i = 0; i < str.length; i++) {

                 aImg[i].src = 'Images/Number1/' + str[i] + '.jpg';

             }

         }, 1000);

     </script>

 </head>

 <body style="background-color: Black;">

     <div style="text-align: center; line-height: 600px">

         <img src="Images/Number1/0.jpg" /><img src="Images/Number1/0.jpg" /><span style="font-size: 77px;

             color: White; text-align: center; line-height: 2px;">:</span><img src="Images/Number1/0.jpg" /><img

                 src="Images/Number1/0.jpg" /><span style="font-size: 77px; color: White;">:</span><img

                     src="Images/Number1/0.jpg" /><img src="Images/Number1/0.jpg" />

     </div>

 </body>

点滴积累【JS】---JS小功能(setInterval实现图片效果显示时间)的更多相关文章

  1. JS类小功能

    工作中,总是要处理一些前端的小功能.都是网上搜的JS脚本 <script> //防止页面后退 history.pushState(null, null, document.URL); wi ...

  2. 点滴积累【JS】---JS小功能（JS实现模仿微博发布效果)

    效果: 思路: 利用多功能浮动运动框架实现微博效果,首先,将textarea中的属性添加到新创建的li里面然后,再将li添加到ul里面,再利用浮动运动框架将数据动态的显示出来. 代码: <hea ...

  3. 点滴积累【JS】---JS小功能（JS实现多功能缓冲运动框架)

    效果: 思路: 首先,多功能框架实现的功能是:css中所有的属性都可以添加进去(也可以把方法作为参数传递过去!),然后进行缓冲运动,比如:物体的高度.长度.颜色.字体大小.透明度等,都可以直接传入参数 ...

  4. 点滴积累【JS】---JS小功能（JS实现匀速运动）

    效果: 思路: 利用setInerval()计时器,进行运动.然后关键的一点是在最后停止的时候给它一个填充缝隙的判断. 代码: <head runat="server"> ...

  5. 点滴积累【JS】---JS小功能（JS实现动态添加运动属性)

    效果: 思路: 首先遍历div挨个执行onmouseover事件,再设置获取非行间样式.然后编写setInterval计时器框架,框架内容是:将三个参数 div.div属性.div的目标点,分别获得, ...

  6. 点滴积累【JS】---JS小功能（JS实现多物体缓冲运动)

    效果: 思路: 利用setInterval计时器进行运动,offsetWidth实现宽度的变动,在用onmouseover将终点和所选中的DIV放入参数再进行缓冲运动. 代码: <head ru ...

  7. 点滴积累【JS】---JS小功能（JS实现侧悬浮浮动)

    效果: 思路: 首先,加载onscroll控制滚动条.然后写缓存运动的方法,缓冲运动的方法是先计算出DIV缓冲的速度,并且将其取整,再进行运动判断什么时候到达终点.最后将其参数返回.再在onscrol ...

  8. 点滴积累【JS】---JS小功能（JS实现隐藏显示侧边栏，也就是分享栏的隐藏显示）

    效果: 思路: 首先,利用计时器setInterval实现DIV的隐藏显示功能,然后在进行一个判断,之后在把要移动的相应距离进行一个参数传递,再根据参数判断出移动的方向也就是offsetLeft移动的 ...

  9. 点滴积累【JS】---JS小功能(offsetLeft实现图片滚动效果）

    效果: 代码: <head runat="server"> <title></title> <style type="text/ ...

随机推荐

  1. 解决eclipse中java代码注释变成乱码的问题

    Eclipse JAVA文件注释乱码将别人的项目或JAVA文件导入到自己的Eclipse中时,常常会出现JAVA文件的中文注释变成乱码的情况,主要原因就是别人的IDE编码格式和自己的Eclipse编码 ...

  2. WinCE5.0开发环境的建立

    目前WinCE5.0的开发工具主要有以下几种:Platform Builder5.0.EVC4.0+SP4.Visual Studio2005.其中Platform Builder主要用于定制WinC ...

  3. [Android Pro] ListView,GridView之LayoutAnimation特殊动画的实现

    转载自:http://gundumw100.iteye.com/blog/1874545 LayoutAnimation干嘛用的?不知道的话网上搜一下. Android的Animation之Layou ...

  4. sql server触发器复制记录

    Create Trigger test_tri5 on test after insert as begin declare @id sysname, @tel sysname, @name sysn ...

  5. [转]sql server transaction

    本文转自: http://www.2cto.com/database/201208/146734.html sql事务(Transaction)用法介绍及回滚实例   事务(Transaction)是 ...

  6. cannot be cast to javax.servlet.Filter 报错, 原因servlet-api.jar冲突

    使用maven开发web应用程序, 启动的时候报错: jar not loaded. See Servlet Spec 2.3, section 9.7.2. Offending class: jav ...

  7. Java小案例（行星移动）

    Java小案例 行星移动:参考:三百集 使用软件:idea2017,java 1,图片集:这里  (idea图片源放在target目录下,才能访问到),建议从小往上看... 2,定义MyFrame p ...

  8. chkconfig 检查、设置系统的各种服务

    chkconfig 检查.设置系统的各种服务 学习了:http://man.linuxde.net/chkconfig chkconfig --add 某某服务

  9. Linux C高级编程——网络编程之以太网（2）

    Linux网络编程--以太网 宗旨:技术的学习是有限的,分享的精神是无限的. 1.以太网帧格式 源地址和目的地址是指网卡的硬件地址(也叫MAC地址),长度是48位,是在网卡出厂时固化的.用ifconf ...

  10. poj 2253 (dis最短路径)

    Frogger Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 24979   Accepted: 8114 Descript ...