js中定时器的使用
1.setInterval
<!DOCTYPE html>
<html>
<head>
<title>json</title>
<script type="text/javascript">
function show(){
alert("a");
}
//每隔1s执行一次函数
setInterval(show, 1000);
</script>
</head>
<body>
</body>
</html>
2.setTimeout
<!DOCTYPE html>
<html>
<head>
<title>json</title>
<script type="text/javascript">
function show(){
alert("a");
}
//1s之后执行该函数且只执行一次
setTimeout(show, 1000);
</script>
</head>
<body>
</body>
</html>
2.clearInterval
<!DOCTYPE html>
<html>
<head>
<title>json</title> </head>
<body>
<button type="button" id="open">开启</button>
<button type="button" id="close">关闭</button>
<script type="text/javascript">
function show(){
alert("a");
}
var oBtn1 = document.getElementById('open');
var oBtn2 = document.getElementById('close');
var timer = null;
oBtn1.onclick=function (){
timer = setInterval(show, 1000);
}
oBtn2.onclick = function (){
clearInterval(timer);
}
</script>
</body>
</html>
3.演示提示框的实现
<!DOCTYPE html>
<html>
<head>
<title>json</title>
<style type="text/css">
#div1{
width: 29px;
height: 30px;
background-color: red;
}
#div2{
width: 100px;
height: 100px;
background-color: blue;
margin-left: 50px;
display: none;
}
</style>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
<script type="text/javascript">
var oDiv1 = document.getElementById('div1');
var oDiv2 = document.getElementById('div2');
var timer = null;
oDiv1.onmouseover = oDiv2.onmouseover = function (){
clearTimeout(timer);
oDiv2.style.display = 'block';
}
oDiv1.onmouseout = oDiv2.onmouseout =function (){
timer = setTimeout(function(){
oDiv2.style.display = 'none';
}, 700);
}
</script>
</body>
</html>
4.无缝滚动
<!DOCTYPE html>
<html>
<head>
<title>json</title>
<style type="text/css">
*{margin: 0;padding: 0}
#div1{
height: 108px;
margin: 100px auto;
/*相对定位的作用是为了让ul能够以包含它的div为参考标准*/
position: relative;
overflow: hidden; /*将多余的四张图片遮住*/
}
#div1 ul{
position: absolute;
left: 0px;
top: 0px;
}
#div1 ul li{
list-style: none;
float: left;
height: 108px;
width: 178px;
}
</style>
</head>
<body>
<div id="div1">
<ul>
<li><img src="img/1.jpg" alt=""></li>
<li><img src="img/2.jpg" alt=""></li>
<li><img src="img/3.jpg" alt=""></li>
<li><img src="img/4.jpg" alt=""></li>
</ul>
</div>
<script type="text/javascript">
var oDiv = document.getElementById('div1');
var oUl = oDiv.getElementsByTagName('ul')[0];
//让4张图片变成8张图片
oUl.innerHTML += oUl.innerHTML;
// 给ul设置宽度以防止其父标签宽度太小将图片压下来
oUl.style.width = oUl.offsetWidth + 'px';
//div的宽度设置为ul的一般这样能实现滚动效果
oDiv.style.width = oUl.offsetWidth/2 + 'px';
setInterval(function(){
if(oUl.offsetLeft < - oUl.offsetWidth/2)
oUl.style.left = '0px';
oUl.style.left = oUl.offsetLeft - 5 +'px';
}, 50);
</script>
</body>
</html>
js中定时器的使用的更多相关文章
- 关于js中定时器的返回值问题
在js中,我们常常会用到定时器来处理各种各样的问题,当我们需要清除定时器的时候,我们常常会定义一个值来接受定时器的返回值,然后再把定义好的这个值写到清除定时器的括弧后面,如: var times = ...
- js中定时器调用函数时为什么会有引号
之前在学习的时候并没有发现的细节,关于js中,定时器的问题 这里我们写两个延时器 setTimeout(func, 0); setTimeout("func()", 0);定时器中 ...
- JS中定时器的返回数值ID值
定时器会返回一个数字值id,可以由clearInterval(id)或clearTimeout(id)来实现对对应定时器的清除. setInterval()/setTimeout()BOM中的Wind ...
- js中定时器相关
每三秒(3000 毫秒)弹出 "Hello" : setInterval(function(){ alert("Hello"); }, 3000); setIn ...
- js中定时器
周期性定时器:周期性的执行某段代码 window.setInterval() window.clearInterval() 示例: document.it = setInterval(fun ...
- js中定时器2
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- js中定时器使用方法经验总结
前言,最近在做一个音频播放项目的时候,碰到播放时间精度的问题,捣鼓了几天,最终巧妙的运用定时器去降低了错误发生频率 正题,下面是对定时器的使用总结,如有错误之处,请读者加以纠正. 延迟执行(1次) s ...
- js中定时器之一
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- 关于js中两种定时器的设置及清除
1.JS中的定时器有两种: window.setTimeout([function],[interval]) 设置一个定时器,并且设定了一个等待的时间[interval],当到达时间后,执行对应的方法 ...
随机推荐
- 利用Keydown事件阻止用户输入
先了解下各事件的区别 keydown:在控件有焦点的情况下按下键时发生 keypress:在控件有焦点的情况下按下键时发生 keyup: 在控件有焦点的情况下释放键时发生 意义 keypress主 ...
- html弹窗半透明
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="C ...
- MySQL数据库学习笔记（三）----基本的SQL语句
[声明] 欢迎转载,但请保留文章原始出处→_→ 生命壹号:http://www.cnblogs.com/smyhvae/ 文章来源:http://www.cnblogs.com/smyhvae/p/ ...
- java 21 - 4 字符流的文件复制操作以及简化
既然字节流可以复制文件,那么字符流当然也有. 同样的思路: 数据源: a.txt -- 读取数据 -- 字符转换流 -- InputStreamReader目的地: b.txt -- 写出数据 -- ...
- java 20 -1 递归的概述和案例
/* * 递归:方法定义中调用方法本身的现象 * * 方法的嵌套调用,这不是递归. * Math.max(Math.max(a,b),c); * * public void show(int n) { ...
- java 15-1 Collection集合的概述以及小功能介绍
集合的由来: 我们学习的是面向对象语言,而面向对象语言对事物的描述是通过对象体现的,为了方便对多个对象进行操作,我们就必须把这多个对象进行存储. 而要想存储多个对象,就不能是一个基本的变量,而应 ...
- java 13-1 数组高级二分查找
查找: 1.基本查找:数组元素无序(从头找到尾) 2.二分查找(折半查找):数组元素有序 pS:数组的元素必须有顺序,从小到大或者从大到小.以下的分析是从小到大的数组 二分查找分析: A:先对数组进行 ...
- 较多java书籍的网站 tools138.com
http://www.tools138.com/front/resource/java_book.jsp
- 10Mybatis_mybatis和hibernate本质区别和应用场景
hibernate:是一个标准的ORM框架(对象关系映射).入门门槛较高,不需要程序写sql语句,sql语句自动生产了. 对sql的优化比较困难. 应用场景:适用与需求变化不多的中小型项目中,比如后台 ...
- uart串口的调试学习
用FPGA设计了数据接收和发送模块,FIFO模块,此处FIFO调用的是Show-ahead模式,在下一篇博客中将会分析这个问题. 用串口调试工具发送数据,数据接收模块将接收到的串行数据转换为并行数据( ...