<!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. CH#56C 异象石

    一道LCA 原题链接 先跑一边\(dfs\),求出每个节点的时间戳,如果我们将有异象石的节点按时间戳从小到大的顺序排列,累加相邻两节点之间的距离(首尾相邻),会发现总和就是答案的两倍. 于是我们只需要 ...

  2. Windows下的PHP 5.3.x安装 Zend Guard Loader

    PHP5.3之后不再使用Zend Optimizer而是由Zend Guard Loader替换,而Zend Guard Loader安装比前者方便了很多,只有一个dll: 址:http://down ...

  3. 写一个简单的C词法分析器

    写一个简单的C词法分析器 在写本文过程中,我参考了<词法分析器的实现>中的一些内容.这里我们主要讨论写一个C语言的词法分析器. 一.关键字 首先,C语言中关键字有: auto.break. ...

  4. APM浅析

    APM(Application Performance Management & Monitoring)一种基于云的性能监控服务(SaaS),以非侵入式监听探针,收集应用关键指标,生成分析报表 ...

  5. Python之路番外(第二篇)：PYTHON基本数据类型和小知识点

    一.基础小知识点 1.如果一行代码过长,可以用续行符 \换行书写 例子 if (signal == "red") and \ (car == "moving") ...

  6. Minimum Window Substring LT76

    Given a string S and a string T, find the minimum window in S which will contain all the characters ...

  7. linux 和 主机通信的另类方法

    偶然发现,linux可以从github上直接下载代码.这样就能用windows写好代码,直接给linux来跑了.很方便. 当然是因为我还不会配置网络来让linux和windows通信.弄了一个下午也没 ...

  8. tolua杂记

    1 字符串调用luaFunc  :DoString public class CallLuaFunction : MonoBehaviour { private string script = @&q ...

  9. STL基础2：vector中使用结构体

    #include <iostream> #include <vector> #include <numeric> #include <algorithm> ...

  10. HTML and CSS学习概述

    一·Web浏览器是一个连接到Web服务器,向Web服务器请求信息,然后解析返回来的HTML标记,并将其显示在浏览器窗口内的程序.1.Microsoft 2.Internet Explorer(IE)3 ...