a)页面初始只有一个button，上面显示文字【start Download】
b)点击button后，button文字变为【Downloading】,并弹出模态对话框
ģ̬对话框的body部分，显示下载进度的文字表示【Current Progress】和进度条表示（文字和进度条的进度要一致）button显示【Cancel Download】
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>