定時器彈框
setTimeout只執(zhí)行一次的定時器
clearTimeout 關(guān)閉只執(zhí)行一次的定時器
setInterval 反復(fù)執(zhí)行的定時器
clearInterval 關(guān)閉反復(fù)執(zhí)行的定時器
.pop{
width: 400px;
height: 300px;
background-color: #fff;
border: 1px solid #000;
固定定位
position: fixed;
左上角位于頁面中心
left: 50%;
top: 50%;
讓div向左偏移半個寬度、向上偏移半個高度，使div位于頁面中心
margin-left: -200px;
margin-top: -150px;
彈窗在最上面
z-index: 9999;
}
遮罩樣式
.mask{
position: fixed;
width: 100%;
height: 100%;
background-color: #000;
left: 0;
top: 0;
設(shè)置透明度30%
opacity: 0.3;
filter: alpha(opacity=30);兼容低版本IE
遮罩在彈窗的下面，在網(wǎng)頁所有內(nèi)容的上面
z-index: 9990;
}
.pop_con{
display: none;默認不顯示，用定時器顯示
}
</style>
<script type="text/javascript">
window.onload = function(){
var pop = document.getElementById('pop');
var shutoff = document.getElementById('shutoff');
setTimeout? (function (){
pop.style.display = 'block';//顯示彈框和遮罩
},3000)；開啟定時器的簡寫方式：調(diào)用匿名函數(shù)
function showPop(){
pop.style.display = 'none';//關(guān)閉彈框和遮罩
}
}
</script>
</head>
<body>
<h1>首頁標題</h1>
<p>頁面內(nèi)容</p>
<a >百度網(wǎng)</a>
<div class="pop_con" id="pop">
<div class="pop">
<h3>提示信息！</h3>
<a href="#" id="shutoff">關(guān)閉</a>
</div>
<div class="mask"></div>
</div>
</body>
定時器的基本用法
1，只執(zhí)行一次的定時器
var timer = setTimeout(function () {
? ? ? alert('hello');
? },3000);
?2，清除只執(zhí)行一次的定時器
? clearTimeout(timer);
3，一直執(zhí)行兩秒的定時器
? var timer2 = setInterval(function () {
? ? ? alert('hihi!!');
? },2000)；
4，清除一直（反復(fù)）執(zhí)行兩秒的定時器
clearInterval(timer2)；
定時器動畫
.box{
? ? ? ? width:100px;
? ? ? ? height:100px;
? ? ? ? background-color:gold;
? ? ? ? position:fixed;
? ? ? ? left:20px;
? ? ? ? top:20px;
}
window.onload = function(){
? ? ? ? var box = document.getElementById('box');
? ? ? ? var left = 20;
? ? ? ? setInterval(function () {
? ? ? ? ? ? left++;
? ? ? ? ? ? box.style.left = left + 'px';
? ? ? ? ? ? 當(dāng)left大于600時停止動畫
? ? ? ? ? ? if (left > 600){
? ? ? ? ? ? ? clearInterval(timer)
}
? ? ? ? },30);
}
<div class = 'box' id = 'box'></box>
