<!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. RDMA的基础概念

    一张图可以简单明确的说明,目前RDMA的几种技术的差别: RDMA是remote Direct memory access的简称,有几个最基本的特点: CPU offload kernel bypas ...

  2. Luogu 2467[SDOI2010]地精部落 - DP

    Solution 这题真秒啊,我眼瞎没有看到这是个排列 很显然, 有一条性质: 第一个是山峰 和 第一个是山谷的情况是一一对应的, 只需要把每个数 $x$  变成 $n-x+1$ 然后窝萌定义数组 $ ...

  3. 【已处理完】Centos 6.5版本，df -h出来的容量与du -sh的容量不对应是怎么会事呢？

    问题如题,df -h 出来的容量与du -sh 查看的容量信息不一样,是那里出了问题了吗? 下面分别是du -sh *与df -h出来的结果 [root@mail /]# du -sh * 6.2M ...

  4. lazarus,synedit输入小键盘特殊符号的补丁

    unit synedittextdoublewidthchars2; // fix up chinese symbel width //by steven {$mode objfpc}{$H+} in ...

  5. 设置默认Browser

    电信A库要求android系统中有多个Browser时,开机自动设置一个默认浏览器,而不用弹出选择框让用户手动选择. 监听开机广播Intent.ACTION_BOOT_COMPLETED, 用Pack ...

  6. Spring中@Autowired注解、@Resource注解的区别 （zz）

    Spring中@Autowired注解.@Resource注解的区别 Spring不但支持自己定义的@Autowired注解,还支持几个由JSR-250规范定义的注解,它们分别是@Resource.@ ...

  7. mybatis学习三 数据库连接池技术

    1.在内存中开辟一块空间,存放多个数据库连接对象.就是Connection的多个实例2. 连接池技术有很多,c3p0,dbcp,druid,以及JDBC Tomcat Pool, JDBC Tomca ...

  8. Mac版Java安装与配置

    一.下载并安装JDK http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html 双击下载的 ...

  9. Eventlog Analyzer日志管理系统、日志分析工具、日志服务器的功能及作用

    Eventlog Analyzer日志管理系统.日志分析工具.日志服务器的功能及作用 Eventlog Analyzer是用来分析和审计系统及事件日志的管理软件,能够对全网范围内的主机.服务器.网络设 ...

  10. 数据分析计算xgboost模块

    一.安装xgboost方法 摘要:之前为了安装xgboost,少不了进入各种坑,但最终安装成功了!首先, 准备的工作:,下载mingw64,链接https://pan.baidu.com/s/1i5C ...