JS代码:


<script type="text/javascript">
    window.οnlοad=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>

转载于:https://www.cnblogs.com/lvmylife/p/4385943.html

精通javascript笔记(智能社)——数字时钟相关推荐

  1. 【JS】javascript实现页面显示数字时钟

    js实现页面时钟效果 function showTime() {var show_day = new Array('星期日', '星期一', '星期二', '星期三', '星期四', '星期五', ' ...

  2. 精通javascript -——笔记

    firefox 和chrome都尽量遵循标准,不用为它们再分别编写代码了. chrome 默认为用户自动更新浏览器. 我我们讨论的现在浏览器的底线--ie9

  3. javascript笔记总结篇(全集合)

    <blockquote> 本篇文字较多,详细记录了JavaScript的知识要点, mark下共同学习,感谢~ 随手翻阅以前的学习笔记,顺便整理一下放在这里,方便自己复习,也希望你有也有帮 ...

  4. javascript笔记总结篇

    转载请声明出处 博客原文 随手翻阅以前的学习笔记,顺便整理一下放在这里,方便自己复习,也希望你有也有帮助吧 第一课时 入门基础 知识点: 操作系统就是个应用程序 只要是应用程序都要占用物理内存 浏览器 ...

  5. java数字时钟代码,[Java教程]Javascript 数字时钟

    [Java教程]Javascript 数字时钟 0 2012-10-14 22:00:11 Javascript代码部分: 在body标签中添加以下Html代码: 本文网址:http://www.sh ...

  6. [转]《精通Javascript》笔记:第六章(事件)

    <精通Javascript>笔记:第六章(事件) Published by sansan at 11:41 am under 前端|Front-End 事件模型:捕获和冒泡 通过oneve ...

  7. 基于51单片机的自动浇花系统设计/基于51单片机的智能抽奖系统控制设计/基于51单片机的数字时钟与日历显示控制设计 毕业设计

    1147基于51单片机的自动浇花系统设计 设计思路:通湿度传感器实时监测湿度,通过LCD显示出实时的湿度采集值,可以通过按键设定目标界限,当达到这个界限值时,浇花系统的电机装置运行. 电路包含:LCD ...

  8. 智能社JS学习笔记(一)

    前言 转眼工作即将半年,这段时间自学了UI,html和css方面能比较熟练的掌握了,写过两套小程序的模板但只知其然不知其所以然(还是因为自己js基础知识掌握的不够啊)用bootstrap之类的框架能写 ...

  9. 【单片机毕业设计】【mcuclub-312】数字时钟 | 万年历电子时钟 | 多功能时钟 | 智能闹钟 | 语音电子时钟

    设计简介: 项目名:基于单片机的数字时钟的设计-普通版.基于单片机的智能闹钟的设计.基于单片机的语音电子时钟的设计 单片机:STC89C52 功能简介: 1.通过DS18B20测量环境温度 2.通过D ...

最新文章

  1. 一步一步学List Control控件的用法(第二步)----创建第一行
  2. extjs store 复杂json_extjs 2.3 修复 jsonstore 嵌套多级引用数据NULL的BUG
  3. idea中查看类的继承关系图
  4. springboot elasticsearch vue ik中文分词器 实现百度/京东全文搜索
  5. json转excel_如何快速把json数据转到excel表格,方便个人查看
  6. 那朵美丽的格桑花,你是否依然绽放?
  7. linux驱动中使用定时器的设置
  8. linux进程共享内存通信,linux下进程通信方式--共享内存
  9. DM9000驱动分析之初始化
  10. chrome 无法下载文件软件问题
  11. java案例4-5图形的面积与周长计算程序
  12. 漫谈Anchor-based和Anchor-Free
  13. 产品冷思考:大而全or小而美如何选择?
  14. 前端处理简单的XSS(跨站脚本攻击)防护
  15. RNA保护液、FastAb佐剂、核酸提取试剂盒丨为您的实验锦上添花
  16. 快速将PDF转换为图片:使用在线转换器的步骤
  17. SAP UI5 应用开发教程之八十三 - SAP UI5 的自动化测试套件页面的开发步骤介绍试读版
  18. 人的心情就像四季一样!
  19. Android仿Google+,AppFrame框架搭建
  20. 一步步学习Python----10

热门文章

  1. 这8款浏览器兼容性测试工具,用了以后测试效率可以“起飞”~~
  2. python文件读取方法
  3. android 屏幕长宽,怎么获取手机屏幕长宽
  4. c语言小车倒车程序,STC12C5A60S2串口演示程序(C语言版)
  5. 基于迁移学习的辣椒病虫害搜索模型(裁剪病害区)
  6. python卸载干净_Python卸载不干净?Mac完全卸载python方法
  7. LabelImg,LabelMe工具标注后的图片数据增强
  8. 将Python和R整合进一个数据分析流程
  9. java第三方登录接口_第三方登录接入-qq,weibo-java
  10. 环信php创建群组,【PHP】接入环信创建群组和IM用户