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


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 相关文章推荐
Dom加载让图片加载完再执行的脚本代码
May 15 Javascript
JavaScript 学习笔记(十二) dom
Jan 21 Javascript
JavaScript 空位补零实现代码
Feb 26 Javascript
表单元素与非表单元素刷新区别详细解析
Nov 06 Javascript
JS实现根据当前文字选择返回被选中的文字
May 21 Javascript
JavaScript中统计Textarea字数并提示还能输入的字符
Jun 10 Javascript
微信小程序教程系列之视图层的条件渲染(10)
Apr 19 Javascript
解决VUEX刷新的时候出现数据消失
Jul 03 Javascript
js仿微信抢红包功能
Sep 25 Javascript
js的函数的按值传递参数(实例讲解)
Nov 16 Javascript
在 Vue-CLI 中引入 simple-mock实现简易的 API Mock 接口数据模拟
Nov 28 Javascript
vue实现在线预览pdf文件和下载(pdf.js)
Nov 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
PHP获取指定函数定义在哪个文件中以及其所在的行号实例
2014/05/08 PHP
CodeIgniter中使用cookie的三种方式详解
2014/07/18 PHP
WampServer搭建php环境时遇到的问题汇总
2015/07/23 PHP
微信公众号开发之语音消息识别php代码
2016/08/08 PHP
PHP 多进程与信号中断实现多任务常驻内存管理实例方法
2019/10/04 PHP
jQuery+CSS3实现3D立方体旋转效果
2015/11/10 Javascript
Jquery基础之事件操作详解
2016/06/14 Javascript
jQuery继承extend用法详解
2016/10/10 Javascript
JavaScript实现自动切换图片代码
2016/10/11 Javascript
Angular.js中window.onload(),$(document).ready()的写法浅析
2017/09/28 Javascript
Vue-router结合transition实现app前进后退动画切换效果的实例
2017/10/11 Javascript
解决Mac安装thrift因bison报错的问题
2018/05/17 Javascript
浅谈JS对象添加getter与setter的5种方法
2018/06/09 Javascript
this在vue和小程序中的使用详解
2019/01/28 Javascript
解决vue+ element ui 表单验证有值但验证失败问题
2020/01/16 Javascript
vue实现从外部修改组件内部的变量的值
2020/07/30 Javascript
python将xml xsl文件生成html文件存储示例讲解
2013/12/03 Python
python计算圆周长、面积、球体体积并画出圆
2014/04/08 Python
在Python的struct模块中进行数据格式转换的方法
2015/06/17 Python
Python selenium如何设置等待时间
2016/09/15 Python
numpy数组拼接简单示例
2017/12/15 Python
用python写一个定时提醒程序的实现代码
2019/07/22 Python
利用Pandas和Numpy按时间戳将数据以Groupby方式分组
2019/07/22 Python
使用Python给头像加上圣诞帽或圣诞老人小图标附源码
2019/12/25 Python
计算pytorch标准化(Normalize)所需要数据集的均值和方差实例
2020/01/15 Python
Django 5种类型Session使用方法解析
2020/04/29 Python
CSS3实现文字波浪线效果示例代码
2016/11/20 HTML / CSS
美国知名的时尚购物网站:Anthropologie
2016/12/22 全球购物
荷兰多品牌网上鞋店:Stoute Schoenen
2017/08/24 全球购物
高尔夫球鞋、服装、手套和装备:FootJoy
2018/12/15 全球购物
企业厂长岗位职责
2013/12/17 职场文书
《桂花雨》教学反思
2014/04/12 职场文书
开展批评与自我批评发言材料
2014/10/17 职场文书
获奖感言范文
2015/07/31 职场文书
《所见》教学反思
2016/02/23 职场文书
Golang 正则匹配效率详解
2021/04/25 Golang