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的基本 ...
随机推荐
- hexo自动部署到git、ftp（虚拟主机等）、云服务器的方式
自动部署很有用,当你写完文章后,直接使用hexo d就可以自动更新你的网站了 部署到git 首先你需要在你的blog下安装git deployer插件:npm install hexo-deploye ...
- 如何将自定义的搜索参数便捷的添加到js方式的bootstrap table的参数中
页面: <div> <form id="exp_form"> 查询参数... <button type="button" oncl ...
- LeetCode 任务调度器-Python3<八>
题目:https://leetcode-cn.com/problems/task-scheduler/description/ 给定一个用字符数组表示的 CPU 需要执行的任务列表.其中包含使用大写的 ...
- TCP/IP 详解
分层 每一层负责不同的功能: 链路层 有时也称作数据链路层或网络接口层, 通常包括操作系统中的设备驱动程序和计算机 中对应的网络接口卡.它们一起处理与电缆(或其他任何传输媒介)的物理接口细节. ...
- [css] css3 中的新特性加强记忆
css3被拆分成如下的小模块,选择器,盒模型,背景和边框,文字特效,2D/3D转换,动画,多列布局和用户界面 2D转换 使用transform:属性来为元素设置2D转换,兼容浏览器加前缀 –webki ...
- 初学HTML-5
表格标签:用来给一堆数据添加表格语义. 格式:<table> <tr> <td></td> </tr> </table> tab ...
- bootstrap网站后台从设计到开发之登录
节后综合征缓了两天,今天把登录界面的主要后台代码分享给大家. protected void Page_Load(object sender, EventArgs e) { if (!Page.IsPo ...
- Mysql数据库单表查询
1.单表查询语法 #查询数据的本质:mysql会到你本地的硬盘上找到对应的文件,然后打开文件,按照你的查询条件来找出你需要的数据.下面是完整的一个单表查询的语法 select * from,这个sel ...
- HTML5本地存储localStorage与sessionStorage详解
前言 在最近的项目中用到了html5的本地存储,下面总结一下. 1.html5几种存储形式 本地存储(localStorage && sessionStorage) 离线缓存(appl ...
- HTML中令人惊喜的全局属性
1.accesskey 属性 : 规定激活元素的快捷键. 浏览器支持:几乎所有浏览器均 accesskey 属性,除了 Opera. 定义和用法 accesskey 属性规定激活(使元素获得焦点)元素 ...