h5~js~定时器
Posted tigercnblog
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了h5~js~定时器相关的知识，希望对你有一定的参考价值。
定时器
定时器两种讲解
1.setTimeout表示多少号秒之后执行函数，此函数只执行一次setTimeout(“fun()”,5000)
2．setInterval表示每隔多少毫秒执行一次，setInterval(fun(),1000)一定要注意两者之间的区别，setTimeout当然也可执行多次定时，需要将函数循环重复执行
3.如果需要取消定时器 两种定时器方法是一样的 如Interval 设置一个变量 =setInterval(fun,1000)，然后使用clearInterval（变量）
示例如下：
setTimeOut示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>定时器的使用</title>
</head>
<body>
<input type="button" onclick="count()" value="开始">
<input type="button" onclick="start()" value="计时器开始">
<input type="button" onclick="stop()" value="停止计时">
<div id="content"><img src="../img/01.jpg" width="30%" height="30%"></div>
<div id="num"></div>
function count(){
//设置3秒后执行代码
//setTimeout("alert(‘时间到了‘)",3000);
//设置5秒之后图片消失
setTimeout("hide();",5000);
}
function hide(){
document.getElementById("content").innerHTML="";
}
//全局变量
var cou=0;
var t1=null;
function start(){
cou=cou+1;
document.getElementById("num").innerHTML="计数："+cou;
t1=setTimeout("start();",1000);//1000毫秒以后再次调用自己
}
function stop(){
clearTimeout(t1);
}
</body>
</html>
定时跳转
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>定时跳转</title>
</head>
<body>
<h1 id="h">
var mowh = document.getElementById("h");
var num=10;
setTimeout(change,1000);
function change(){
if(num>0)
{
num--;
mowh.innerHTML="抢红包倒计时:"+num;
setTimeout(change,1000);
}else{
location.href="http://www.jd.com";
}
}
</body>
</html>
SetInterval定时器
示例1：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>实现一个计数器</title>
</head>
<body>
<input type="button" onclick="start();" value="开始计数" >
<input type="button" onclick="stop();" value="停止计数">
<h1 id="tt">
var count=0;
var task1=0;
function start(){
//每隔1000毫秒来执行1次startCount
task1=setInterval(startCount,1000);
}
function startCount(){
count++;
document.getElementById("tt").innerHTML="计数:"+count;
}
function stop(){
clearInterval(task1);
}
</body>
</html>
示例2：
<!DOCTYPE html>
<html>
<!--定时器有两种
1.setTimeout 表示多少毫秒之后执行函数，此函数只执行一次 setTimeout("fun();",5000)
2.setIntervaj 表示每隔多少毫秒执行函数 setInterval(fun,1000) 一定要注意两种方法里面的函数表达形式
setTimeout当然也可以执行多次定时，需要将函数循环重复执行
3.如果需要取消定时器
两种定时器方法是一样的 如Interval 设置一个变量=setInterval(fun,1000)
然后使用clearInterval（变量）-->
<head>
<meta charset="UTF-8">
<title>setInterval定时器</title>
#rack{
width:200px;
height:100px;
position: absolute;
top:100px;
border:1px solid paleturquoise;
background:orange;
}
</head>
<body>
<!-- 下面是一个通过setInterval实现div不断从左向右移动的实例：-->
<input type="button" value="点击开始" onclick="start()">
<input type="button" value="结束" onclick="end();" />
<div id="rack"></div>
// var ra = document.getElementById("rack");
// var x= ra.style.left;
// var exe;
var x=0;
var exe =null;
function start(){
exe=setInterval(move,1000);
}
function move(){
/* x=eval(x+100); */ //eval函数自动计算
//ra.style.left = x + "px";
x=x+20;
var ra = document.getElementById("rack");
ra.style.left = x + "px";
}
function end(){
clearInterval(exe);
document.getElementById("rack").style.display="none";
}
<!--
var num=0;
function start(){
/*var str = document.getElementById("rack");*/
var str = setInterval(count,1000);
}
function count(){
num++;
document.getElementById("rack").innerHTML="计数:"+num;
}
function end(){
clearInterval(str);
}
-->
</body>
</html>
实例三：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>会动的div</title>
*{
margin:0px;
padding:0px;
}
#aa{
width:200px;
height:200px;
background: blue;
position: absolute;
top:200px;
left: 10px;
}
#bb{
width:200px;
height:200px;
background: blue;
position: absolute;
top:200px;
right:10px;
}
</head>
<body>
<div id="aa">
我是程龙，我要飞飞
</div>
<div id="bb">
我是程龙，我也要飞飞
</div>
var x=0;
setInterval(function(){
x=x+1;
var str=document.getElementById("aa");
str.style.left= x +"px";
},30);
setInterval(function(){
x=x+1;
var str=document.getElementById("bb");
str.style.right= x +"px";
},30);
</body>
</html>
多级菜单：
示例四：多级菜单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>多级菜单</title>
body{
margin:0;
padding:0;
}
#images{
position: absolute;
width: 100%;
margin-top:110px;
}
#img{
width: 1000px;
position: relative;
left:50%;
margin-left:-500px;
-webkit-box-shadow: 0 0 8px rgba(0,0,0,0.6);
}
#number{
width: 200px;
position: absolute;
left:800px;
top:190px;
z-index: 10;
}
#middle{
width: 1000px;
position: relative;
left:50%;
margin-left:-505px;
}
</head>
<body>
<div id="images">
<div id="middle">
<div id="number">
</div>
<img src="../img/1.jpg" id="img">
</div>
</div>
var img = document.getElementById("img");
var sum = 0;
var src = ["../img/01.jpg","../img/02.jpg","../img/03.jpg","../img/04.jpg","../img/05.jpg","../img/06.jpg"];
var t = "";
function change(){
sum = (sum+1)%6;
img.src = src[sum];
var everdiv = number.getElementsByTagName("div");
for(var m=0;m<everdiv.length;m++){
for(var n=0;n<everdiv.length;n++){
everdiv[n].style.backgroundColor = "rgba(0,0,0,0.7)";
everdiv[sum].style.opacity = "0";
}
everdiv[sum].style.backgroundColor = "black";
everdiv[sum].style.opacity = "1";
}
}
t = setInterval(change,2000);
var number = document.getElementById("number");
var figure = ["1","2","3","4","5","6"];
for(var n=0;n<figure.length;n++){
var newdiv = document.createElement("div");
number.appendChild(newdiv);
newdiv.style.height = "25px";
newdiv.style.color = "white";
newdiv.style.paddingLeft = "20px";
newdiv.style.marginTop = "5px";
newdiv.style.lineHeight = "25px";
newdiv.style.backgroundColor = "rgba(0,0,0,0.7)";
newdiv.innerText = figure[n];
}
var everdiv = number.getElementsByTagName("div");
everdiv[0].style.backgroundColor = "black";
for(var n=0;n<everdiv.length;n++){
everdiv[n].onmouseover = function(){
clearInterval(t);
for(var i=0;i<everdiv.length;i++){
everdiv[i].style.backgroundColor = "rgba(0,0,0,0.7)";
}
this.style.backgroundColor = "black";
for(var m=0;m<everdiv.length;m++){
if(everdiv[m].style.backgroundColor == "black"){
sum = m;
geted(sum);
}
}
}
everdiv[n].onmouseout = function(){
t = setInterval(change,2000);
}
}
function geted(sum) {
var src = ["../img/01.jpg","../img/02.jpg","../img/03.jpg","../img/04.jpg","../img/05.jpg","../img/06.jpg"];
img.src = src[sum];
}
var thisimg = document.getElementById("img");
thisimg.onmouseover = function(){
clearInterval(t);
}
thisimg.onmouseout = function(){
t = setInterval(change,2000);
}
</body>
</html>
var img = document.getElementById("img");
var sum = 0;
var src = ["../img/01.jpg","../img/02.jpg","../img/03.jpg","../img/04.jpg","../img/05.jpg","../img/06.jpg"];
var t = "";
function change(){
sum = (sum+1)%6;
img.src = src[sum];
var everdiv = number.getElementsByTagName("div");
for(var m=0;m<everdiv.length;m++){
for(var n=0;n<everdiv.length;n++){
everdiv[n].style.backgroundColor = "rgba(0,0,0,0.7)";
everdiv[sum].style.opacity = "0";
}
everdiv[sum].style.backgroundColor = "black";
everdiv[sum].style.opacity = "1";
}
}
t = setInterval(change,2000);
var number = document.getElementById("number");
var figure = ["1","2","3","4","5","6"];
for(var n=0;n<figure.length;n++){
var newdiv = document.createElement("div");
number.appendChild(newdiv);
newdiv.style.height = "25px";
newdiv.style.color = "white";
newdiv.style.paddingLeft = "20px";
newdiv.style.marginTop = "5px";
newdiv.style.lineHeight = "25px";
newdiv.style.backgroundColor = "rgba(0,0,0,0.7)";
newdiv.innerText = figure[n];
}
var everdiv = number.getElementsByTagName("div");
everdiv[0].style.backgroundColor = "black";
for(var n=0;n<everdiv.length;n++){
everdiv[n].onmouseover = function(){
clearInterval(t);
for(var i=0;i<everdiv.length;i++){
everdiv[i].style.backgroundColor = "rgba(0,0,0,0.7)";
}
this.style.backgroundColor = "black";
for(var m=0;m<everdiv.length;m++){
if(everdiv[m].style.backgroundColor == "black"){
sum = m;
geted(sum);
}
}
}
everdiv[n].onmouseout = function(){
t = setInterval(change,2000);
}
}
function geted(sum) {
var src = ["../img/01.jpg","../img/02.jpg","../img/03.jpg","../img/04.jpg","../img/05.jpg","../img/06.jpg"];
img.src = src[sum];
}
var thisimg = document.getElementById("img");
thisimg.onmouseover = function(){
clearInterval(t);
}
thisimg.onmouseout = function(){
t = setInterval(change,2000);
}
#rack{
width:200px;
height:100px;
position: absolute;
top:100px;
border:1px solid paleturquoise;
background:orange;
}
*{
margin:0px;
padding:0px;
}
#aa{
width:200px;
height:200px;
background: blue;
position: absolute;
top:200px;
left: 10px;
}
#bb{
width:200px;
height:200px;
background: blue;
position: absolute;
top:200px;
right:10px;
}
body{
margin:0;
padding:0;
}
#images{
position: absolute;
width: 100%;
margin-top:110px;
}
#img{
width: 1000px;
position: relative;
left:50%;
margin-left:-500px;
-webkit-box-shadow: 0 0 8px rgba(0,0,0,0.6);
}
#number{
width: 200px;
position: absolute;
left:800px;
top:190px;
z-index: 10;
}
#middle{
width: 1000px;
position: relative;
left:50%;
margin-left:-505px;
}
以上是关于h5~js~定时器的主要内容，如果未能解决你的问题，请参考以下文章