进度条与弹出框（加载幸福快乐）
整体思路
- 首先确定自己想要达到什么效果
- 代码实现
代码思路
- 进度条
- 弹出框并进行点击效果
- 倒计时
代码实现
- 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;}
/*进度条 */
#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>
<!-- 进度条 -->
<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');
// 先设置变量作为定时器。
var t;
// 首先隐藏弹出框，当进度条走到百分百的时候再将弹出框进行显示。
obox.style.display = "none";
end.style.display = "none";
var oboox = document.getElementById('boox');
var px = document.getElementById('px');
// 设置倒计时有多少s；
var s= 20;
// onload：页面加载完成显示。
window.onload = function () {
// 设置计时器
t = setInterval(function () {
s--;
// 利用px的宽度做百分比。
px.style.width = parseInt(px.style.width) +1 + "%";
px.innerHTML = parseInt(px.style.width) +1 + "%";
// 判断宽度是否到达百分百。
if(px.style.width == "100%"){
// 如果到达，结束计时器，并强行设置宽度百分百。
clearInterval(t);
px.innerHTML = "100%";
// 隐藏进度条
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){
// 点击切换背景
y.onclick = function () {
document.body.style.backgroundImage = "url('image/2.gif')";
document.body.style.backgroundRepeat = "no-repeat";
document.body.style.backgroundSize = "100%";
}
// 点击时候切换背景
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>
知识点总结
css
- display:block/none
js
- setInterval / clearInterval;
- getElementById;
- onload/onclick;
- document.body.style.background;
