JS === Download 模态框

a)页面初始只有一个button，上面显示文字【start Download】

b)点击button后，button文字变为【Downloading】,并弹出模态对话框

模态对话框的body部分，显示下载进度的文字表示【Current Progress】和进度条表示（文字和进度条的进度要一致）button显示【Cancel Download】

c)下载结束后，文字和button内容会有变化  【Complete】【close】

d)点击【close】按钮，关闭对话框，页面上的button文字显示回【Start Download】，如最初所示

 

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
        *{margin:0;padding:0;}
        html,body{width: 100%;height: 100%;}
        .mask{width: 100%;height: 100%;background:black;opacity: .4;position: absolute;left:0;top:0;display: none;}
        .dialog{width: 400px;height: 300px;position: absolute;top:0;left:0;right: 0;bottom: 0;margin:auto;border:2px solid #eee;background:#fff;}
        .dialog .header{width: 100%;height: 30px;background: #ccc}
        .dialog .body{width: 100%;height: 150px;}
        .dialog .body .txt{height: 50px;}
        .dialog .body .load{width:198px;height: 30px;border:1px solid #000;position: relative;}
        .dialog .body .load .box{width: 0px;height: 30px;position: absolute;top:0;left: 0;background:red;}
    </style>
</head>
<body>
    <button class="download">Start Download</button>
    <div class="mask">
        <div class="dialog">
            <div class="header">File Download</div>
            <div class="body">
                <div class="txt">Current Progress</div>
                <div class="load">
                    <div class="box"></div>
                </div>
                
            </div>
            <button class="cancel">Cancel Download</button>
        </div>
    </div>


    <script type="text/javascript">
        var btn = document.querySelector(".download");
        var mask = document.querySelector(".mask");
        var load = document.querySelector(".dialog .body .load .box")
        var cancel = document.querySelector(".cancel");

        function Dialog(mask){
            this.mask = mask;
            cancel.onclick = () =>{
                this.hide();
            }
        }

        Dialog.prototype.show = function(){
            this.mask.style.display = "block";


            var id = setInterval(function(){
            
            var currentWidth = load.offsetWidth;
            var text = document.querySelector(".dialog .body .txt")

            currentWidth++;

                        
            if(currentWidth == 200){
                clearInterval(id);
                text.innerHTML = "Complete！"
                cancel.innerHTML = "Close"
                return;
            }

            load.style.width = currentWidth + "px";

            var a = Math.floor(currentWidth/2);
            text.innerHTML = "Current Progress : " + a + "%"
        },10)
        


        }

        Dialog.prototype.hide = function(){
            this.mask.style.display = "none";
            btn.innerHTML = "Start Download"
            load.style.width = 0;
            cancel.innerHTML = "cancel download"
        }

        
        btn.onclick = function(){
            btn.innerHTML = "Downloading";
            var mask = document.querySelector(".mask");
            let d = new Dialog(mask);
            d.show();
        }
    </script>
</body>
</html>

 

posted @ 2019-07-20 14:24  小兔子09  阅读(262)  评论(0)  编辑  收藏  举报