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],当到达时间后,执行对应的方法 ...
随机推荐
- Linux objcopy命令
一.简介 [功能] 将目标文件的一部分或者全部内容拷贝到另外一个目标文件中,或者实现目标文件的格式转换. [描述] objcopy工具使用BFD库读写目标文件,它可以将一个目标文件的内容拷贝到另外一个 ...
- VMware Workstation不可恢复的错误:(vmui)
虚拟机中部署项目,由于项目的日志是gbk的,就把虚拟机中linux编码改成gbk了,结果问题来了,日志显示中文正常了,但是虚拟机运行一下就出错了,注意虚拟机出错,并没导致linux也挂掉,只是linu ...
- CentOS 6.5上MySQL安装部署与入门。
centos 6.5 yum 安装mysql1. 安装软件:yum install -y mysql-server mysql mysql-devel2.启动服务:service mysqld sta ...
- HBase 专题技术收录
HBase系列: 博客地址:http://www.cnblogs.com/panfeng412/tag/HBase/ 技术专题文章: HBase中MVCC的实现机制及应用情况 HBase在单Colum ...
- 【温故而知新-Javascript】使用 DOM 元素
1. 使用元素对象 HTMLElement对象提供了一组属性,可以用它们来读取和修改被代表的数据.下表介绍了这些属性. 下面代码展示了如何使用表中所列的一些基本属性. <!DOCTYPE htm ...
- 【实践】获取CKEditor的html文本、纯文本、被选中的内容及赋值
<%=Html.TextAreaFor(Model => Model.WORK_INTRODUCTION)%> <script type="text/javasc ...
- UVA 11992 Fast Matrix Operations (二维线段树)
解法:因为至多20行,所以至多建20棵线段树,每行建一个.具体实现如下,有些复杂,慢慢看吧. #include <iostream> #include <cstdio> #in ...
- HOJ 2275 Number sequence
题意:问你有多少个序列满足Ai < Aj > Ak and i < j < k. 思路:对每个数求它之前和之后分别有多少个个数比它小,两边相乘.最后求和.具体实现先用树状数组正 ...
- nginx 一二事(2) - 创建虚拟静态服务器
一.什么是nginx 是一个C语言开发的HTTP反向代理服务器,性能非常高 一个俄罗斯的哥们开发的,官方提供的测试性能能够达到5W的并发,我的天呐~,实际测试差不多是2W,而淘宝的牛人可以优化到200 ...
- 第13章 Windows内存体系结构
13.1 Windows的虚拟地址空间安排 13.1.1虚拟地址空间的分区(即虚拟地址空间布局) 进程的地址空间划分 分区 x86 32位 Windows 3GB用户模式下的x86 32位Window ...