<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <p></p>
        <div></div>
        
        
        
        
        <script>
            var oP = document.getElementsByTagName("p")[0]
            var oImg = document.getElementsByTagName("img")
            var oDiv = document.getElementsByTagName("div")[0]
            var arr = ["img/0.JPG","img/1.JPG","img/2.JPG","img/3.JPG","img/4.JPG","img/5.JPG","img/6.JPG","img/7.JPG","img/8.JPG","img/9.JPG"]
            
            
            
            function time(){
                var now = new Date()
                var oHours = now.getHours()
                var oMin = now.getMinutes()
                var oSec = now.getSeconds()
                var str = add(oHours)+""+add(oMin)+""+add(oSec)
                oP.innerHTML = str
                return str
            }
            
            setInterval(function(){
                time()
            },1000)
            
            var str = time()
            
            
            
            var str1 = ""
            for (var i=0;i<str.length;i++) {
                str1+="<img/>"
                
            }
            
            oDiv.innerHTML = str1
            
            function run(){
                var str = time()
                for (var i=0;i<str.length;i++) {
                    oImg[i].src = arr[str.charAt(i)]
                }
            }
            
            run()
            setInterval(function(){
                run()
            },1000)
            
            
            
            
            
            function add(str){
                return str>9?str:"0"+str
            }
            
            
            
            
            
            
        </script>
    </body>
</html>

js-图片时间困难版(倒计时)的更多相关文章

  1. js图片时间和倒计时

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

  2. js图片时间翻转

    带素材 代码一: <!-- Author: XiaoWen Create a file: 2016-12-12 10:08:02 Last modified: 2016-12-12 11:30: ...

  3. 原生js 当前时间 倒计时代码

    源:https://www.oschina.net/code/snippet_2318153_54763 <!DOCTYPE html> <html> <head> ...

  4. js 图片轮播简单版

    <html> <head> <meta charset="utf-8" /> <title></title> <s ...

  5. javascript小技巧：同步服务器时间、同步倒计时

    之前在网上看到有人提问,如何在页面上同步显示服务器的时间,其实实现方法有几种,可能一般人立马就想到可以使用Ajax每隔一秒去请求服务器,然后将服务器获取到时间显示在页面上,这样虽然能够实现,但存在一个 ...

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

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

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

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

  8. ImageDrawer.js图片绘制插件

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

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

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

随机推荐

  1. hdu 1598 (并查集加贪心) 速度与激情

    题目传送门:http://acm.hdu.edu.cn/showproblem.php?pid=1598 一道带有贪心思想的并查集 所以说像二分,贪心这类基础的要掌握的很扎实才行. 用结构体数组储存公 ...

  2. Mac 下配置Nginx安装环境配置详细说明

    环境信息: Mac OS X 10.11.1 Homebrew  0.9.5 正文 一.安装 Nginx 1.终端执行: ? 1 2 brew search nginx brew install ng ...

  3. Luogu 2822[NOIP2016] 组合数问题 - 数论

    题解 乱搞就能过了. 首先我们考虑如何快速判断C(i, j ) | k 是否成立. 由于$k$非常小, 所以可以对$k$分解质因数, 接着预处理出前N个数的阶乘的因数中 $p_i$ 的个数, 然后就可 ...

  4. clean

    启动tomcat 报 Could not delete D:/online/.metadata/.plugins/org.eclipse.wst.server.core/tm  

  5. 一台老服务器的升级日志（PHP4.4.9+MySQL5.1）升级MySQL5.6

    1.备份数据库 mysqldump -uroot -p --all-databases > databases.sql 2.停止mysql服务 service mysqld stop 3.卸载旧 ...

  6. 三大框架中各种xml的存放位置

      web.xml中classpath:和classpath*:  有什么区别? classpath:只会到你的class路径中查找找文件; classpath*:不仅包含class路径,还包括jar ...

  7. Hibernate validator的一些额外特性

    分组验证及分组顺序 如果我们想在新增的情况验证id和name,而修改的情况验证name和password,怎么办? 那么就需要分组了. 首先定义分组接口://分组接口就是两个普通的接口,用于标识,类似 ...

  8. Windows-universal-samples学习笔记系列二：Controls, layout, and text

    Controls, layout, and text AutoSuggestBox migration Clipboard Commanding Context menu Context menu ( ...

  9. mysql里几个超时配置参数wait_timeout，net_read_timeout等

    以下这些配置项单位都是秒,在mysql命令行中可以使用show global variables like '变量名';可查询配置值. connect_timeout:连接响应超时时间.服务器端在这个 ...

  10. Visual Studio 2015部署OpenCV

    Visual Studio 2015的安装破解及OpenCV的安装和部署 平台:win10 X64+VS2015专业版 X64:vs2015.pro_chs+OpenCV 3.X:opencv-3.4 ...