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],当到达时间后,执行对应的方法 ...
随机推荐
- 详解apache的allow和deny
今天看了一篇关于apache allow,deny的文章收获匪浅,防止被删,我直接摘过来了,原文地址!!! !http://www.cnblogs.com/top5/archive/2009/09/2 ...
- 译文：Nesting Your BEM?
原文链接:http://csswizardry.com/2016/11/nesting-your-bem/ 在我开始这篇文章之前,我得说这不是一个建议或者是新的"练习指南".这只是 ...
- Openstack-Ceilometer-SNMP的使用
1. 物理服务器配置 1.1安装 #yum install -y net-snmp net-snmp-utils 1.2 配置 复制[附件]中snmpd.conf文件到/etc/snmp/目 ...
- MongoDB学习（二）Windows环境安装MongoDB
MongoDB的官方下载站是http://www.mongodb.org/downloads,可以去上面下载最新的程序下来. 在下载页面可以看到,对操作系统支持很全面,OS X.Linux.Windo ...
- ZGrapher 画函数曲线图的工具
可以下载个绿色版,我下载的是 ZGrapher 1.4 绿色版.下面先看下图出来的图: 然后可以在“file"->"Save as Picture ..." -&g ...
- 错误异常 （1）Android Studio错误提示：Gradle project sync failed. Basic functionality (eg. editing, debugging) will not work properly
[已解决]Android Studio错误提示:Gradle project sync failed. Basic functionality (eg. editing, debugging) wil ...
- grunt的使用方法，环境配置和插件安装
虽然现在grunt的用的越来越少了,但是插件数量还是相当多的,另外grunt和gulp的使用相当相似: grunt需要安装node和npm 验证node是否安装:node -v 验证npm是否安装:n ...
- (copy)C#时间日期操作
copy to:http://www.cnblogs.com/loveme123/archive/2012/06/27/2565547.html 一.C# 日期格式 DateTime dt = Da ...
- nginx反向代理+缓存开启+url重写+负载均衡(带健康探测)的部署记录
在日常运维工作中,运维人员会时常使用到nginx的反向代理,负载均衡以及缓存等功能来优化web服务性能. 废话不多说,下面对测试环境下的nginx反向代理+缓存开启+url重写+负载均衡(带健康探测) ...
- Saltstack-自动化部署
Saltstack概述 Salt一种全新的基础设施管理方式,部署轻松,在几分钟内可运行起来,扩展性好,很容易管理上万台服务器,速度够快,服务器之间秒级通讯. salt底层采用动态的连接总线, 使其可以 ...