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


Posted in Javascript onJuly 03, 2010

本人对后台不是太了解,所以这里做成了用户自己输入参数的办法来模拟从后台读参数的过程。

<!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>
Javascript 相关文章推荐
javascript js cookie的存储,获取和删除
Dec 29 Javascript
超级退弹代码
Jul 07 Javascript
Jquery下的26个实用小技巧(jQuery tips, tricks &amp; solutions)
Mar 01 Javascript
JS文本框不能输入空格验证方法
Mar 19 Javascript
理解javascript中的回调函数(callback)
Sep 02 Javascript
通过JS动态创建一个html DOM元素并显示
Oct 15 Javascript
使用AngularJS创建自定义的过滤器的方法
Jun 18 Javascript
Javascript中的prototype与继承
Feb 06 Javascript
Angular5.1新功能分享
Dec 21 Javascript
详解Vue中数组和对象更改后视图不刷新的问题
Sep 21 Javascript
BootStrap modal实现拖拽功能
Dec 01 Javascript
QT与javascript交互数据的实现
May 26 Javascript
清空上传控件input file的值
Jul 03 #Javascript
javascript深入理解js闭包
Jul 03 #Javascript
JSON JQUERY模板实现说明
Jul 03 #Javascript
jquery.boxy插件的iframe扩展代码
Jul 02 #Javascript
JQuery AJAX提交中文乱码的解决方案
Jul 02 #Javascript
IE本地存储userdata的一个bug说明
Jul 01 #Javascript
UserData用法总结 lanyu出品
Jul 01 #Javascript
You might like
php5 mysql分页实例代码
2008/04/10 PHP
PHP 飞信好友免费短信API接口开源版
2010/07/22 PHP
PHP打印输出函数汇总
2016/08/28 PHP
php实现水印文字和缩略图的方法示例
2016/12/29 PHP
Laravel如何使用Redis共享Session
2018/02/23 PHP
javascript cookie操作类的实现代码小结附使用方法
2010/06/02 Javascript
JavaScript打印iframe内容示例代码
2013/08/20 Javascript
javascript操作excel生成报表全攻略
2014/05/04 Javascript
jQuery实现简单二级下拉菜单
2015/04/12 Javascript
浅谈javascript原型链与继承
2015/07/13 Javascript
js实现点击获取验证码倒计时效果
2021/01/28 Javascript
JavaScript+Html5实现按钮复制文字到剪切板功能(手机网页兼容)
2017/03/30 Javascript
解决Extjs下拉框不显示的问题
2017/06/21 Javascript
js实现文字列表无缝滚动效果
2017/06/23 Javascript
switchery按钮的使用方法
2017/12/18 Javascript
使用Vuex解决Vue中的身份验证问题
2018/09/28 Javascript
JavaScript基于数组实现的栈与队列操作示例
2018/12/22 Javascript
[02:25]DOTA2英雄基础教程 虚空假面
2014/01/02 DOTA
Python使用MySQLdb for Python操作数据库教程
2014/10/11 Python
Python3.4实现从HTTP代理网站批量获取代理并筛选的方法示例
2017/09/26 Python
python中 logging的使用详解
2017/10/25 Python
python实现外卖信息管理系统
2018/01/11 Python
python实现大转盘抽奖效果
2019/01/22 Python
Python3.6中Twisted模块安装的问题与解决
2019/04/15 Python
python爬虫 execjs安装配置及使用
2019/07/30 Python
解决python父线程关闭后子线程不关闭问题
2020/04/25 Python
Python基于jieba, wordcloud库生成中文词云
2020/05/13 Python
Python操作MySQL数据库的示例代码
2020/07/13 Python
python爬取音频下载的示例代码
2020/10/19 Python
意大利灯具购物网站:Lampade.it
2018/10/18 全球购物
CK巴西官方网站:Calvin Klein巴西
2019/07/19 全球购物
物业管理公司实习生自我鉴定
2013/09/19 职场文书
秘书岗位职责
2013/11/18 职场文书
幼儿园消防演练方案
2014/02/13 职场文书
2014年国庆节庆祝建国65周年比赛演讲稿
2014/09/21 职场文书
党政领导班子群众路线对照检查材料
2014/10/26 职场文书