zoukankan      html  css  js  c++  java
  • js--进度条

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    		<style>
    			#progress{
    				position: relative;
    				margin: auto;
    				top: 200px;
    				display: block;
    				 200px;
    				height: 20px;
    				border-style: dotted;
    				border- thin;
    				border-color: darkgreen;
    			}
    			#filldiv{
    				position: absolute;
    				top: 0px;
    				left: 0px;
    				 0px;
    				height: 20px;
    				background: blue;
    			}
    			#percent{
    				position: absolute;
    				top: 0px;
    				left: 200px;
    			}
    		</style>
    	</head>
    	<body>
    		<div id="progress">
    			<div id="filldiv"></div>
    			<span id="percent">0</span>
    		</div>
    	</body>
    </html>
    <script src="common.js"></script>
    <script>
    	window.onload = function(){
    		var fillDiv = $id("filldiv");
    		var per = $id("percent");
    		var timer = setInterval(function(){
    			//改变div的宽度
    			fillDiv.style.width = fillDiv.offsetWidth + 2 +"px";
    			fillDiv.style.backgroundColor = getColor();
    			//改变宽度的进度比例
    			per.innerHTML = parseInt(100*fillDiv.offsetWidth/200) + "%";
    			//判断fillDiv的宽度如果为200 就停止定时器
    			if(fillDiv.offsetWidth == 200){
    				clearInterval(timer)
    			}
    		},30)
    	}
    </script>
    

      

  • 相关阅读:
    阿里云短信服务工具类
    vue.config.js
    elementui Tree 树形控件增删改查
    vue 实时显示年月日时分秒星期上下午
    1553:【例 2】暗的连锁
    CF825G Tree Queries
    最短母串
    寻找好串
    无限链计数
    异或运算
  • 原文地址:https://www.cnblogs.com/ccyq/p/11335007.html
Copyright © 2011-2022 走看看