JS === Download 模态框
时间:2019-07-20
本文章向大家介绍JS === Download 模态框,主要包括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>
原文地址:https://www.cnblogs.com/rabbit-lin0903/p/11217616.html
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 放弃手中Docker拥抱下一代容器管理工具Podman
- 个人博客搭建
- leetcode哈希表之两数之和
- Spring boot 的彩色日志
- 一位Android程序员入坑Flutter后整理出一份超详细的学习笔记
- Python批量获取并保存手机号归属地和运营商的示例
- Qt音视频开发31-Onvif抓拍图片
- 突击并发编程JUC系列-ReentrantLock
- 【腾讯云】记一次搭建云服务器
- 前端:如何让background背景图片进行CSS自适应
- 为什么Rust的println!不会发生所有权转移?
- 【译文】Rust futures: async fn中的thread::sleep和阻塞调用
- Smart Pointer Programming Techniques
- 一文搞懂AQS及其组件的核心原理
- 比较JavaScript中的数据结构(数组与对象)