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的基本 ...
随机推荐
- EOS行为核心：解析插件chain_plugin
EOS提供了大量的rpc接口,其中功能性最强,使用最频繁的一部分接口是EOS的行为核心,由chain_api_plugin提供,具体实现是在chain_plugin. 关键字:EOS,区块链,chai ...
- vscode使用汇总——常用插件、常用配置、常用快捷键
一.代码提示快捷键设置:(keybindings.json) [ { "key": "ctrl+j", "command": "- ...
- Java可以像Python一样方便爬去世间万物
前言: 之前在大二的时候,接触到了Python语言,主要是接触Python爬虫那一块 比如我们常用的requests,re,beautifulsoup库等等 当时为了清理数据和效率,还专门学了正则表达 ...
- S5PV210 串口配置与实验(轮询方式)
S5PV210 UART 相关说明 通用异步收发器简称 UART, 即 UNIVERSAL ASYNCHRONOUS RECEIVER AND TRANSMITTER,它用来传输串行数据.发送数据时, ...
- IdentityServer4 中文文档 -3- （简介）已支持的规范
IdentityServer4 中文文档 -3- (简介)已支持的规范 原文:http://docs.identityserver.io/en/release/intro/specs.html 目 录 ...
- Jquery的ID选择器
<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></scri ...
- 菜鸟入门【ASP.NET Core】13:Individual authentication 模板、EF Core Migration
Individual authentication 模板 我们首先用VSCode新建一个mvc的网站,这个网站创立的时候回自动为我们创建Identuty Core以及EF Core的代码示例,我们可以 ...
- Redis基础认识及常用命令使用(一)--转载
Redis简介 redis是一个key-value存储系统.和Memcached类似,它支持存储的value类型相对更多,包括string(字符串).list(链表).set(集合)和zset(有序集 ...
- Java高级类特性(二)
一.static关键字 static关键字用来声明成员属于类,而不是属于类的对象.1). static (类)变量类变量可以被类的所有对象共享,以便与不共享的成员变量区分开来. static变量也称作 ...
- 最长子串(FZU2128)
最长子串 Time Limit:3000MS Memory Limit:65536KB 64bit IO Format:%I64d & %I64u Submit Status ...