Rumah hujung hadapan web tutorial js js如何创建动态加载的进度条?(代码示例)

js如何创建动态加载的进度条?(代码示例)

Nov 20, 2018 pm 12:00 PM
js bar kemajuan

本篇文章给大家带来的内容是介绍js如何创建动态加载的进度条?(代码示例),有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助。

进度条可以用来描述正在执行的任何任务的进度,它通常会被用于显示下载和上传时的状态。换句话说,进度条可以用来描述正在进行的任何事情的状态。

下面我们就来看看使用JavaScript如何实现动态加载的进度条?我们需要执行以下步骤:

1、为进度条创建HTML结构:

下面的代码中包含两个名为“Progress_Status”和“myprogressbar”的“div”标签元素。

<div id="Progress_Status"> 
  <div id="myprogressBar"></div> 
</div>
Salin selepas log masuk

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; 
}
Salin selepas log masuk

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 + '%';  
    } 
  } 
}
Salin selepas log masuk

运行:

1.gif

这样的加载样式有点单调,我们还可以添加数字标签以指示用户在流程中的位置;这需要在进度条内部或外部添加新元素,显示进度状态。

4、添加数字加载样式

我们可以在JavaScript的else {}语句里在添加一条语句:

element.innerHTML = width * 1  + '%';
Salin selepas log masuk

就可以实现数字加载显示进度状态的样式,运行效果:

2.gif

总结:以上就是本篇文章的全部内容,希望能对大家的学习有所帮助。想要获得更多相关视频教程,可访问:JavaScript教程

Atas ialah kandungan terperinci js如何创建动态加载的进度条?(代码示例). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Tag artikel panas

Notepad++7.3.1

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Cara menggunakan Peta JS dan Baidu untuk melaksanakan fungsi pan peta Cara menggunakan Peta JS dan Baidu untuk melaksanakan fungsi pan peta Nov 21, 2023 am 10:00 AM

Cara menggunakan Peta JS dan Baidu untuk melaksanakan fungsi pan peta

Disyorkan: Projek pengesanan dan pengecaman muka sumber terbuka JS yang sangat baik Disyorkan: Projek pengesanan dan pengecaman muka sumber terbuka JS yang sangat baik Apr 03, 2024 am 11:55 AM

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 Alat penting untuk analisis saham: Ketahui langkah-langkah untuk melukis carta lilin dengan PHP dan JS Dec 17, 2023 pm 06:55 PM

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? Bagaimana untuk melaksanakan fungsi bar kemajuan pemuatan halaman dalam JavaScript? Oct 27, 2023 am 08:57 AM

Bagaimana untuk melaksanakan fungsi bar kemajuan pemuatan halaman dalam JavaScript?

Petua Pembangunan PHP dan JS: Kuasai Kaedah Melukis Carta Lilin Stok Petua Pembangunan PHP dan JS: Kuasai Kaedah Melukis Carta Lilin Stok Dec 18, 2023 pm 03:39 PM

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

Cara membuat carta candlestick saham menggunakan PHP dan JS Cara membuat carta candlestick saham menggunakan PHP dan JS Dec 17, 2023 am 08:08 AM

Cara membuat carta candlestick saham menggunakan PHP dan JS

Cara menggunakan Peta JS dan Baidu untuk melaksanakan fungsi lukisan poligon peta Cara menggunakan Peta JS dan Baidu untuk melaksanakan fungsi lukisan poligon peta Nov 21, 2023 am 10:53 AM

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

Apakah yang dilakukan oleh pengendali baharu dalam js Apakah yang dilakukan oleh pengendali baharu dalam js Nov 13, 2023 pm 04:05 PM

Apakah yang dilakukan oleh pengendali baharu dalam js

See all articles