js基础练习三之数码时钟
这章节有两个实例,1,定时器的使用; 2,数码时钟;
用到的js知识:定时器,Date对象.
>>>>>定时器
开启定时器:
setInterval 间隔型
setTimeout 延时型
停止定时器:
clearInterval
clearTimeout
setInterval 间隔型 用法小列子:
window.onload=function()
{
var oBtn1=document.getElementById("btn1");
var oBtn2=document.getElementById("btn2");
var timer=null; oBtn1.onclick=function() //开启定时器
{
timer=setInterval(show,1000);
};
oBtn2.onclick=function() //关闭定时器
{
clearInterval(timer);
//clearTimeout(timer);
};
}
function show()
{
alert("定时器");
}
setTimeout 延时型 用法小例子,类似qq界面延迟显示详细资料效果
<script type="text/javascript">
window.onload=function()
{
var div1 = document.getElementById("div1");
var div2 = document.getElementById("div2");
var timer=null; div1.onmouseover=function()
{
setTimeout(function(){ div2.style.display="block"; },1000);
};
div1.onmouseout=function()
{
timer = setTimeout(function(){ div2.style.display="none"; },1000);
};
div2.onmouseover=function()
{
div2.style.display="block";
clearTimeout(timer);
};
div2.onmouseout=function()
{
setTimeout(function(){ div2.style.display="none";},1000);
};
};
</script>
>>>>>>>>>>数码时钟:效果思路
*获取系统时间
Date对象
getHours,getMinutes,getSeconds
Date对象的其他方法:
年 .getfullYear()
月 .getMonth() (月从0开始)
日 .getDate()
星期 .getDay()
*显示系统时间
字符串连接
空位补零
*设置图片路径
charAt方法
<script type="text/javascript">
function toDouble(num)
{
if(num<10)
{
return "0" + num;
}
else
{
return num;
}
}
window.onload=function(){
var oBtn = document.getElementById("btn1");
var aImg = document.getElementsByTagName("img");
//oBtn.onclick=function(){ setInterval(updatetime,1000); }; function updatetime() //更新时间
{
var oDate = new Date();
var i=0;
//var imgArr = ["1","6","5","8","5","6"];
var imgArr = toDouble(oDate.getHours()) + toDouble(oDate.getMinutes()) + toDouble(oDate.getSeconds()) + '';
//alert(imgArr);
for(i=0; i < aImg.length; i++)
{
aImg[i].src = "pic/" + imgArr.charAt(i) + ".jpg";
}
}
setInterval(updatetime,100);
updatetime();
};
</script>
类似效果,这里只有时间没有日期,相应的星期可用switch函数:
function toChines(numDay)
{
var numDay;
switch(numDay){
case 0:
return "星期日";
case 1:
return "星期一";
case 2:
return "星期二";
case 3:
return "星期三";
case 4:
return "星期四";
case 5:
return "星期五";
case 6:
return "星期六";
}
js基础练习三之数码时钟的更多相关文章
- Three.js基础探寻三——透视投影照相机
本篇主要介绍Three.js照相机中的透视投影照相机. 上一篇:正交投影照相机 5.透视投影照相机构造函数 透视投影照相机(Perspective Camera)的构造函数是: THREE.Persp ...
- JS基础(三)
25.使用JS操作CSS样式 DHTML表示动态HTML(Dynamic HTML,DHTML),不是标记语言,只是一种由微软提出的网页脚本化概念,目标是结合JS+HTML+CSS设计动态特效,得到很 ...
- Node.js基础学习三之登录功能
本篇介绍Node.js访问数据库并返回数据给客户端 需求基于Node.js学习(二) 数据库请下载:user.sql 1.创建user 实体类(model-user.js) function User ...
- JS基础(三)语句
一.判断语句(PS:一般情况下判断条件最终应该是一个布尔值.) 1.if语句 1)基本格式 if(判断条件){ 如果判断条件成立则执行的语句 }else{ 如果判断条件不成立则执行的语句 } 2)扩展 ...
- [妙味JS基础]第三课:自定义属性、索引值
知识点总结 自定义属性 元素.自定义属性 = 值: 比如: oDiv.abc = 100; =>abc为自定义属性 索引值 index =>也是自定义属性 oDiv.index = '' ...
- js 基础笔记三
词法结构: 1:区分大小写 2:特殊字符的区分,unicode转义 3:注释, // ; /* */ ; 4 : 标识字符和保留字 数据类型: 1原始类型 数字,字符串,布尔值.特殊的原始值(nu ...
- 通过JS制作一个简易数码时钟
设计思路: 数码时钟即通过图片数字来显示当前时间,需要显示的图片的URL根据时间变化而变化. a.获取当前时间Date()并将当前时间信息转换为一个6位的字符串; b.根据时间字符串每个位置对应的数字 ...
- NodeJs>------->>第三章:Node.js基础知识
第三章:Node.js基础知识 一:Node.js中的控制台 1:console.log.console.info 方法 console.log(" node app1.js 1> ...
- JS基础入门篇(三十五)—面向对象(二)
如果没有面向对象这种抽象概念的小伙伴,建议先看一下我写的JS基础入门篇(三十四)-面向对象(一)
随机推荐
- Undefined symbols for architecture x86_64: "_OBJC_CLASS_$_The49DayPersonalFullscreenGiftModel", referenced from: objc-class-ref in The49DayPersonalRoomGiftModel.o ld: symbol(s) not found for a
Undefined symbols for architecture x86_64: "_OBJC_CLASS_$_The49DayPersonalFullscreenGiftModel&q ...
- 修改AspNetPager的CustomInfoHTML,添加自定义样式
AspNetPager控件有一个属性叫CustomInfoHTML,可以把它写在前台页面,如下: <webdiyer:AspNetPager ID=" HorizontalAlign= ...
- arp欺骗技术
ARP欺骗技术-获取内网目标IP访问图片! 简介: ARP(Address Resolution Protocol,地址解析协议)是一个位于TCP/IP协议栈中的网络层,负责将某个IP地址解析 ...
- ehcache memcache redis 三大缓存
最近项目组有用到这三个缓存,去各自的官方看了下,觉得还真的各有千秋!今天特意归纳下各个缓存的优缺点,仅供参考! Ehcache 在Java项目广泛的使用.它是一个开源的.设计于提高在数据从RDBMS ...
- localstorage 的属性改变问题
localstorage 得到的是对象,我们打算改对象的某个属性的值,方法是 通过临时变量对象得到,改变临时变量,然后把临时变量给localstorage的方法 var localS = windo ...
- IOS 绘图教程Quartz2D
http://www.cocoachina.com/industry/20140115/7703.html http://www.cnblogs.com/wendingding/p/3803020.h ...
- scala的面向对象编程
1.scala的简单编程 2.构造方法 辅助构造函数是在主构造函数没有的情况下,执行的构造函数. 3.object的介绍 4.半生类和半生对象 5.半生的案例程序(半生类可以调用半生) 6.apply ...
- Win32 设置窗口透明度 SetLayerTransparent
注意: 在调用SetLayeredWindowAttributes 之前,需要给窗口加上WS_EX_LAYERED属性,否则会无效 void SetLayerTransparent(HWND hWnd ...
- JAVA中使用FTPClient上传下载
Java中使用FTPClient上传下载 在JAVA程序中,经常需要和FTP打交道,比如向FTP服务器上传文件.下载文件,本文简单介绍如何利用jakarta commons中的FTPClient(在c ...
- jqxComboBox
var uptype_source = [{ "TYPE_DESC": "总额度", " }, { "TYPE_DESC": &q ...