一個(gè)原生的用戶等級(jí)的進(jìn)度條
更新時(shí)間：2010年07月03日 00:15:50 作者：
做了一個(gè)用戶等級(jí)的進(jìn)度條，只是練手。
本人對(duì)后臺(tái)不是太了解，所以這里做成了用戶自己輸入?yún)?shù)的辦法來(lái)模擬從后臺(tái)讀參數(shù)的過(guò)程。
<!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 = "在線時(shí)長(zhǎng):" + onHours +"/"+ allHours;
}
level.onmouseout = function(){
showTime.innerHTML = "";
showTime.style.display = "none";
}
}
</script>
</head>
<body>
<div class="uInfo">
<h3>用戶等級(jí)</h3>
<p id="level"><span id="le"></span></p>
<P id="showTime"></p>
</div>
<div class="getNum">
<label>在線時(shí)間:</label><input type="text" id="onTime" /><label>本級(jí)所需時(shí)間:</label><input type="text" id="allTime" /> <input type="button" value="顯示進(jìn)度" onclick="userInfo()">
</div>
</body>
</html>
復(fù)制代碼 代碼如下:
<!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 = "在線時(shí)長(zhǎng):" + onHours +"/"+ allHours;
}
level.onmouseout = function(){
showTime.innerHTML = "";
showTime.style.display = "none";
}
}
</script>
</head>
<body>
<div class="uInfo">
<h3>用戶等級(jí)</h3>
<p id="level"><span id="le"></span></p>
<P id="showTime"></p>
</div>
<div class="getNum">
<label>在線時(shí)間:</label><input type="text" id="onTime" /><label>本級(jí)所需時(shí)間:</label><input type="text" id="allTime" /> <input type="button" value="顯示進(jìn)度" onclick="userInfo()">
</div>
</body>
</html>
相關(guān)文章
下面小編就為大家?guī)?lái)一篇關(guān)于js中的鼠標(biāo)事件總結(jié)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-07-07
在element-ui的select下拉框加上滾動(dòng)加載
這篇文章主要介紹了在element-ui的select下拉框加上滾動(dòng)加載，本文以以element-ui中的select為例，給大家介紹的非常詳細(xì),需要的朋友可以參考下2019-04-04
js canvas實(shí)現(xiàn)驗(yàn)證碼并獲取驗(yàn)證碼功能
這篇文章主要為大家詳細(xì)介紹了js canvas實(shí)現(xiàn)驗(yàn)證碼并獲取驗(yàn)證碼功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09
JS實(shí)現(xiàn)求字符串中出現(xiàn)最多次數(shù)的字符和次數(shù)示例
這篇文章主要介紹了JS實(shí)現(xiàn)求字符串中出現(xiàn)最多次數(shù)的字符和次數(shù),涉及javascript針對(duì)字符串的遍歷、統(tǒng)計(jì)、計(jì)算等相關(guān)操作技巧,需要的朋友可以參考下2019-07-07
JS實(shí)現(xiàn)簡(jiǎn)易留言板（節(jié)點(diǎn)操作）
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)簡(jiǎn)易留言板，節(jié)點(diǎn)進(jìn)行操作，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-03-03
功能強(qiáng)大的Bootstrap組件（結(jié)合js）
這篇文章主要介紹了功能強(qiáng)大的Bootstrap組件，介紹js結(jié)合Bootstrap組件的使用方法，感興趣的小伙伴們可以參考一下2016-08-08
這篇文章主要介紹了基于JS判斷iframe是否加載成功的方法【多種瀏覽器】的相關(guān)資料,需要的朋友可以參考下2016-05-05
登錄功能是許多小程序必備的一個(gè)功能，通過(guò)登錄系統(tǒng)，我們可以記錄用戶在我們的小程序里一些行為，在后臺(tái)我們也可以模糊地確認(rèn)用戶。下面這篇文章主要給大家介紹了關(guān)于小程序登錄鑒權(quán)的相關(guān)資料，需要的朋友可以參考下。2018-04-04
本篇文章主要是對(duì)JS判斷表單輸入是否為空的示例代碼進(jìn)行了介紹，需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助2013-12-12
JavaScript將Web頁(yè)面內(nèi)容導(dǎo)出到Word及Excel的方法
這篇文章主要介紹了JavaScript將Web頁(yè)面內(nèi)容導(dǎo)出到Word及Excel的方法,涉及javascript操作ActiveXObject控件的使用技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-02-02