JSの研究ノート5：タイマ動作のJs
記事のディレクトリ
タイマー
- 要求されたタイミングで清掃するためのjsタイマーやタイミング。間欠タイマと時間遅延タイマーに分け。
インターバルタイマの種類：定期的に実行されます。
時間遅延タイマー：作業を始める前に、一つの方法は、一度だけ、いくつかの時間待ちを作ることです。
- タイマー機能
1、インターバルタイマの種類
setInterval（楽しい、時間）
楽しい（）：関数が実行され、時間の実行時間の間隔は、ミリ秒単位で、毎回楽しい内部のタイムコードを実行されます。
2、時間遅延タイマー
setTimeout（楽しい、時間）
関数の実行のための楽しいです
実行時間のための時間遅延は、ミリ秒単位で、時間はコードの楽しみを実行するための時間が経過した後、一度だけ実行されます。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script type="text/javascript">
setTimeout(function(){
alert("我是延时三秒执行的函数")
},3000)
setInterval(function(){
alert("我是间隔三秒执行的函数")
},3000)
</script>
</body>
</html>
クリアタイマー
- なぜクリアタイマー
この事業発生することがあります。常に要求タイマーの必要性を、ある一定の値を、停止要求に直面したとき、タイマ動作を停止します。
- クリアインターバルタイマの種類
clearInterval（）
- クリア遅延タイマ
clearTimeout（）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script type="text/javascript">
//清除定时器
//创建间隔型定时器
var timer1=setInterval(function(){
console.log("我是间隔型定时器")
//clearTimeout(timer2)
},3000)
//创建延时型定时器
var timer2=setTimeout(function(){
console.log("我是延时型定时器")
clearInterval(timer1)
},4000)
</script>
</body>
</html>
遅延タイマーの例
- 私たちは小さなマウスのdivに移動すると、2つのdiv divの遅延ポップアップが消え、次のdivの表示、マウスの葉でポップ大きな時間があるでしょう。
ロジック：
マウスは、DIV1、DIV2表示イベントを移動させる1、。
2、ときDIV1のうち、マウス、遅延出口へDIV2必要。
DIV2 tを入力することで、マウスの葉DIV1 DIV2遅延が明確な遅延タイマ時間に、今回の必要性を終了し3、それ以外の場合は、マウスがまだDIV2の出口を分類されます。
マウスの葉がDIV2遅延終了後、DIV2 4、。
5、ときにマウスの葉のDIV2、とRANのDIV1、DIV2の遅延タイマの必要性はクリア。DIV1この秋はまだDIV2が表示されます。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
#div1{
float: left;
width: 50px;
height: 50px;
background: red;
}
#div2{
float: left;
width: 200px;
height: 200px;
background: black;
display:none;
}
</style>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
<script type="text/javascript">
window.onload=function(){
var oDiv1=document.getElementById('div1')
var oDiv2=document.getElementById('div2')
var timer=null
//给div1添加鼠标移入事件2
oDiv1.onmouseover=function(){
//改变oDiv2的display
clearTimeout(timer)
oDiv2.style.display='block'
}
oDiv1.onmouseout=function(){
timer=setTimeout(function(){
oDiv2.style.display='none'
},500)
}
oDiv2.onmouseover=function(){
//改变oDiv2的display
oDiv2.style.display='block'
clearTimeout(timer)
}
oDiv2.onmouseout=function(){
timer=setTimeout(function(){
oDiv2.style.display='none'
},500)
}
}
</script>
</body>
</html>
JSコードを簡略化することができます
oDiv2.onmouseover=oDiv1.onmouseover=function(){
//改变oDiv2的display
clearTimeout(timer)
oDiv2.style.display='block'
}
oDiv2.onmouseout=oDiv1.onmouseout=function(){
timer=setTimeout(function(){
oDiv2.style.display='none'
},500)
}
間欠タイマシームレスな絵巻を利用して
- ステップ
バナーを取得するために1、
2、UL順不同リストを取得
図3は、各コレクションのリストを取得し、タイマーを定義します
図4に示すように、幅は、ULタグのLiにより取得されました。
図5は、インターバルタイマーの種類によって、UL行くために残されてみましょう。
次いで、図6に示すように、カルーセルを達成するために、第1ラウンドとは、放送ULステッチ終了します
左UL値がゼロとなるように播種後の最初のラウンドは、複数のカルーセルを達成7、
図8に示すように、操作移動マウス、マウスフリーカバレッジが継続停止させました。
9、コードを合理化します。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{margin:0;padding: 0;}
#banner{
position: relative;
width: 600px;
height: 150px;
margin:100px auto;
overflow: hidden;
}
#banner ul{
position: absolute;
left: 0;
top:0;
}
#banner li{
float: left;
width: 200px;
height: 150px;
list-style: none;
}
#banner li img{
width: 200px;
height: 150px;
}
</style>
</head>
<body>
<div id="banner">
<ul>
<li><img src="img/1.png"></li>
<li><img src="img/2.png"></li>
<li><img src="img/3.png"></li>
<li><img src="img/4.png"></li>
<li><img src="img/5.png"></li>
<li><img src="img/6.png"></li>
</ul>
</div>
<script type="text/javascript">
window.onload=function(){
var oDiv=document.getElementById('banner')
var oUl=oDiv.getElementsByTagName('ul')[0]
var oLi=oUl.getElementsByTagName('li')
var timer=null
//拼接多一份ul里面的内容 这两种写法相等
// oUl.innerHTML=oUl.innerHTML+oUl.innerHTML
oUl.innerHTML+=oUl.innerHTML
//计算ul的宽度
oUl.style.width=oLi[0].offsetWidth*oLi.length+'px'
function moving(){
//当left小于一半时，就设置为0重复滚动事件。
if(oUl.offsetLeft<-oUl.offsetWidth/2){
oUl.style.left='0'
}
//滚动速度为2px，其中offsetLeft为当前left的值，
oUl.style.left=oUl.offsetLeft-2+'px'
}
timer=setInterval(moving,30)
oDiv.onmouseover=function(){
clearInterval(timer)
}
oDiv.onmouseout=function(){
//当鼠标离开30ms时就-2，就开始转动
timer=setInterval(moving,30)
}
}
</script>
</body>
</html>
