用户体验，这年头提的特别多。其实，说白了就是细节方面的处理。今天，讲一个进度条的体验效果。
直接贴代码，想尝试看效果的，自己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 onload</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>
页面进度条事件
时间： 2024-08-17 11:34:04