<!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. 洛谷1993 小K的农场

    原题链接 裸的差分约束. \(X_a-X_b\geqslant C\) \(X_a-X_b\leqslant C\Rightarrow X_b-X_a\geqslant -C\) \(X_a-X_b\ ...

  2. mysql 5.7.17 建立主从数据库

    ---恢复内容开始--- 1.确定主/从数据库地址; 2.将主数据库的database dump出来 windows平台用workbench; 其他可以参考: 这位同仁写的比较详细了.我就不谢了.打开 ...

  3. GET与POST传递数据的长度分析

    在客户机和服务器之间进行请求-响应时,两种最常被用到的方法是:GET 和 POST.GET - 从指定的资源请求数据,POST - 向指定的资源提交要被处理的数据.本篇文章我们就来分析一下GET与PO ...

  4. 09. pt-fingerprint

    vim pt-fingerprint.txt select name, password from user where id=5;select name, password from user wh ...

  5. C语言学习第一天～Eclipse MinGW环境搭建

    一.环境准备 windows 二.Windows环境下gcc编译器 1.MinGW介绍         MinGW是指只用自由软件来生成纯粹的Win32可执行文件的编译环境,它是Minimalist ...

  6. js对象通过属性路径获取属性值 - getPropByPath

    function getPropByPath(obj, path) { let tempObj = obj; path = path.replace(/\[(\w+)\]/g, '.$1'); pat ...

  7. 【转】再讲IQueryable<T>，揭开表达式树的神秘面纱

    [转]再讲IQueryable<T>,揭开表达式树的神秘面纱 接上篇<先说IEnumerable,我们每天用的foreach你真的懂它吗?> 最近园子里定制自己的orm那是一个 ...

  8. Windows 8风格应用-触控输入

    参考:演练:创建您的第一个触控应用程序 http://msdn.microsoft.com/zh-cn/library/ee649090(v=vs.110).aspx win8支持多点触摸技术,而我们 ...

  9. JS高级-String-正则表达式:

    1. String: 由多个字符组成的字符只读数组 vs 数组: 相同: 1. 下标, 2. .length, 3. 遍历, 4. .slice 不同: 类型不同!  API不通用 API: 所有字符 ...

  10. Windows事件日志报表 怎样备份数据库？