一个原生的用户等级的进度条

本人对后台不是太了解，所以这里做成了用户自己输入参数的办法来模拟从后台读参数的过程。复制代码代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="content" content="text/html charset=gb2312"> <style type="text/css"> *{margin:0; padding:0;} .uInfo{width:200px; padding:10px;} h3{margin:10px 0;} #level{width:150px; height:6px; border:1px solid #ccc; cursor:pointer;} #le{height:6px; width:0;display:block; background:#f00; font-size:0;} label{margin-left:10px;} #showTime{display:none; color:#f00; line-height:24px; font-size:12px;} </style> <script type="text/javascript"> function userInfo(){ var allTime = document.getElementById("allTime").value; var onTime = document.getElementById("onTime").value; var level = document.getElementById("level"); var le = document.getElementById("le"); if(allTime == onTime){ le.style.width = 100+"%"; } else if(onTime == 0){ le.style.width = 0; } else{ countPercent(onTime,allTime,level,le); } } function countPercent(onHours,allHours,level,le){ var floatNum = onHours/allHours; var percent = floatNum.toFixed("2"); var toPercent; if(percent == 1.00){ toPercent = 99; } else if(percent == 0.00){ toPercent = 1; } else{ toPercent = percent.substring(2); } le.style.width = toPercent+"%"; var showTime = document.getElementById("showTime"); level.onmouseover = function(){ showTime.style.display = "block"; showTime.innerHTML = "在线时长:"　+ onHours +"/"+ allHours; } level.onmouseout = function(){ showTime.innerHTML = ""; showTime.style.display = "none"; } } </script> </head> <body> <div class="uInfo"> <h3>用户等级</h3> <p id="level"><span id="le"></span></p> <P id="showTime"></p> </div> <div class="getNum"> <label>在线时间:</label><input type="text" id="onTime" /><label>本级所需时间:</label><input type="text" id="allTime" /> <input type="button" value="显示进度" onclick="userInfo()"> </div> </body> </html>

　　推荐阅读

　　js以对象为索引的关联数组

关于JSON对象，你可以参看wikipedia（http://zh.wikipedia.org/zh-cn/JSON），还有官方网站（http://www.json.org/json-zh.html）。　　我们常说JavaScript原生支持json，因为我们可以认为json就是对JavaScript的>>>详细阅读

本文标题：一个原生的用户等级的进度条

地址：http://www.17bianji.com/kaifa2/JS/26075.html

1/2 1