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],当到达时间后,执行对应的方法 ...
随机推荐
- android去掉顶部标题栏
在清单文件(manifest.xml)里面实现 <application> <activity android:name="cn.ui.activity.UserRegAc ...
- WCF 删除队列
Configuration config = ConfigurationManager.OpenExeConfiguration (ConfigurationUserLevel.None); Serv ...
- Flume practices and sqoop hive 2 oracle
#receive the file flume-ng agent --conf conf --conf-file conf1.conf --name a1 flume-ng agent --conf ...
- 【读书笔记《Android游戏编程之从零开始》】17.游戏开发基础（游戏适屏的简述和作用、让游戏主角动起来）
1.游戏适屏的简述和作用 由于市面上安装 Android 系统的手机不断增多,出现了各种分辨率.各种屏幕尺寸的Android 系统手机.为了保证一个游戏或者一个软件能在所有的 Android 手机上正 ...
- 边工作边刷题：70天一遍leetcode: day 71-2
One Edit Distance 要点:有两种解法要考虑:已知长度和未知长度(比如只给个iterator) 已知长度:最好不要用if/else在最外面分情况,而是loop在外,用err记录misma ...
- IIS关于“ 配置错误 不能在此路径中使用此配置节”的解决办法
IIS关于“ 配置错误 不能在此路径中使用此配置节”的解决办法 原文链接:http://www.cnblogs.com/200325074/p/3679316.html 今天刚安装好IIS8.5, 我 ...
- 分布式服务框架 Zookeeper(转)
分布式服务框架 Zookeeper -- 管理分布式环境中的数据 Zookeeper 分布式服务框架是 Apache Hadoop 的一个子项目,它主要是用来解决分布式应用中经常遇到的一些数据管理问题 ...
- POJ 2263 Heavy Cargo 多种解法
好题.这题可以有三种解法:1.Dijkstra 2.优先队列 3.并查集 我这里是优先队列的实现,以后有时间再用另两种方法做做..方法就是每次都选当前节点所连的权值最大的边,然后BFS搜索. ...
- SqlMapConfig.xml中的setting属性设置
<settings cacheModelsEnabled="true" lazyLoadingEnabled="false" en ...
- 使用EditText+ListView并结合TextWatcher实现输入关键字筛选数据
想必大家应该遇到过这样的情况,当点击Spinner控件后弹出的列表内容超多,一个一个滑动着去寻找所要的项很麻烦,尤其是当自己知道想要选择的内容,这时候如果我们只需要输入某些关键字,就可以讲上百条数据筛 ...