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],当到达时间后,执行对应的方法 ...
随机推荐
- Hive variable demo
create table ori_trans (account string, maker string, tdate string) partitioned by (country string); ...
- docker containerd 中的create 容器操作
containerd的create container的API如下所示: type CreateContainerRequest struct { Id string BundlePath strin ...
- 【Android Demo】加载.gif格式图片
Android系统为了节省内存,一般不支持直接显示gif图片,即使你强制设置了,也只会显示图片的第一帧. 这个 Demo 是在网上看到的,是个思路,还是有些局限性,还是记录下,以后研究吧. 1.效果图 ...
- 最小生成树 2429: [HAOI2006]聪明的猴子
BZOJ 2429: [HAOI2006]聪明的猴子 Time Limit: 10 Sec Memory Limit: 128 MBSubmit: 877 Solved: 566[Submit][ ...
- IOS Orientation, 想怎么转就怎么转~~~
此博文主要针对IOS应用, 是屏幕旋转相关问题的一个总结. 主要内容有: IOS5,6,7不同版的适配. 强制旋转和自动旋转. 博客: http://www.cnblogs.com/jhzhu 邮箱: ...
- eclipse luna maven失效的原因
昨天发现单位里的eclipse中的maven直接不显示了,不能在 Windows-Preference 中显示maven 也不能新建maven工程,也不能maven-update,连STS(Sprin ...
- 怪物彈珠Monster Strike 攻略
火>水>木>光>暗 1.每天的曜日素材本,周一暗光,周二火,周参水,周四木,周五光乌龟,都是可以打整天的 2.另外补充,升经验用暗乌龟,切忌切记要塞给他随便一只烂宠升等,再吃掉 ...
- java 21 - 6 字符缓冲流的特殊方法以及该方法高效复制文件
字符缓冲流的特殊方法: A.BufferedWriter: public void newLine():根据系统来决定换行符 private static void write() throws IO ...
- C# 使用正则表达式去掉字符串中的数字，或者去掉字符串中的非数字
/// 去掉字符串中的数字 public static string RemoveNumber(string key) { ...
- main函数中argc和argv含义
在main函数中经常可以看到int main(int argc, char ** argv)的函数头,这里的形参int argc, char ** argv究竟是啥含义呢? &1 int ar ...