js原生进度条

最新推荐文章于 2024-05-02 09:34:08 发布

荷兰豆叶子上的水熊

最新推荐文章于 2024-05-02 09:34:08 发布

阅读量842

点赞数

分类专栏：原生js

本文链接：https://blog.csdn.net/u010200033/article/details/81334803

版权

原生js 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>进度条</title>

	<style text="text/css">
    #frame .border{
      width: 300px;
    	margin:10px 30px;
    	border:2px solid black;
    	height: 30px;
    	background-image: -moz-linear-gradient(top,#b0b0b0,#f8f8f8);
    	background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0,#b0b0b0),color-stop(1,#f8f8f8));
    	filter: progid:DXImageTransfrom.Microsoft.gradient(startColorstr='#b0b0b0',endColorstr='#f8f8f8',GradientType='0');

    	overflow: hidden;
    	position: relative;

      border: 2px solid black;
      border-bottom-width:4px;
      border-top-width: 3px; 
      border-radius:50px;
    }
    #frame .border #bar{
    	width: 1%;
    	height: 100%;
    	background-image: -moz-linear-gradient(top,#b0b0b0,#f8f8f8);
    	background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0,#8efb3c),color-stop(1,#7ac478));
    	filter: progid:DXImageTransfrom.Microsoft.gradient(startColorstr='#8efb3c',endColorstr='#7ac478',GradientType='0');

    /*	-webkit-border-top-right-radius:10px;
    	border-top-right-radius:10px;

    	-webkit-border-bottom-right-radius:10px;
    	border-bottom-right-radius:10px;*/

    	-webkit-transition:all 0.1s ease-in-out 0s;
    	transition:all 0.1s ease-in-out 0s;
    }
    #frame .border #persentage{
    	position: absolute;
    	left:0;
    	top:0;
    	width: 100%;
    	text-align: center;
    	padding:5px;
    	color: red;
    	font-weight: bold;
    }
	</style>
</head>
<body>
  <div id="frame">
		<div class="border">
			<div id="bar">
				
			</div>
			<div id="persentage">
				0%
			</div>
		</div>              
  </div>
  <script type="text/javascript">
    function Update () {
      var frm = document.getElementById("frame")
      var list = document.getElementsByTagName("div")
      var bar = document.getElementById('bar')
      var persentage = document.getElementById('persentage')
      console.log(bar.style.width, '1')
      if (bar.style.width === '') {
        bar.style.width = '1%' // 设置宽度
      } else {
        console.log(parseFloat(bar.style.width))
        bar.style.width = parseFloat(bar.style.width) + 1 + "%";
      }
      persentage.textContent = parseFloat(bar.style.width) + "%"
      if (bar.style.width !== '100%') {
        window.setTimeout('Update()', 100) // 设置超时
      }
    }
    Update()
  </script>
</body>
</html>

荷兰豆叶子上的水熊

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js原生进度条

&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;进度条&lt;/title&gt; &lt;style text="text/css"&gt; #frame .borde
复制链接

扫一扫