13、JavaScript进度条的实现

「爱情、让人受尽委屈。」 2022-08-22 00:02 157阅读 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 条评论，157人围观）

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

相关阅读