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的基本 ...
随机推荐
- filter listener interceptor的区别
转自: http://www.cnblogs.com/shangxiaofei/p/5328377.html https://www.cnblogs.com/jinb/p/6915351.html 一 ...
- JavaWeb学习 (十五)————JSP指令
一.JSP指令简介 JSP指令(directive)是为JSP引擎而设计的,它们并不直接产生任何可见输出,而只是告诉引擎如何处理JSP页面中的其余部分. 在JSP 2.0规范中共定义了三个指令: pa ...
- jQuery学习（1）猜数字游戏
jQuery是一个快捷.小型且特征丰富的JavaScript库.它使得HTML文档遍历及操作,事件处理,动画,Ajax等更简洁方便.它通过调用一个简单易用的API,就能在各种浏览器中使用.由于jQ ...
- Abp中自定义Exception的HttpStatusCode
Abp中在新版本中,抛出的异常(比如:UserFriendlyException)通过AjaxResponse封装后返回的时候,HttpStatusCode默认指定成了500. 对于一些默认封装好的处 ...
- Eclipse配置MyBatis的xml自动提示【转】
如果使用eclipse中,再写mybatis的xml文件的时候,没有提示,用“Alt+/”,不能把代码用快捷键敲出来: 可以试试以下几种方法: 第一种方法: 1.1:打开配置文件,按住Ctrl键,并且 ...
- PowerDesigner反向生成物理数据模型
什么是PowerDesigner Power Designer 是Sybase公司的CASE工具集,使用它可以方便地对管理信息系统进行分析设计,它几乎包括了数据库模型设计的全过程.利用Power De ...
- JS通过百度地图API获取当前定位信息
$(function(){ var latlon=null; //ajax获取用户所在经纬度 $.ajax({ url:"http://api.map.baidu.com/location/ ...
- Chart控件，chart、Series、ChartArea曲线图绘制的重要属性介绍
先简单说一下,从图中可以看到一个chart可以绘制多个ChartArea,每个ChartArea都可以绘制多条Series.ChartArea就是就是绘图区域,可以有多个ChartArea叠加在一起, ...
- List排序Collections.sort 重写compare
static List<Integer> intList = Arrays.asList(2,5,7, 3, 1); public static void main(String[] ar ...
- C#多线程——优先级
在我的公司这里,因为要跟很多特殊的设备打交道,所以会用到多线程的东西,那么我们在进行多线程处理的时候,怎么去设置优先级 我这里用听歌和下载小说做了个例子,我们用电脑的时候肯定是可以边听歌边下载小说的, ...