3.定时器的使用（以通俗易懂的语言解释JavaScript）
1.定时器的作用：
开启定时器：setInterval -->间隔型
setTimeout -->延时型
区别：setInterval会一直执行，应用如微博间隔一段时间不断请求后台数据，看是否有新消息，而setTimeout仅执行一次
停止定时器：clearInterval、clearTimerout
例子：定时器的开启和关闭
var oBtn1=document.getElementById('btn1');
var oBtn2=document.getElementById('btn2');
var timer=null; //这里需注意
oBtn1.onclick=function (){
timer=setInterval(function (){
alert('a');
}, 1000);
};
oBtn2.onclick=function (){
clearInterval(timer); //需指定具体关闭的是哪个定时器
};
2.数码时钟：
实现效果：
效果思路：设置图片路径
获取时间：Date对象、getHours、getMinutes、getSeconds
显示时间：字符串连接、空位补零
代码实现：
布局：
<body style="background:black; color: white; font-size:50px;">
<img src="img/0.png" />
<img src="img/0.png" />
:
<img src="img/0.png" />
<img src="img/0.png" />
:
<img src="img/0.png" />
<img src="img/0.png" />
</body>
逻辑：
//把一位数补零变成两位
function toDou(n){
if(n<10){
return '0'+n;
}
else{
return ''+n; //加空字符串可以保证返回的一定是字符串
}
} window.onload=function (){
var aImg=document.getElementsByTagName('img'); function tick(){
var oDate=new Date(); var str=toDou(oDate.getHours())+toDou(oDate.getMinutes())+toDou(oDate.getSeconds()); for(var i=0;i<aImg.length;i++){
//不兼容IE7，改用charAt方法，取字符串的某一位，此处为第三个兼容
//aImg[i].src='img/'+str[i]+'.png';
aImg[i].src='img/'+str.charAt(i)+'.png';
}
}
setInterval(tick, 1000); //1秒自动刷新，执行函数，解决时钟不动
tick(); //解决刷新时1秒延时问题
};
Date对象其他方法：
var oDate=new Date(); //alert(oDate.getFullYear());
//alert(oDate.getMonth()+1); //月份需+1
//alert(oDate.getDate());
alert(oDate.getDay()); //星期0,1,2,3,4,5,6 ->日一二三四五六
3.延时提示框：
实现效果类似鼠标移入QQ头像时，弹出一个信息框，移出信息框时，延时一段时间后消失，并且鼠标在头像和信息框间快速移入移出时无变化。
实现效果：
实现逻辑：
var oDiv1=document.getElementById('div1');
var oDiv2=document.getElementById('div2');
var timer=null;
//注意定时器的清除，可消除快速移入移出头像和提示框时带来的抖动
oDiv1.onmouseover=function (){
clearTimeout(timer);
oDiv2.style.display='block';
};
oDiv1.onmouseout=function (){
timer=setTimeout(function (){
oDiv2.style.display='none';
}, 500);
};
oDiv2.onmouseover=function (){
clearTimeout(timer);
};
oDiv2.onmouseout=function (){
timer=setTimeout(function (){
oDiv2.style.display='none';
}, 500);
};
整合重复代码：
var oDiv1=document.getElementById('div1');
var oDiv2=document.getElementById('div2');
var timer=null;
oDiv2.onmouseover=oDiv1.onmouseover=function ()
{
clearTimeout(timer);
oDiv2.style.display='block';
};
oDiv2.onmouseout=oDiv1.onmouseout=function ()
{
timer=setTimeout(function (){
oDiv2.style.display='none';
}, 500);
};
4.无缝滚动--基础：
物体运动基础：
让Div移动起来
offsetLeft的作用-->获取物体的左边距，优点是可以考虑所有影响物体位置的因素（包括left、margin等）之后得出的一个最终值
用定时器让物体连续运动
注意：position需为absolute，然后改变其left和top值
小例子：让一个div从左至右水平滚动，只改变其left值
//#div1 {width:200px; height:200px; background:red; position:absolute; left:0; top:50px;}
setInterval(function (){
var oDiv=document.getElementById('div1');
oDiv.style.left=oDiv.offsetLeft+10+'px';
}, 30);
（ps：本内容整理于blue视频教程及个人学习过程中总结，持续更新中）
3.定时器的使用（以通俗易懂的语言解释JavaScript）的更多相关文章
- 2.js深入（以通俗易懂的语言解释JavaScript）
1.函数返回值: 即函数的执行结果 可以没有return 经验:一个函数应该只返回一种类型的值 2.函数传参 可变参(不定参):arguments ——>(参数的个数可变,参数数组) 例子1:求 ...
- 1.js基础（以通俗易懂的语言解释JavaScript）
1.JavaScript组成: ECMAScript: 解释器.翻译 -->几乎没有兼容问题 DOM: Document Object Model -->有一些操作不兼容 BOM: Bro ...
- 通俗易懂的语言描述JavaScript原型
这是一个翻译.原文地址http://javascriptissexy.com/javascript-prototype-in-plain-detailed-language/# 原型(prototyp ...
- 如何才能通俗易懂的解释javascript里面的"闭包"？
看了知乎上的话题 如何才能通俗易懂的解释javascript里面的‘闭包’?,受到一些启发,因此结合实例将回答中几个精要的答案做一个简单的分析以便加深理解. 1. "闭包就是跨作用域访问变量 ...
- 谁能用通俗的语言解释一下什么是 RPC 框架
转载自知乎:https://www.zhihu.com/question/25536695 知乎上很多问题的答案还是很好的,R大就经常在上面回答问题~ 谁能用通俗的语言解释一下什么是 RPC 框架? ...
- 关于JAVA,特点，历史，编译式的语言&解释式的语言，什么是java？JDK？DOS？一次编译到处运行原理。
1.java语言的特点: 简单的:面向对象的:跨平台(操作系统)的(一次编译,到处运行):高性能的: 2.类名的首字母大写,方法小写: 3.历史: java2(即java),为什么加个2呢?1998年 ...
- ECMAScript进化史(1):话说Web脚本语言王者JavaScript的加冕历史
互联网起火-Web时代的来临 在行文之前,反手就安利一下<浏览器史话中chrome霸主地位的奠定与国产浏览器的割据混战>. 浏览器始祖NCSA Mosaic在1993年1月发布(于1992 ...
- sqli篇-本着就了解安全本质的想法，尽可能的用通俗易懂的语言去解释安全漏洞问题
前言 最早接触安全也是从xss攻击和sql注入攻击开始的. 和xss一样屡居OWASPtop10 前三名的漏洞,sqli(sql Injection)sql注入攻击也是web安全中影响较大和影响范围较 ...
- XXE篇-本着就了解安全本质的想法，尽可能的用通俗易懂的语言去解释安全漏洞问题
0x01 Brief Description XXE(XML External Entity) XML外部实体攻击也是常见的web漏洞之一,在学习这个漏洞之前有必要了解一下xml,可以参考w3c的基本 ...
随机推荐
- ajaxFileUpload带参数提交(亲测可用)
使用ajaxFileUpload上传文件时,有时需要带参数提交,网上有很多资料说使用data,但其实要使用data带参数是需要修改的,否则后台是获取不到的. 分析原因: ajaxFileUpload为 ...
- github总结(1)--怎样创建一个新的仓库
第一步:登录账号,进入github,创建一个新的空仓库 第二步:打开电脑上已经安装好的git-bash,切换至项目所在本地目录 第三步:创建本地仓库及提交文件到本地仓库(用windows命令行或者gi ...
- css3学习--select怎么去掉默认样式
select { 2. /*Chrome和Firefox里面的边框是不一样的,所以复写了一下*/ 3. border: solid 1px #000; 4. /*很关键:将默认的select选择框样式 ...
- 史上最全的 Python 3 类型转换指南
int 支持转换为 int 类型的,仅有 float.str.bytes,其他类型均不支持. float -> int 会去掉小数点及后面的数值,仅保留整数部分. int(-12.94) # - ...
- 程序员快速掌握的UI设计技巧
一.概要 功能与内在很关键,UI与外表也重要. 1.1.选择主色调 1.1.1.三原色 三原色指色彩中不能再分解的三种基本颜色,我们通常说的三原色,即红.黄.蓝.三原色可以混合出所有的颜色,同时相加为 ...
- SQL 两个时间获取相差秒数
SELECT DATEDIFF(SECOND, '2005-12-31 23:59:00', '2006-01-01 00:00:00');
- 数据库部分（MySql）_1
SQL规范 以 “ ; ” 结尾:关键字之间要有空格(可以由多个空格):SQL语句中可以一个或多个换行:关键字不区分大小写. 数据库相关SQL 查询所有数库库: show databases; 创建数 ...
- win10 uwp 渲染原理 DirectComposition 渲染
本文来告诉大家一个新的技术DirectComposition,在 win7 之后(实际上是 vista),微软正在考虑一个新的渲染机制 在 Windows Vista 就引入了一个服务,桌面窗口管理器 ...
- 命令查看当前电脑安装所有版本.NET Core SKD
dotnet --version 查看当前使用版本 dotnet --info 安装的所有版本 包括版本地址 也可用命令帮助 dotnet help
- Matlab .asv是什么文件
有时在存放m文件的文件夹中会出现*.asv asv 就是auto save的意思,*.asv文件的内容和相应的*.m文件内容一样,用记事本和matlab都能打开它.它可以作为*.m文件的"备 ...