進(jìn)度條與彈出框（加載幸福快樂）
整體思路
- 首先確定自己想要達(dá)到什么效果
- 代碼實(shí)現(xiàn)
代碼思路
- 進(jìn)度條
- 彈出框并進(jìn)行點(diǎn)擊效果
- 倒計時
代碼實(shí)現(xiàn)
- css樣式
<style>
/* 彈出框 */
#box{width: 600px;height: 300px;border: 2px solid black;margin: 100px auto;box-sizing: border-box;text-align: center;padding-top: 50px;}
p{font-size: 30px;line-height: 30px;margin-bottom: 100px;}
input{display: block;width: 100px;height: 30px;border: 1px solid black;font-size: 16px;float: left;;margin-left: 133px;}
#end{width: 160px;height: 30px;font-size: 16px;border: 1px solid black;line-height: 30px;text-align: center;margin: 0 auto;}
/*進(jìn)度條 */
#boox{width: 800px;height: 60px;border: 1px solid black;margin: 200px auto;text-align: center;padding-top: 20px;box-sizing: border-box;}
#px{height: 20px;background: #cccccc;margin: 0;font-size: 16px;line-height: 20px;}
</style>
- body
<body>
<div id="box">
<p>今天你幸福嗎?</p>
<input type="button" value="幸福" id="y">
<input type="button" value="開心" id="h">
</div>
<div id="end">還剩下5秒</div>
<!-- 進(jìn)度條 -->
<div id="boox">
<p id="px" style="width: 0%;"></p>
</div>
</body>
- js
<script>
var obox = document.getElementById('box');
var end = document.getElementById('end');
var y = document.getElementById('y');
var h = document.getElementById('h');
// 先設(shè)置變量作為定時器。
var t;
// 首先隱藏彈出框机杜，當(dāng)進(jìn)度條走到百分百的時候再將彈出框進(jìn)行顯示。
obox.style.display = "none";
end.style.display = "none";
var oboox = document.getElementById('boox');
var px = document.getElementById('px');
// 設(shè)置倒計時有多少s蓄髓；
var s= 20;
// onload：頁面加載完成顯示叉庐。
window.onload = function () {
// 設(shè)置計時器
t = setInterval(function () {
s--;
// 利用px的寬度做百分比。
px.style.width = parseInt(px.style.width) +1 + "%";
px.innerHTML = parseInt(px.style.width) +1 + "%";
// 判斷寬度是否到達(dá)百分百会喝。
if(px.style.width == "100%"){
// 如果到達(dá)陡叠，結(jié)束計時器，并強(qiáng)行設(shè)置寬度百分百肢执。
clearInterval(t);
px.innerHTML = "100%";
// 隱藏進(jìn)度條
oboox.style.display = "none";
px.style.display = "none";
// 顯示彈出框
obox.style.display = "block";
end.style.display = "block";
var ss = 20;
t = setInterval(function () {
ss -- ;
end.innerHTML = '還剩下' + ss + '秒';
if(ss > 0){
// 點(diǎn)擊切換背景
y.onclick = function () {
document.body.style.backgroundImage = "url('image/2.gif')";
document.body.style.backgroundRepeat = "no-repeat";
document.body.style.backgroundSize = "100%";
}
// 點(diǎn)擊時候切換背景
h.onclick = function () {
document.body.style.backgroundImage = "url('image/3gif.gif')";
document.body.style.backgroundRepeat = "no-repeat";
document.body.style.backgroundSize = "100%";
}
}
if(ss < 0){
clearInterval(t);
obox.style.display = "none";
end.style.display = "none";
document.body.style = "none";
}
},1000);
}
},30)
}
</script>
知識點(diǎn)總結(jié)
css
- display:block/none
js
- setInterval / clearInterval;
- getElementById;
- onload/onclick;
- document.body.style.background;
