javascript进度条（js实例）

利用javascript模拟下载进度条，可以防止重复点击。

思路：用两个div嵌套，开始时，初始时里面的div宽度为0，当点击下载时，让里面的div宽度一直+1，当加到100时停止。完成下载！

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>javascript进度条</title><style>body{display: flex;justify-content: center;align-items: center;min-height: 100vh;}.outer{width: 300px;height: 20px;border: 1px solid black;border-radius: 10px;margin-right:10px;}.inner{width: 0;height: 20px;line-height: 20px;border-radius: 10px;text-align: center;color: white;background-color: hotpink;}</style>
</head>
<body><div class="outer"><div class="inner"></div></div><button>下载</button><script>var outer = document.getElementsByClassName('outer')[0];var inner = document.getElementsByClassName('inner')[0];var button = document.getElementsByTagName('button')[0];//外部定义flage = true,var flag = true;button.onclick = function () {let w = 0;//flag = true,执行下面代码if(flag){//把flag变为false，再次点击也不会执行里面的代码（防止“下载”按钮重复点击）flag = false;//设置定时器，每100毫秒执行一遍代码timer = setInterval(function(){w ++;inner.style.width = w + "%";inner.innerHTML = w + "%";//w等于100，也就是等于100%时，清除定时器，控制台打印“下载完成！”。if(w === 100){clearInterval(timer);console.log("下载完成！");}},100) }}</script>
</body>
</html>

效果图

javascript进度条（js实例）相关推荐

android简单进度条对话框,android进度条对话框实例
郑州app开发android进度条对话框实例.下面是java代码. package cn.xhhkj.cyd; import androidx.appcompat.app.AppCompatActiv ...
html带图片的进度条,原生javascript上传图片带进度条【实例分享】
javascript代码: ; (function(w) { var error = "上传控件不支持您的浏览器!"; // 构造函数 function UploadImg(opt ...
c js html页面进度条,js实现进度条的方法
本文实例讲述了js实现进度条的方法.分享给大家供大家参考.具体实现方法如下: 1.setTimeout和clearTimeout 进度条 .container{ width:450px; border ...
html canvas直线进度条,js+HTML5 canvas 实现简单的加载条(进度条)功能示例
本文实例讲述了js+HTML5 canvas 实现简单的加载条(进度条)功能.分享给大家供大家参考,具体如下: www.jb51.net canvas实现加载条动画 /* * 获取canvas, ca ...
javascript 进度条的几种方法
我们先看看最终效果: [url=169]169[/url] 第一步,基本构建基本的代码,看效果演示:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML ...
js的定时器实现页面展示的异步刷新多线程同步实现方式附进度条js代码
先简单介绍下两个场景结果迅速能出来,采用多线程的同步方式如果逻辑处理比较快,3-5秒任务就会执行完毕,你也可以采用同步多线程同步的方式,代码如下: 数据校验使用到的线程实例: if(null!=c ...
python动态显示进度条_实例详解python如何轻松实现动态进度条
本次的这篇文章主要是和大家分享了关于实例详解python如何轻松实现动态进度条,有需要的小伙伴可以看一下思路及讲解假设有一个1000000数据的列表(为了让进度条可以显示出来,很大的数据),我们每 ...
前端圆形进度图_图解CSS3制作圆环形进度条的实例教程
首先,当有人说你能不能做一个圆形进度条效果出来时,如果是静态完整圆形进度条,那么就很简单了: CSS Code复制内容到剪贴板 .circleprogress{ width:160px; height ...
十五、JavaScript进度条的制作
@Author:Runsen @Date:2019/3/25 进度条经常运用于网页,即使我们意识到不是所有的东西都将瞬间被加载完成,这些进度条用于提醒使用者关于网页上具体的任务进程,譬如上传,下载,加 ...

javascript进度条（js实例）

效果图

javascript进度条（js实例）相关推荐

最新文章

热门文章