其他分享
首页 > 其他分享> > 进度条与弹出框（加载幸福快乐）

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

作者：互联网

整体思路

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

代码思路

  1. 进度条
  2. 弹出框并进行点击效果
  3. 倒计时

代码实现

  1. 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>
  1. 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>
  1. 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;
    // onl oad：页面加载完成显示。
    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

  1. display:block/none

js

  1. setInterval / clearInterval;
  2. getElementById;
  3. onload/onclick;
  4. document.body.style.background;

标签：body,style,进度条,px,幸福快乐,display,var,document,出框
来源： https://www.cnblogs.com/wangya6/p/14263823.html