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的基本 ...
随机推荐
- vue-01
1, vue优势 虚拟daom, 易用, 灵活, 高效 2, 介绍 渐进式框架 3, 兼容性 es5的星特性, 不支持ie8 4, 新版本内置 webpack
- Oracle添加定时任务
1.创建存储过程 注:执行语句后,如果需要请添加commit 2.添加定时job,执行存储过程 declare job_delete number; begin dbms_job.submit( jo ...
- U3D MonoBehaviour
一.简介 MonoBehaviour是每个脚本派生类的基类,它定义了一个脚本文件从最初被加载到最终被销毁的一个完整过程. 这个过程通过对应的方法体现出来,在不同的方法完成不同的功能,我们把这些方法称为 ...
- Redis服务搭建与基础功能示例
一.Redis简介 Redis是一个非关系型远程内存数据库,它也是一个Key-value模型的数据库.Redis支持5种数据类型(string.list.set.sorted set.hash),可以 ...
- EXTJS4 Grid Filter 插件的使用 与后台数据解析------Extjs 查询筛选功能的实现
先汗一个,一个小功能又踢腾了一天.本来这个带Demo的,但是上面介绍的不是很详细.用的时候问题不大,主要问题在文件导入方面.以为这个插件的使用和其他的不一样. 1.首先是需要引入文件的位置:如图 需要 ...
- （转）Linux企业运维人员最常用150个命令汇总
目录 线上查询及帮助命令(2个) 文件和目录操作命令(18个) 查看文件及内容处理命令(21个) 文件压缩及解压缩命令(4个) 信息显示命令(11个) 搜索文件命令(4个) 用户管理命令(10个) 基 ...
- Design--源自生活美学的色彩搭配网站(design-seeds)
All the flowers of all the tomorrows are in the seeds of today. 色彩搭配网站--design-seeds.com // 所有的颜色值都是 ...
- ngx-echart地图
一.运行截图 二.代码 html代码: <div style="padding:24px;"> <p style="font-size: 16px;ma ...
- spring boot 随手记
1.当加入security 起步依赖后,如果不做任何手动配置的话,默认会跳转到一个登录页面,不管你喜不喜欢,所有的请求都必须登录,用户名和密码是保存在内存中的, 默认用户名是user 密码在控制台里 ...
- cf666E. Forensic Examination(广义后缀自动机 线段树合并)
题意 题目链接 Sol 神仙题Orz 后缀自动机 + 线段树合并 首先对所有的\(t_i\)建个广义后缀自动机,这样可以得到所有子串信息. 考虑把询问离线,然后把\(S\)拿到自动机上跑,同时维护一下 ...