13、JavaScript进度条的实现

「爱情、让人受尽委屈。」 2022-08-22 00:02 210阅读 0赞

1、JavaScript进度条的实现

1.1 html代码

<body>
    	<div id="main">
    		<div id="progress"></div>
    	</div>
    	<button id="mybut">开始</button>
    </body>

1.2  style代码

<style type="text/css">
    	#main {
    		width: 100%;
    		height: 30px;
    		background: #ddd;
    	}
    			
    	#progress {
    		width: 1%;
    		height: 30px;
    		background: #aaf;
    	}
    			
    	#mybut {
    		margin-top: 10px;
    	}
    </style>

1.3  JavaScript代码

<script type="text/javascript">
    	function $(id) {
    		return document.getElementById(id);
    	}
    
    	$('mybut').onclick = function() {
    		var changdu = 1;
    		var setIntervalVal = setInterval(function() {
    			changdu += 5;
    			if (changdu >= 100) {
    				clearInterval(setIntervalVal);
    			}
    			$('progress').style.width = changdu + '%';
    		}, 100);
    	}
    </script>

1.4  运行截图

![20160506224406736][]

[20160506224406736]: /images/20220724/1627c01a6f614f1b888d5faf3c9b1a6e.png

发表评论取消回复

表情：

评论列表（有 0 条评论，210人围观）

还没有评论，来说两句吧...

相关阅读

相关 Java实现进度条

Java实现进度条在Java编程中，经常需要显示进度条来表示任务的完成进度。进度条是一种直观的方式，可以让用户了解到程序运行的状态。本文将介绍如何使用Java实现一个简单的

水深无声/ 2023年10月15日 15:47/ 0 赞/ 22 阅读

相关 javascript进度条（js实例）

利用javascript模拟下载进度条，可以防止重复点击。 > 思路：用两个div嵌套，开始时，初始时里面的div宽度为0，当点击下载时，让里面的div宽度一直+1，当加到1

Myth丶恋晨/ 2023年01月17日 03:23/ 0 赞/ 136 阅读

相关 JavaScript CSS 线性进度条

JS CSS 进度条 html <div id="show" class="show"> <div class="box">

谁借莪１个温暖的怀抱￠/ 2022年12月30日 14:57/ 0 赞/ 180 阅读

相关实现简易进度条

法一: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

傷城~/ 2022年12月13日 04:54/ 0 赞/ 205 阅读

相关 13、JavaScript进度条的实现

1、JavaScript进度条的实现 1.1 html代码 <body> <div id="main"> <div id="pro

「爱情、让人受尽委屈。」/ 2022年08月22日 00:02/ 0 赞/ 211 阅读

相关 python实现进度条

import sys import time def view\_bar(num, total): rate = num / total r

怼烎@/ 2022年06月09日 07:19/ 0 赞/ 343 阅读

相关 JS实现进度条

超时函数控制，每隔一秒钟就会执行指定的超时函数，再指定的超时函数里设置进度条的标签的长度，即可完成进度条的显示。 <!DOCTYPE html> <html>

约定不等于承诺〃/ 2022年06月09日 03:24/ 0 赞/ 286 阅读

相关 Javascript实现简单进度条

<html> <head> <meta charset="utf-8"> <link rel="stylesheet" type

水深无声/ 2022年06月05日 08:17/ 0 赞/ 236 阅读

相关 Linux下实现进度条和彩色进度条

一、普通进度条 include <stdio.h> include <unistd.h> int main() {

雨点打透心脏的1/2处/ 2022年05月25日 03:44/ 0 赞/ 352 阅读

相关 JavaScript实现一个简单的进度条（有进度含百分比）

效果图： ![20201217201811429.png][] 代码： <!DOCTYPE html> <html> <hea

傷城~/ 2021年07月24日 11:14/ 0 赞/ 410 阅读