精通javascript笔记(智能社)——数字时钟
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笔记(智能社)——数字时钟的更多相关文章
- 精通javascript笔记(智能社)——简易tab选项卡及应用面向对象方法实现
javascript代码(常规方式/面向过程): <script type="text/javascript"> window.onload=function(){ v ...
- 阅读《Android 从入门到精通》(15)——数字时钟
数字时钟(DigitalClock) java.lang.Object; android.view.View; android.widget.TextView; android.widget.Digi ...
- <精通JavaScript>---阅读笔记01
下面是阅读精通JavaScript书做的相关笔记. JS中的函数重载 函数重载必须依赖两件事情:判断传入参数数量的能力和判断传入参数类型的能力,在js中每个函数都带有一个仅在这个函数范围内作用的变量, ...
- JavaScript学习--(智能社视频)
JavaScript学习,这是智能社官网上的JS视频,讲解的挺不错的,就是没有视频的demo,在视频中附上自己编写的一些demo... 下载地址:http://pan.baidu.com/s/1cPz ...
- [Effective JavaScript 笔记] 第4条:原始类型优于封闭对象
js有5种原始值类型:布尔值.数字.字符串.null和undefined. 用typeof检测一下: typeof true; //"boolean" typeof 2; //&q ...
- [Effective JavaScript 笔记] 第5条:避免对混合类型使用==运算符
“1.0e0”=={valueOf:function(){return true;}} 是值是多少? 这两个完全不同的值使用==运算符是相等的.为什么呢?请看<[Effective JavaSc ...
- [Effective JavaScript 笔记]第28条:不要信赖函数对象的toString方法
js函数有一个非凡的特性,即将其源代码重现为字符串的能力. (function(x){ return x+1 }).toString();//"function (x){ return x+ ...
- js实现动态数字时钟
1.效果如下 2.html部分 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"&g ...
- 智能社官网顶部导航实现demo
从智能社的blue老师公开课中学习到了很多,在此表示感谢. 这个导航很好玩,于是就想实现一个. html <div id="box"> <ul> <l ...
随机推荐
- python--基本类型之字符串
String(字符串): 定义和创建字符串: 定义:字符串是一个有序的字符的集合,用于存储和表示基本的文本信息.注意:字符串的单引号和双引号都无法取消特殊字符的含义,如果想让引号内 var1='Hel ...
- BLE(Bluetooth Low Energy)---first part
原文地址:https://developer.android.com/guide/topics/connectivity/bluetooth-le.html#terms (本人是技术宅,翻译时候,只要 ...
- Hbase读写流程和寻址机制
写操作流程 (1) Client通过Zookeeper的调度,向RegionServer发出写数据请求,在Region中写数据. (2) 数据被写入Region的MemStore,直到MemStore ...
- 虚拟接VMnet1 和VMnet8的区别
vmnet1是host-only,也就是说,选择用vmnet1的话就相当于VMware给你提供了一个虚拟交换机,仅将虚拟机和真实系统连上了,虚拟机可以与真实系统相互共享文件,但是虚拟机无法访问外部互联 ...
- Linux下启动Oracle服务和监听程序步骤
Linux下启动Oracle服务和监听程序启动和关闭步骤整理如下: 1.安装oracle: 2.创建oracle系统用户: 3./home/oracle下面的.bash_profile添加几个环境变量 ...
- SSM框架学习思维导图
SSM框架学习思维导图 2017年08月11日 20:17:28 阅读数:1141 放上前段时间学习SSM框架以及Spring.SpringMVC.MyBatis的学习结果,输出思维导图一共四幅图.这 ...
- PostgreSQL 数据库升级
PostgreSQL软件版本升级后,需要使用pg_upgrade迁移旧版本的数据库,具体的操作参数可以参考官方文档,在此记录一下操作过程中出现的细节问题: 新版本软件在initdb的时候要保证loca ...
- 「暑期训练」「Brute Force」 Bitonix' Patrol (CFR134D1D)
题意 有n" role="presentation">nn个站点,排成圆形,每站间距m" role="presentation"> ...
- 「日常训练」 Finite or not? (CFR483D2C)
题意(Codeforces 984C) 给定p,q,b" role="presentation">p,q,bp,q,b,问pq" role="p ...
- Ubuntu16.04安装Zabbix
基于Zabbix+MySQL+Apache(可选) apt-get install php7.0-bcmath php7.0-xml php7.0-mbstring安装Zabbix所需的几个PHP模块 ...