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. python--基本类型之字符串

    String(字符串): 定义和创建字符串: 定义:字符串是一个有序的字符的集合,用于存储和表示基本的文本信息.注意:字符串的单引号和双引号都无法取消特殊字符的含义,如果想让引号内 var1='Hel ...

  2. js学习日记-常用正则符号参考

    预定义类 量词 贪婪.惰性.支配性量词 前瞻 边界 RegExp是全局对象,RegExp.$1...$9是全局属性.当执行任意正则表达式匹配操作时,JavaScript会自动更新全局对象RegExp上 ...

  3. Qt 在Label上面绘制罗盘

    自己写的一个小小的电子罗盘的一个小程序,不过是项目的一部分,只可以贴绘制部分代码 效果如下图 首先开始自己写的时候,虽然知道Qt 的坐标系是从左上角开始的,所以,使用了算法,在绘制后,在移动回来,但是 ...

  4. 第十六篇 Python之迭代器与生成器

    一.迭代器 一. 递归和迭代 生活实例说明什么是递归和迭代 A想去腾达大厦,问B怎么走路,B 说我不知道,我给你问问C,C也不知道,C又去问D,D知道,把路告诉了C,C又告诉B,B最后告诉A, 这就是 ...

  5. 2015年开源前端框架盘点TOP20

    2015年,榜单根据github上star数作为排名依据.(榜单中大部分为组件式框架, react.Angular等基础框架不在此篇讨论) 1.Bootstrap 类别/语言:HTML.CSS.Jav ...

  6. BZOJ1270[BJWC2008]雷涛的小猫

    雷涛同学非常的有爱心,在他的宿舍里,养着一只因为受伤被救助的小猫(当然,这样的行为是违反学生宿舍管理条例的).在他的照顾下,小猫很快恢复了健康,并且愈发的活泼可爱了. 可是有一天,雷涛下课回到寝室,却 ...

  7. 容器基础(十): 使用kubernetes部署应用

    概述 使用之前的脚本(env/server.py 得到 env/server:v0.1 镜像, env/worker.py 得到 env/worker:v0.1)得到的镜像,在部署好kubernete ...

  8. Hyperledger04

    代码 'use strict'; var Fabric_Client = require('fabric-client'); var path = require('path'); var util ...

  9. Week8 Teamework from Z.XML-Z.XML游戏功能说明

    我们小组的游戏终于新鲜出炉了,好开心~ 快来看看有什么功能吧. 游戏目标::=打倒最多的敌人,获得积分,放松心情,获取快乐. 游戏菜单::= 关于+设置+帮助+积分榜+开始游戏吧 (截图还在路上..) ...

  10. postman工具【接口自动化测试关于断言】

    在使用postman工具进行接口自动化时我们经常需要断言来进行判断,结果到底是成功还是失败. 但在collection runner/Newman里如果不加断言,跑完后都无法知道是成功还是失败 断言是 ...