一個(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" />&nbsp;<input type="button" value="顯示進(jìn)度" onclick="userInfo()"> 
</div> 
</body> 
</html> 

相關(guān)文章

js傳各種類型參數(shù)到Controller層的整理方式
這篇文章主要介紹了js傳各種類型參數(shù)到Controller層的整理方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-02-02
js中取得變量絕對(duì)值的方法
這篇文章主要介紹了js中取得變量絕對(duì)值的方法,較為詳細(xì)的分析了js中abs方法取絕對(duì)值的使用技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
2015-01-01
JS使用Promise時(shí)常見(jiàn)的5個(gè)錯(cuò)誤總結(jié)
Promise?提供了一種優(yōu)雅的方法來(lái)處理?JS?中的異步操作。這也是避免“回調(diào)地獄”的解決方案。然而，并沒(méi)有多少開(kāi)發(fā)人員了解其中的內(nèi)容。因此，許多人在實(shí)踐中往往會(huì)犯錯(cuò)誤。在本文中，介紹一下使用?promise?時(shí)的五個(gè)常見(jiàn)錯(cuò)誤，希望大家能夠避免
2022-11-11
Bootstrap如何激活導(dǎo)航狀態(tài)
這篇文章主要為大家詳細(xì)介紹了Bootstrap如何激活導(dǎo)航狀態(tài)，包括膠囊式導(dǎo)航中的激活狀態(tài)和列表導(dǎo)航中的激活狀態(tài)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-03-03
微信小程序?qū)崿F(xiàn)列表的橫向滑動(dòng)方式
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)列表的橫向滑動(dòng)，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2020-07-07
JavaScript 數(shù)組中插入元素的實(shí)例方法
這篇文章主要介紹了如何在 JavaScript 數(shù)組中插入元素,在本文中,我們學(xué)習(xí)了使用?splice()?方法將元素添加到數(shù)組的開(kāi)始、末尾或任何位置的各種方法,需要的朋友可以參考下
2023-09-09
Javascript 繼承機(jī)制實(shí)例
說(shuō)明繼承機(jī)制最簡(jiǎn)單的方法是，利用一個(gè)經(jīng)典的例子——幾何形狀。
2009-08-08
weixin-java-miniapp微信小程序登陸具體實(shí)現(xiàn)
這篇文章主要介紹了weixin-java-miniapp微信小程序登陸具體實(shí)現(xiàn)的相關(guān)資料,包括用戶授權(quán)、獲取code、發(fā)送到后臺(tái)、后臺(tái)驗(yàn)證并獲取openid和session_key、返回驗(yàn)證結(jié)果等步驟,需要的朋友可以參考下
2025-02-02
微信小程序獲取用戶手機(jī)號(hào)碼詳細(xì)教程(前端＋后端)
在我們開(kāi)發(fā)微信小程序時(shí),獲取用戶手機(jī)號(hào)碼是常見(jiàn)的需求之一,這篇文章主要給大家介紹了關(guān)于微信小程序獲取用戶手機(jī)號(hào)碼的相關(guān)資料,文中通過(guò)圖文介紹的非常詳細(xì),需要的朋友可以參考下
2024-02-02
經(jīng)典的間隔時(shí)間滾動(dòng)新聞（圖片），可控制滾動(dòng)
經(jīng)典的間隔時(shí)間滾動(dòng)新聞（圖片），可控制滾動(dòng) 其實(shí)這個(gè)也挺多網(wǎng)站用到的，簡(jiǎn)單又實(shí)用。(
2010-05-05