带素材

代码一：

<!--

Author: XiaoWen

Create a file: 2016-12-12 10:08:02

Last modified: 2016-12-12 11:30:34

Start to work:

Finish the work:

Other information:

-->

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>js翻转的时间</title>

  <style>

    div{

      margin: auto;

      text-align: center;

    }

  </style>

</head>

<body>

  <script>

    document.write('<div id="time_box"></div>');

    var time_box=document.getElementById("time_box");

    var a_img=document.getElementsByTagName("img");

    for(var i=0;i<8;i++){

      time_box.innerHTML+='<img alt="图片' + i + '">';

    };

    var arr=["0.jpg", "1.jpg", "2.jpg", "3.jpg", "4.jpg", "5.jpg", "6.jpg", "7.jpg", "8.jpg", "9.jpg"]

    var t1=setInterval(function(){

      var t2;

      var time=new Date();

      var time_str=add0(time.getHours())+""+add0(time.getMinutes())+""+add0(time.getSeconds());

      a_img[0].src=arr[time_str[0]];

      a_img[1].src=arr[time_str[1]];

      a_img[2].src="colon.jpg";

      a_img[3].src=arr[time_str[2]];

      a_img[4].src=arr[time_str[3]];

      a_img[5].src="colon.jpg";

      a_img[6].src=arr[time_str[4]];

      a_img[7].src=arr[time_str[5]];

      t2=setInterval(function(){

        console.log("t2")

        clearInterval(t2)

        a_img[2].src="space.jpg";

        a_img[5].src="space.jpg";

      },500)

    },1000);

    function add0(a){

      if(a<10){

        return "0"+a;

      }else{

        return a;

      };

    };

  </script>

</body>

</html>

代码二：

<!--

Author: XiaoWen

Create a file: 2016-12-12 10:08:02

Last modified: 2016-12-12 12:05:10

Start to work:

Finish the work:

Other information:

-->

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>js翻转的时间2</title>

  <style>

    div{

      margin: auto;

      text-align: center;

    }

  </style>

</head>

<body>

  <script>

    document.write('<div id="time_box"></div>');

    var time_box=document.getElementById("time_box");

    var a_img=document.getElementsByTagName("img");

    for(var i=0;i<8;i++){

      time_box.innerHTML+='<img alt="图片' + i + '">';

    };

    var t2;

    var arr=["0.jpg", "1.jpg", "2.jpg", "3.jpg", "4.jpg", "5.jpg", "6.jpg", "7.jpg", "8.jpg", "9.jpg"]

    var t1=setInterval(function(){

      var time=new Date();

      var time_str=add0(time.getHours())+":"+add0(time.getMinutes())+":"+add0(time.getSeconds());

      var j=0;

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

        if(i==2 || i==5){

          a_img[i].src="colon.jpg";

          clearInterval(t2)

          t2=setInterval(function(){

            a_img[2].src="space.jpg";

            a_img[5].src="space.jpg";

          },500)

        }else{

          a_img[i].src=arr[time_str[i]];

        }

      }

    },1000);

    function add0(a){

      if(a<10){

        return "0"+a;

      }else{

        return a;

      };

    };

  </script>

</body>

</html>

代码三：

<!--

Author: XiaoWen

Create a file: 2016-12-12 10:08:02

Last modified: 2016-12-12 12:14:29

Start to work:

Finish the work:

Other information:

-->

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>js翻转的时间3</title>

  <style>

    div{

      margin: auto;

      text-align: center;

    }

  </style>

</head>

<body>

  <script>

    document.write('<div id="time_box"></div>');

    var time_box=document.getElementById("time_box");

    var a_img=document.getElementsByTagName("img");

    for(var i=0;i<8;i++){

      time_box.innerHTML+='<img alt="图片' + i + '">';

    };

    var t2;

    var t1=setInterval(function(){

      var time=new Date();

      var time_str=add0(time.getHours())+":"+add0(time.getMinutes())+":"+add0(time.getSeconds());

      var j=0;

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

        a_img[i].src=time_str[i] + ".jpg";

      }

      a_img[2].src="colon.jpg";

      a_img[5].src="colon.jpg";

      setTimeout(function(){

        a_img[2].src="space.jpg";

        a_img[5].src="space.jpg";

      },500);

    },1000);

    function add0(a){

      if(a<10){

        return "0"+a;

      }else{

        return a;

      };

    };

  </script>

</body>

</html>

js图片时间翻转的更多相关文章

  1. js图片时间和倒计时

    图片时间原理        原理:使用定时器每秒获取时间,获取时间的时,分,秒,组成一个6位数的字符串,然后用charAt,截取出对应的字符,图片命名和数字相对应就ok拉 倒计时原理        原 ...

  2. JS图片延迟加载分析及简单的demo

    JS图片延迟加载 图片延迟加载也称 "懒加载",通常应用于图片比较多的网页,比如 "美丽说首页","蘑菇街"等一些导购网站上用的比较多,或者 ...

  3. css3图片3D翻转效果

    点击图片看翻转效果 html结构 <div class="flip"> <div class="front"> <img src= ...

  4. JS图片自动或者手动滚动效果(支持left或者up)

    JS图片自动或者手动滚动效果(支持left或者up) JS图片自动或者手动滚动效果 在谈组件之前 来谈谈今天遇到搞笑的事情,今天上午接到一个杭州电话 0571-28001187 即说是杭州人民法院的 ...

  5. ImageDrawer.js图片绘制插件

    ImageDrawer.js图片绘制插件有以下一些可用的配置参数. Duration:整个动画或每个步骤的绘制时间(以秒为单位) Background:在绘图时将颜色放在图片上 Callback:绘画 ...

  6. 项目总结07：JS图片的上传预览和表单提交（FileReader()方法）

    JS图片的上传预览和表单提交(FileReader()方法) 一开始没有搞明白下面这块代码的,今天有时间简单整理下 核心点:FileReader()方法 以下是代码(以JSP文件为例) <!DO ...

  7. JS图片Switchable切换大集合

    JS图片切换大集合 利用周末2天把JS图片切换常见效果封装了下,比如:轮播,显示隐藏,淡入淡出等.废话不多说,直接看效果吧!JSFiddler链接如下: 想看JS轮播切换效果请点击我! 当然由于上传图 ...

  8. JS图片轮播[左右轮播

    直接可以用,网上摘下来的! <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http ...

  9. 兼容好的JS图片上传预览代码

    转 : http://www.codefans.net/articles/1395.shtml 兼容好的JS图片上传预览代码 (谷歌,IE11) <html xmlns="http:/ ...

随机推荐

  1. 根据excel表格中的内容更新Sql数据库

    关于[无法创建链接服务器 "(null)" 的 OLE DB 访问接口 SQL Server 2008读取EXCEL数据时,可能会报这个错误:无法创建链接服务器 "(nu ...

  2. ArcGIS Wpf MarkerSymbol 图形符号无法序列化为 JSON

    [问题贴,尚不知如何解决] 在GraphicsLayer中添加一个点,使用自定义模板渲染该点,在Vs2012设计界面可以看到,但运行时出现异常 代码如下: <esri:Graphic x:Nam ...

  3. iOS9的新特性以及适配方案

    新的iOS 9系统比iOS8更稳定,功能更全面,而且还更加开放.iOS 9加入了更多的新功能,包括更加智能的Siri,新加入的省电模式.iOS 9为开发者提供5000个全新的API. 1. 限制HTT ...

  4. gdal编译C#开发版本

    gdal的编译比较麻烦,情况有很多种,今天我编译的gdal遇到的问题就和以前的有点不一样,仅供参考借鉴. 1.下载gdal源码 gdal源码下载地址:https://trac.osgeo.org/gd ...

  5. Kindeditor为什么提交后获取不到值

    LinkButton不是表单提交方式所以获取不到.如果用button submit提交方式就是form提交方式后台就能获取到值 取得编辑器的HTML内容.KindEditor的可视化操作在新创建的if ...

  6. 問題排查：建立選單時的錯誤 errcode:40016, errmsg:invalid button size hint: [RI68La0851vr18]

    可能原因: 1.如提示所說,第一層選單個數超過限制 (最多3個) 2.選單的 json 格式有誤,目前已知少了括弧會提示此錯誤

  7. vim 中乱码问题

    在Linux下开发,经常遇到乱码问题:shell或者vim中显示不了中文,或者能够显示,但不能输入中文.每次都是上网去搜,或者同事告诉我一些命令来解决的.一直没有理解为什么会出乱码,本文就是想认真分析 ...

  8. linux桌面环境gnome,kde,xfce,lxde 使用比较（转）

    Linus Torvalds大神前几日在 Google+上表示,GNOME 3"无可容忍的凌乱",改投Xfce桌面环境.下面就GNOME, KDE, XFCE和 LXDE略作比较. ...

  9. Web开发中的主要概念

    一.Web开发中的主要概念1.静态资源:一成不变的.html.js.css2.动态资源:JavaWeb.输出或产生静态资源.(用户用浏览器看到的页面永远都是静态资源) 3.JavaEE:十三种技术的集 ...

  10. 打印出所有的"水仙花数"，所谓"水仙花数"是指一个三位数，其各位数字立方和等于该数本身。例如：153是一个"水仙花数"，因为153=1的三次方＋5的三次方＋3的三次方。

    public class Three_03 { public static void main(String[] args) { for(int i=100;i<1000;i++){ int a ...