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


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 相关文章推荐
nullJavascript中创建对象的五种方法实例
May 07 Javascript
javascript 动态生成css代码的两种方法
Mar 17 Javascript
bootstrap响应式导航条模板使用详解(含下拉菜单,弹出框)
Nov 17 Javascript
Vue 应用中结合vux使用微信 jssdk的方法
Aug 28 Javascript
浅谈redux以及react-redux简单实现
Aug 28 Javascript
vue中的router-view组件的使用教程
Oct 23 Javascript
uni-app之APP和小程序微信授权方法
May 09 Javascript
elementUi vue el-radio 监听选中变化的实例代码
Jun 28 Javascript
vue.js购物车添加商品组件的方法
Sep 17 Javascript
element-ui如何防止重复提交的方法步骤
Dec 09 Javascript
解决vue字符串换行问题(绝对管用)
Aug 06 Javascript
输入框跟随文字内容适配宽实现示例
Aug 14 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
PHP中几个常用的魔术常量
2012/02/23 PHP
利用php绘制饼状图的实现代码
2013/06/07 PHP
php中ftp_chdir与ftp_cdup函数用法
2014/11/18 PHP
基于php的微信公众平台开发入门实例
2015/04/15 PHP
php写入、删除与复制文件的方法
2015/06/20 PHP
PHP页面转UTF-8中文编码乱码的解决办法
2015/10/20 PHP
WordPress中使主题支持小工具以及添加插件启用函数
2015/12/22 PHP
php实现评论回复删除功能
2017/05/23 PHP
基于jquery的文本框与autocomplete结合使用(asp.net+json)
2012/05/30 Javascript
11个用于提高排版水平的基于jquery的文字效果插件
2012/09/14 Javascript
Underscore.js常用方法总结
2015/02/28 Javascript
详解XMLHttpRequest(二)响应属性、二进制数据、监测上传下载进度
2016/09/14 Javascript
js+html制作简单日历的方法
2017/06/27 Javascript
JavaScript你不知道的一些数组方法
2017/08/18 Javascript
浅谈react.js中实现tab吸顶效果的问题
2017/09/06 Javascript
node跨域转发 express+http-proxy-middleware的使用
2018/05/31 Javascript
jQuery 获取除某指定对象外的其他对象 ( :not() 与.not())
2018/10/10 jQuery
vue实现按钮切换图片
2021/01/20 Vue.js
[39:00]Optic vs VP 2018国际邀请赛淘汰赛BO3 第三场 8.24
2018/08/25 DOTA
Python中删除文件的程序代码
2011/03/13 Python
python练习程序批量修改文件名
2014/01/16 Python
使用Python脚本在Linux下实现部分Bash Shell的教程
2015/04/17 Python
Python 快速实现CLI 应用程序的脚手架
2017/12/05 Python
Python如何优雅获取本机IP方法
2019/11/10 Python
Python socket连接中的粘包、精确传输问题实例分析
2020/03/24 Python
CSS实现定位元素居中的方法
2015/06/23 HTML / CSS
德国购买踏板车网站:Microscooter
2019/10/14 全球购物
Tommy Hilfiger澳洲官网:美国高端休闲领导品牌
2020/12/16 全球购物
伊莱克斯(Electrolux)俄罗斯网上商店:瑞典家用电器品牌
2021/01/23 全球购物
医学实习生自我鉴定
2013/12/12 职场文书
《兰亭集序》教学反思
2014/02/11 职场文书
国家助学金感谢信
2015/01/21 职场文书
银行柜员优质服务心得体会
2016/01/22 职场文书
该怎么书写道歉信?
2019/07/03 职场文书
Python编程super应用场景及示例解析
2021/10/05 Python
基于Python实现nc批量转tif格式
2022/08/14 Python