<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <p></p>
        <img src="" alt="" />
        <img src="" alt="" />
        <img src="" alt="" />
        <img src="" alt="" />
        <img src="" alt="" />
        <img src="" alt="" />
        
        
        
        <script>
            var oP = document.getElementsByTagName("p")[0]
            var oImg = document.getElementsByTagName("img")
            
            
                
                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
                    for (var i=0;i<str.length;i++) {
                        oImg[i].src = "img/"+str.charAt(i)+".JPG"
                    }
                }
                time()
                
                setInterval(function(){
                    time()
                },1000)
                
            
            function add(str){
                return str>9?str:"0"+str
            }
        </script>
    </body>
</html>

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

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

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

  2. js图片时间和倒计时

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

  3. js图片时间翻转

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

  4. js时间倒计时

    看了网上的其他的例子,觉得写的都有点复杂,不好理解,于是自己动手写了个. 本来想封装成jquery插件,但是觉得因为功能很简单,没有必要做成jquery插件,引用的时候不需要引入jqery库,这里直接 ...

  5. php和js一起实现倒计时功能

    里获取的php服务端的时间 纯JS是获取客服端时间! <?php //php的时间是以秒算.js的时间以毫秒算 date_default_timezone_set('PRC'); //date_ ...

  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 ...

  10. JS图片Switchable切换大集合

    JS图片切换大集合 利用周末2天把JS图片切换常见效果封装了下,比如:轮播,显示隐藏,淡入淡出等.废话不多说,直接看效果吧!JSFiddler链接如下: 想看JS轮播切换效果请点击我! 当然由于上传图 ...

随机推荐

  1. BZOJ1057或洛谷1169 [ZJOI2007]棋盘制作

    BZOJ原题链接 洛谷原题链接 设\(L[i][j],R[i][j],H[i][j]\)表示点\((i,j)\)向左.右.上尽量拓展的左端点.右端点.上端点的坐标. \(L,R\)直接初始化好,\(H ...

  2. Ubuntu12.04(64bit)下安装Qt4总结

    本文主要介绍linux系统Ubuntu12.04(64bit)下Qt4.8.5的安装,其中还涉及Fedora9下Qt4的安装. 1.下载软件:去Qt的官网下载Qt4.8.5和Qt Creator软件, ...

  3. Cross-platform Tools

    MinGW和Cygwin都解决了C++跨平台交叉编译的问题,使Linux下的程序在Windows上编译运行成为可能. MinGW给习惯在Linux上开发的人员在windows上提供了一套类似的工具集: ...

  4. 201621123008 《Java程序设计》第14周学习总结

    1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结与数据库相关内容. 2. 使用数据库技术改造你的系统 2.1 简述如何使用数据库技术改造你的系统.要建立什么表?截图你的表设计. 分 ...

  5. netsharp.weixin和sdk的配置信息管理

    一.微信公众号后台配置 即在微信公众号后台配置类似如下的url:http://121.40.86.55/wx?oid=gh_befcc6d4c40d 这种情况下会执行WeixinServlet类的do ...

  6. IOS初级：UIwindow

    AppDelegate.h @property (strong, nonatomic) UIWindow *window; AppDelegate.m - (BOOL)application:(UIA ...

  7. 《C#从现象到本质》读书笔记（一）第1章 .NET基础知识

    最近根据博客园大神的推荐,买了本<C#从现象到本质>.做一点读书笔记. 由于不懂IL和ildasm,winddg,太深奥,理解不了,就牛嚼草一样,先总结第一遍读书,自己总结的知识点了.不知 ...

  8. .net上传文件，利用npoi读取文件信息到datatable里

    整理代码,.net上传文件,利用npoi读取文件到datatable里,使用了FileUpload控件,代码如下: protected void Button1_Click(object sender ...

  9. 如何使用Log4j

    如何使用Log4j? 1. Log4j是什么?   Log4j可以帮助调试(有时候debug是发挥不了作 用的)和分析,要下载和了解更详细的内容,还是访问其官方网站吧: http://jakarta. ...

  10. 【RabbitMQ】 RabbitMQ配置开机启动

    环境 系统:Linux(CentOS 7.2) Erlang环境:21.1(安装参考[Erlang]源码安装) RabbitMQ:3.7.9(安装参考[RabbitMQ] RabbitMQ安装) 配置 ...