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


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 相关文章推荐
用js实现的一个Flash滚动轮换显示图片代码生成器
Mar 14 Javascript
AJAX使用了UpdatePanel后无法使用alert弹出脚本
Apr 02 Javascript
JavaScript游戏之优化篇
Nov 08 Javascript
JavaScript实现统计文本框Textarea字数增强用户体验
Dec 21 Javascript
js解决弹窗问题实现班级跳转DIV示例
Jan 06 Javascript
javascript实现图像循环明暗变化的方法
Feb 25 Javascript
JavaScript中setUTCFullYear()方法的使用简介
Jun 12 Javascript
js实现简单的验证码
Dec 25 Javascript
xtemplate node.js 的使用方法实例解析
Aug 22 Javascript
AngularJS Phonecat实例讲解
Nov 21 Javascript
简述JS控制台的使用
Jul 15 Javascript
easyUI 实现的后台分页与前台显示功能示例
Jun 01 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
第4章 数据处理-php数组的处理-郑阿奇
2011/07/04 PHP
说说PHP的autoLoad自动加载机制
2012/09/27 PHP
彪哥1.1(智能表格)提供下载
2006/09/07 Javascript
用JS控制回车事件的代码
2011/02/20 Javascript
js当一个变量为函数时 应该注意的一点细节小结
2011/12/29 Javascript
js插件方式打开pdf文件(浏览器pdf插件分享)
2013/12/20 Javascript
jQuery实现div浮动层跟随页面滚动效果
2014/02/11 Javascript
javascript省市区三级联动下拉框菜单实例演示
2015/11/29 Javascript
JavaScript获取当前运行脚本文件所在目录的方法
2016/02/03 Javascript
nodejs的压缩文件模块archiver用法示例
2017/01/18 NodeJs
javascript实现的图片预览功能
2017/03/25 Javascript
jQuery实现 RadioButton做必选校验功能
2017/06/15 jQuery
微信小程序实现换肤功能
2018/03/14 Javascript
基于vue.js中关于下拉框的值默认及绑定问题
2018/08/22 Javascript
vue生命周期的探索
2019/04/03 Javascript
微信小程序实现类似微信点击语音播放效果
2020/03/30 Javascript
vue实现随机验证码功能(完整代码)
2019/12/10 Javascript
Vue过渡效果之CSS过渡详解(结合transition,animation,animate.css)
2020/02/05 Javascript
vue中重定向redirect:‘/index‘,不显示问题、跳转出错的完美解决
2020/09/28 Javascript
Python如何快速实现分布式任务
2017/07/06 Python
Python中利用aiohttp制作异步爬虫及简单应用
2018/11/29 Python
python3+pyqt5+itchat微信定时发送消息的方法
2019/02/20 Python
Python日期时间Time模块实例详解
2019/04/15 Python
python发qq消息轰炸虐狗好友思路详解(完整代码)
2020/02/15 Python
联想墨西哥官方网站:Lenovo墨西哥
2016/08/17 全球购物
Cinque网上商店:德国服装品牌
2019/03/17 全球购物
介绍一下Make? 为什么使用make
2016/07/31 面试题
机械工程师的岗位职责
2013/11/17 职场文书
总经理司机岗位职责
2014/02/06 职场文书
保护黄河倡议书
2014/05/16 职场文书
小学生环保标语
2014/06/13 职场文书
家具商场的活动方案
2014/08/16 职场文书
免职证明样本
2014/10/23 职场文书
2014年幼儿园教师工作总结
2014/11/08 职场文书
2014年远程教育工作总结
2014/12/09 职场文书
vue实现可以快进后退的跑马灯组件
2022/04/08 Vue.js