首页 > 代码库 > 页面进度条事件

页面进度条事件

2024-07-18 03:12:07   228人阅读

用户体验，这年头提的特别多。事实上，说白了就是细节方面的处理。今天，讲一个进度条的体验效果。

直接贴代码，想尝试看效果的，自己copy到编辑器里到网页view吧。

<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
	<title>进度条事件</title>
	<style type="text/css" media="screen">
		*{margin:0; padding: 0;}
		.f-wrap{margin:100px auto; width: 1000px;}
		p{ line-height: 24px; padding: 10px 0;}
		.s-gray{color:#999;}
		#progressBar{width:800px; height:25px; border:1px solid #ddd; background-color: #fff; position: relative; }
		#progressBar #bar,#progressBar #text{ position:absolute; top:0; left: 0; z-index: 1; width:100%; font-weight: bold; font-family:georgia; font-size: 16px; text-align: center; height:25px; line-height:25px;}
		#progressBar #bar{z-index:2; background-color:blue; color:#fff; clip:rect(0px,0,25px,0);}
	</style>
</head>
<body>
	<div class="f-wrap">
		<div id="progressBar">
			<div id="bar">0%</div>
			<div id="text">0%</div>
		</div>
		<div class="s-gray">
			<p>clip是css2中的一个样式</p>
			<ol>
				<li>硬编码：写死</li>
				<li>跟flash配合，as3</li>
				<li>html5 : xhr2 :onprogress onl oad</li>
				<li>跟后台的配合，ajax实时返回（cent）</li>
			</ol>
		</div>
	</div>
	<script>
     window.onload = function(){
     	var iProgress = 0;
     	var timer = null;
     	timer = setInterval(function(){
            if(iProgress == 100){
                 clearInterval(timer);
            }else{
            	iProgress+=5;
                progressFn(iProgress);
            }
     	},100);
        

        // 封装成一个函数
     	function progressFn(cent){
              var oDiv1 = document.getElementById('progressBar');
              var oDiv2 = document.getElementById('bar');
              var oDiv3 = document.getElementById('text');
              
              var objW = parseInt(getStyle(oDiv1,'width'));

              oDiv2.innerHTML = cent + '%';
              oDiv3.innerHTML = cent + '%';
              oDiv2.style.clip = 'rect(0px, '+ cent/100 * objW +'px, 25px, 0)';

              // 获取样式值
              function getStyle(obj,attr){
              	  if(obj.currentStyle){
              	  	  return obj.currentStyle[attr];
              	  }else{
              	  	  return getComputedStyle(obj,false)[attr];
              	  }
              }
     	}
     }
	</script>
</body>
</html>


联系
我们