js如何创建动态加载的进度条?(代码示例)
Nov 20, 2018 pm 12:00 PM本篇文章给大家带来的内容是介绍js如何创建动态加载的进度条?(代码示例),有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助。
进度条可以用来描述正在执行的任何任务的进度,它通常会被用于显示下载和上传时的状态。换句话说,进度条可以用来描述正在进行的任何事情的状态。
下面我们就来看看使用JavaScript如何实现动态加载的进度条?我们需要执行以下步骤:
1、为进度条创建HTML结构:
下面的代码中包含两个名为“Progress_Status”和“myprogressbar”的“div”标签元素。
<div id="Progress_Status"> <div id="myprogressBar"></div> </div>
2、添加CSS:
下面的代码用于设置进度条的宽度和背景颜色以及条形图中的进度状态。
#Progress_Status { width: 50%; background-color: #ddd; } #myprogressBar { width: 1%; height: 35px; background-color: #4CAF50; text-align: center; line-height: 32px; color: black; }
3、添加JavaScript:
下面的代码使用javascript函数“update”和“scene”创建一个动态progess bar(动画)。
function update() { var element = document.getElementById("myprogressBar"); var width = 1; var identity = setInterval(scene, 10); function scene() { if (width >= 100) { clearInterval(identity); } else { width++; element.style.width = width + '%'; } } }
运行:
这样的加载样式有点单调,我们还可以添加数字标签以指示用户在流程中的位置;这需要在进度条内部或外部添加新元素,显示进度状态。
4、添加数字加载样式
我们可以在JavaScript的else {}语句里在添加一条语句:
element.innerHTML = width * 1 + '%';
就可以实现数字加载显示进度状态的样式,运行效果:
总结:以上就是本篇文章的全部内容,希望能对大家的学习有所帮助。想要获得更多相关视频教程,可访问:JavaScript教程!
Atas ialah kandungan terperinci js如何创建动态加载的进度条?(代码示例). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Artikel Panas

Alat panas Tag

Artikel Panas

Tag artikel panas

Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6
Alat pembangunan web visual

SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Topik panas

Cara menggunakan Peta JS dan Baidu untuk melaksanakan fungsi pan peta

Disyorkan: Projek pengesanan dan pengecaman muka sumber terbuka JS yang sangat baik

Alat penting untuk analisis saham: Ketahui langkah-langkah untuk melukis carta lilin dengan PHP dan JS

Bagaimana untuk melaksanakan fungsi bar kemajuan pemuatan halaman dalam JavaScript?

Petua Pembangunan PHP dan JS: Kuasai Kaedah Melukis Carta Lilin Stok

Cara membuat carta candlestick saham menggunakan PHP dan JS

Cara menggunakan Peta JS dan Baidu untuk melaksanakan fungsi lukisan poligon peta

Apakah yang dilakukan oleh pengendali baharu dalam js
