进度条与弹出框（加载幸福快乐）

最新推荐文章于 2023-12-26 15:00:00 发布

.不喜欢吃鸭头

最新推荐文章于 2023-12-26 15:00:00 发布

阅读量497

点赞数 5

分类专栏： css+js 文章标签： css js html javascript html5

本文链接：https://blog.csdn.net/wangYaj/article/details/111756054

版权

css+js 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

进度条与弹出框（加载幸福快乐）

整体思路

首先确定自己想要达到什么效果
代码实现

代码思路

进度条
弹出框并进行点击效果
倒计时

代码实现

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>

<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;

.不喜欢吃鸭头

关注

5
点赞
踩
2

收藏

觉得还不错? 一键收藏
4
评论
进度条与弹出框（加载幸福快乐）

进度条与弹出框（加载幸福快乐）整体思路首先确定自己想要达到什么效果代码实现代码思路进度条弹出框并进行点击效果倒计时代码实现css样式<style> /* 弹出框 */ #box{width: 600px;height: 300px;border: 2px solid black;margin: 100px auto;box-sizing: border-box;text-align: center;padding-top: 50px
复制链接

扫一扫