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