[JSP笔记]用JS实现简单的进度条

话不多说，先上代码

<!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>Document</title><style>*{margin:0;padding:0;}.buttom{width: 100%;margin: auto;}.body{width: 50%;margin: auto;}.outside{width:500px;height: 20px;margin: auto;margin-top:10% ;background-color: rgb(186, 176, 176);}.inside{width: 50px;height: 20px;background-color: rgb(3, 187, 3);}.progress{float: right;color: white;}</style>
</head>
<body><div class="body"><div class="outside" id="outside"><div class="inside" id="inside"><span class="progress" id="progress">10%</span></div><button id="start">点我</button></div></div></body>
<script>//var outside=document.getElementById('outside');var inside = document.getElementById('inside');var progress=document.getElementById('progress');var speed = 1;var progress2 = null;var i = 10;start.onclick= function (){progress2=setInterval(function () {if(i<100){i=i+speed;inside.style.width=i*5+'px'; progress.innerHTML=i+'%'}  else{clearInterval(progress2);}console.log(i);}, 30);}</script>
</html>

因为现在是初学者，所以一开始写这个JSP的时候以为可以直接摁运行（并且其实借鉴了下网上的代码）
结果后来别人告诉我要给条件的告诉他什么时候开始运行的，于是加了一个onclick点击运行

JS进度条这个东西主要是setInterval的运用
说起来麻烦，实际上记住三个框里只有前两个是必要的，第一个是装的代码块，第二个是间隔运行时间
clearinterval的用处是暂停setinterval的参数
实际上就是把已经定义的setinterval参数名作为clearinterval的参数

像这个样
这里的progress2是已经定义的setInterval
效果图

点击之后会慢慢增长到100%

结束！

[JSP笔记]用JS实现简单的进度条相关推荐

php js 进度条,JavaScript实现简单动态进度条效果
这篇文章主要为大家详细介绍了JavaScript实现简单动态进度条效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下本文实例为大家分享了js实现动态进度条效果的具体代码,供大家参考,具体内容如下 ...
JS简单实现进度条效果
今天我们来学习一下,用JS来实现简单的进度条效果首先我们先来到HTML部分 <div class="box1"></div> css部分 .box1{wi ...
用css3简单实现进度条
2019独角兽企业重金招聘Python工程师标准>>> css3是一个神奇的东西,刚才一时手痒,写了一个很简单的进度条不用js: 直接嵌套一个div,然后设置里面的div用anima ...
ajax百分比加载特效,jQuery实现的简单百分比进度条效果示例
本文实例讲述了jQuery实现的简单百分比进度条.分享给大家供大家参考,具体如下: 一.JS Code: var progressId = "ProgressBarID"; fun ...
前端页面简单添加进度条
前端添加进度条具体步骤如下: 前端代码:在页面添加下面代码 <div class="processcontainer" title="正在处理,请耐心等候...& ...
Bootstrap学习笔记——缩略图、警示框、进度条、媒体对象、列表组、画板
1 缩略图缩略图(一) 缩略图在网站中最常用的地方就是产品列表页面,一行显示几张图片,有的在图片底下(左侧或右侧)带有标题.描述等信息. Bootstrap框架将这一部独立成一个模块组件.并通过&q ...
原生JS实现加载进度条
分享一个原生JS实现的动态加载进度条特效,效果如下: 实现的代码如下: <!DOCTYPE html> <html><head><meta http-equi ...
原生JS实现拖拽进度条、滚动鼠标显示相应的内容
今天要分享的是运用原生JS实现拖拽进度条.滚动鼠标显示相应的内容,实现效果如下: 以下是代码实现,欢迎大家复制粘贴. <!DOCTYPE html> <html><hea ...
Android花样loading进度条（二）-简单环形进度条
背景 Android花样loading进度条系列文章主要讲解如何自定义所需的进度条,包括水平.圆形.环形.圆弧形.不规则形状等. 本篇我们从圆形进度条讲起,讲简单形式的环形进度条,只有进度色彩,没有进 ...

[JSP笔记]用JS实现简单的进度条

[JSP笔记]用JS实现简单的进度条相关推荐

最新文章

热门文章