<!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. freemarker【FTL】常见语法大全

    FreeMarker的插值有如下两种类型:1,通用插值${expr};2,数字格式化插值:#{expr}或#{expr;format} ${book.name?if_exists } //用于判断如果 ...

  2. Vue组件中引入jQuery

    一.安装jQuery依赖 在使用jQuery之前,我们首先要通过以下命令来安装jQuery依赖: npm install jquery --save # 如果你更换了淘宝镜像,可以使用cnpm来安装, ...

  3. vs2008 安装部署 启动项

    具体操作办法如下: 鼠标右键安装项目->视图->注册表 依次创建键: HKEY_CURRENT_USER\Software\Microsoft\Windows\CurrentVersion ...

  4. windows中执行celery beat任务

    由于最新的celery4.2不支持windows系统,因此按照网上的建议安装了3.1.25版.按照官网的说明使用 app.conf.beat_schedule = { 'add-every-30-se ...

  5. springMVC学习 四 请求的中文乱码解决

    在使用SpringMVC时,同样有前端向后端发送请求,请求参数中有中文,需要解决中文乱码问题,在Spring中也是向java web中一样,通过一个过滤器来解决中文乱码. 这个过滤器在spring-w ...

  6. spring学习 十 schema-based 前置后后置通知

    spring 提供了 2 种 AOP 实现方式:(1)Schema-based ,(2)AspectJ Schema-based:每个通知都需要实现接口或类,配置 spring 配置文件时在<a ...

  7. 进制转换(NOIP2000&NOIP水题测试(2017082301))

    题目链接:进制转换 这题得明白其中的数学方法,明白后就不难了. 那么我们应该怎么计算呢? 其实也很简单. 我们依然采取辗转相除法. 但是,对于负的余数,我们需要进行一些处理. 我们怎么处理呢? 很简单 ...

  8. zabbix实现企业微信监控报警

    一.zabbix基本说明 简介:zabbix基于Web界面的分布式系统监控的企业级开源软件.可以监控各种系统与设备,网络参数,保证服务器设备安全运营:提供灵活的通知机制.如果检测到的指标不达标,就实现 ...

  9. UGUI控制UI的显示层级

    1.调用transform.SetAsLastSibling();将该UI的显示层级调到最上面. 调用transform.SetAsFirstSibling();将该UI的显示层级调到最下面. 2. ...

  10. Hadoop3集群搭建之——hive添加自定义函数UDTF

    上篇: Hadoop3集群搭建之——虚拟机安装 Hadoop3集群搭建之——安装hadoop,配置环境 Hadoop3集群搭建之——配置ntp服务 Hadoop3集群搭建之——hive安装 Hadoo ...