JS代码:


<script type="text/javascript">
    window.onload=function(){

   //小于10的数字补零及数字转字符串
        function toDouble(num){
            if(num>=0&&num<10){
                num='0'+num;
            }else{
                num=''+num;
            }
            return num;
        }

var oDiv1=document.getElementById("div1");
        var aImgs=oDiv1.getElementsByTagName('img');

function times(){
        var oDate=new Date();
        var nowtime=toDouble(oDate.getHours())+toDouble(oDate.getMinutes())+toDouble(oDate.getSeconds());
            for(var i=0; i<aImgs.length;i++){
                aImgs[i].src='images/'+nowtime.charAt(i)+'.png';  //charAt()用于取字符串nowtime的第i位元素
            }        
        }

setInterval(times,1000)
        times(); //加载时自动执行一次
    }
</script>

html代码:


注:需要自己建立0.png,1.png,2.png ...9.png共十张png图片,内容分别为0,1,2 ... 9。

<div id="div1">
        <ul>
            <li><img src="data:images/0.png" /></li>
            <li><img src="data:images/1.png" /></li>
            <li><h1>:</h1></li>
            <li><img src="data:images/2.png" /></li>
            <li><img src="data:images/3.png" /></li>
            <li><h1>:</h1></li>
            <li><img src="data:images/4.png" /></li>
            <li><img src="data:images/5.png" /></li>
        </ul>
    </div>

精通javascript笔记(智能社)——数字时钟的更多相关文章

  1. 精通javascript笔记(智能社)——简易tab选项卡及应用面向对象方法实现

    javascript代码(常规方式/面向过程): <script type="text/javascript"> window.onload=function(){ v ...

  2. 阅读《Android 从入门到精通》(15)——数字时钟

    数字时钟(DigitalClock) java.lang.Object; android.view.View; android.widget.TextView; android.widget.Digi ...

  3. <精通JavaScript>---阅读笔记01

    下面是阅读精通JavaScript书做的相关笔记. JS中的函数重载 函数重载必须依赖两件事情:判断传入参数数量的能力和判断传入参数类型的能力,在js中每个函数都带有一个仅在这个函数范围内作用的变量, ...

  4. JavaScript学习--(智能社视频)

    JavaScript学习,这是智能社官网上的JS视频,讲解的挺不错的,就是没有视频的demo,在视频中附上自己编写的一些demo... 下载地址:http://pan.baidu.com/s/1cPz ...

  5. [Effective JavaScript 笔记] 第4条:原始类型优于封闭对象

    js有5种原始值类型:布尔值.数字.字符串.null和undefined. 用typeof检测一下: typeof true; //"boolean" typeof 2; //&q ...

  6. [Effective JavaScript 笔记] 第5条:避免对混合类型使用==运算符

    “1.0e0”=={valueOf:function(){return true;}} 是值是多少? 这两个完全不同的值使用==运算符是相等的.为什么呢?请看<[Effective JavaSc ...

  7. [Effective JavaScript 笔记]第28条:不要信赖函数对象的toString方法

    js函数有一个非凡的特性,即将其源代码重现为字符串的能力. (function(x){ return x+1 }).toString();//"function (x){ return x+ ...

  8. js实现动态数字时钟

    1.效果如下 2.html部分 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"&g ...

  9. 智能社官网顶部导航实现demo

    从智能社的blue老师公开课中学习到了很多,在此表示感谢. 这个导航很好玩,于是就想实现一个. html <div id="box"> <ul> <l ...

随机推荐

  1. Date()日期函数浏览器兼容问题踩坑

    原文:Date()日期函数浏览器兼容问题踩坑 之前用layui做的一项目中,table中用到了日期格式化的问题.直接没多想,撸代码就完了呗,结果最近一段时间客户反馈说显示日期跟录入日期不一样(显示日期 ...

  2. Windows下使用PHP Xdebug

    首先下载Xdebug的dll:http://xdebug.org/download.php 将dll文件放到php目录下的ext目录里面: 修改php.ini,根据自己的需要增加信息: [Xdebug ...

  3. thrift 调取 python php go 客户端代码

    golang package main import ( "fmt" "git.apache.org/thrift.git/lib/go/thrift" &qu ...

  4. 掘金 Android 文章精选合集

    掘金 Android 文章精选合集 掘金官方 关注 2017.07.10 16:42* 字数 175276 阅读 50053评论 13喜欢 669 用两张图告诉你,为什么你的 App 会卡顿? - A ...

  5. 【Luogu P1935】[国家集训队]圈地计划

    题目 最近房地产商 GDOI (Group of Dumbbells Or Idiots) 从 NOI (Nuts Old Idiots) 手中得到了一块开发土地. 据了解,这块土地是一块矩形的区域, ...

  6. Qt 实现在隐藏标题栏情况下,窗口的缩放(未成功)

    呃,这是一个悲剧的版本,在这版本中,我按照网上大神的说法,试了一下,但是没有效果,不知道出错在了那里,和昨天一样,也是,没有理想的效果,这里贴上代码,记录一下 资料连接:放评论 需要包含头文件 #in ...

  7. 【转】用ASP.NET Core 2.1 建立规范的 REST API -- 缓存和并发

    原文链接:https://www.cnblogs.com/cgzl/p/9165388.html 本文所需的一些预备知识可以看这里: http://www.cnblogs.com/cgzl/p/901 ...

  8. LINQ学习笔记——(1)添加扩展方法

    目的:  对已存在类型的行为进行扩展 注意事项:    扩展方法是一种特殊的静态方法    扩展方法必须在静态类中定义    扩展方法的优先级低于同名的类方法    扩展方法只在特定的命名空间内有效 ...

  9. ipfs补充命令

    ipfs cat之后 将文件保存在指定的路径下 添加都文件夹下面 ipfs files cp /ipfs/QmSkyNME8YqndkNq7ovKphpYwjk2hEQ61P1pjSckqLP6zt ...

  10. 【转】Virtual DOM

    前言 React 好像已经火了很久很久,以致于我们对于 Virtual DOM 这个词都已经很熟悉了,网上也有非常多的介绍 React.Virtual DOM 的文章.但是直到前不久我专门花时间去学习 ...