我有6个滑块,每个滑块的相应值都是0-100。我希望能够在每个滑块的右侧显示每个滑块百分比(相对于总滑块总数),但我不确定如何做到这一点。显示HTML5滑块值旁边的百分比

我能抢滑块值上面显示,以及滑块值和值,如JavaScript变量的总和,但我不能......

1)更新的百分比(我想我可能需要编写一个单独的函数来完成此操作,然后在显示滑块值后立即调用它)或

2)显示百分比值一个有效的整数)在滑块值的后面。

任何人都可以告诉我如何做到这一点?从技术角度来看,这不应该很困难,但我在这方面经验不足。我也没有使用jquery(正如你所知道的)......谢谢!

First Weight

40

/ PERCENTAGE%

function get_nextsibling(n) {

x=n.nextSibling;

while (x.nodeType!=1) {

x=x.nextSibling; }

return x; }

function showValue(self) {

get_nextsibling(self).innerHTML=self.value; }

Second Weight

10

/ PERCENTAGE%

Third Weight

20

/ PERCENTAGE%

Fourth Weight

5

/ PERCENTAGE%

Fifth Weight

5

/ PERCENTAGE%

Sixth Weight

20

/ PERCENTAGE%

var weightfactor1 = parseInt(document.getElementById("weight1").value) ;

var weightfactor2 = parseInt(document.getElementById("weight2").value) ;

var weightfactor3 = parseInt(document.getElementById("weight3").value) ;

var weightfactor4 = parseInt(document.getElementById("weight4").value) ;

var weightfactor5 = parseInt(document.getElementById("weight5").value) ;

var weightfactor6 = parseInt(document.getElementById("weight6").value) ;

var weight_factor_sum = weightfactor1 + weightfactor2 + weightfactor3 + weightfactor4 + weightfactor5 + weightfactor6 ;

document.getElementById('val_weight1').innerHTML = (weightfactor1/weight_factor_sum)*100;

document.getElementById('val_weight2').innerHTML = (weightfactor2/weight_factor_sum)*100;

document.getElementById('val_weight3').innerHTML = (weightfactor3/weight_factor_sum)*100;

document.getElementById('val_weight4').innerHTML = (weightfactor4/weight_factor_sum)*100;

document.getElementById('val_weight5').innerHTML = (weightfactor5/weight_factor_sum)*100;

document.getElementById('val_weight6').innerHTML = (weightfactor6/weight_factor_sum)*100;

2014-01-19

Conor

html滑块数值怎么显示,显示HTML5滑块值旁边的百分比相关推荐

  1. FairyGUI增益BUFF数值改变的显示

    FairyGUI增益BUFF数值改变的显示 点击此处下载素材 一.FGUI中的操作 1.导入资源 2.新建两个位图字体和一个动画 (1)addValue位图字体 (2)attackValue位图字体 ...

  2. html 文件域变滑块,小巧的jQuery区域范围滑块插件noUiSlider

    小巧的jQuery区域范围滑块插件noUiSlider 分类:代码 日期:2020-02-10 点击(21,970) 下载(0) 来源:未知 收藏 区域范围滑块在 Windows 系统中很常见,如更改 ...

  3. Microsoft Excel 教程:如何在 Excel 中显示或隐藏零值?

    欢迎观看 Microsoft Excel 教程,小编带大家学习 Microsoft Excel 的使用技巧,了解如何在 Excel 中显示或隐藏零值. 在 Excel 中有时希望将零值显示为空单元格, ...

  4. Ubuntu系统在VMware虚拟机中显示显示过小

    Ubuntu系统在VMware中显示显示过小 安装Ubuntu之后,显示画面非常小,System Settings中设置分辨率则提示Unknown Display.无法通过设置调节屏幕分辨率. 解决办 ...

  5. .Net有关问题。在GridView中添加了一个HyperLinkField,用来显示显示详细信息,请教跳转后的详细信息页面该怎样写代码

    .Net问题...在GridView中添加了一个HyperLinkField,用来显示显示详细信息,请问跳转后的详细信息页面该怎样写代码 在一个页面的GridView中添加了下面的代码: <as ...

  6. Java黑皮书课后题第5章:**5.38(十进制转八进制)编写程序,提示用户输入一个十进制整数,然后显示对应的八进制值。(不要是使用Java的Integer类的任何方法)

    **5.38(十进制转八进制)编写程序,提示用户输入一个十进制整数,然后显示对应的八进制值.(不要是使用Java的Integer类的任何方法) 题目 题目概述 破题 代码 运行示例 题目 题目概述 * ...

  7. Java黑皮书课后题第5章:**5.37(十进制转二进制)编写程序,提示用户输入一个十进制整数,然后显示对应的二进制值(不要使用Integer.toBinaryString(int)方法)

    5.37(十进制转二进制)编写程序,提示用户输入一个十进制整数,然后显示对应的二进制值 题目 题目概述 破题 代码 运行示例 题目 题目概述 5.37(十进制转二进制)编写程序,提示用户输入一个十进制 ...

  8. Java黑皮书课后题第4章:*4.14(转换字母等级为数字)编写程序,提示用户输入一个字母等级A、B、C、D或者F,显示对应的数字值4、3、2、1或者0。对其它输入,提示非法等级

    *4.14(转换字母等级为数字)编写程序,提示用户输入一个字母等级A.B.C.D或者F,显示对应的数字值4.3.2.1或者0.对其它输入,提示非法等级 题目 题目概述 运行示例 破题 代码 题目 题目 ...

  9. python如何绘制曲线图_python pandas plot画折线图如何显示x轴的值?

    在使用python pandas Series plot画折线图时,不知道该如何显示x轴的值. 代码: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 ...

最新文章

  1. 采集Nginx日志的几种方式
  2. 写底部样式一定要加的属性
  3. CentOS7安装Docker详细教程
  4. 华为Mate20首支预告片爆出,30秒内包含太多黑科技
  5. 怎样分组教学计算机学生才有兴趣,学生计算机论文,关于如何激发职业中专学生学习计算机的兴趣相关参考文献资料-免费论文范文...
  6. irrlicht v1.6 例程18 Splitscreen
  7. oracle实现id自增和设置主键
  8. 二级域名是否可以随意设定_新老域名是否影响SEO优化收录排名?企业需要多域名做网站吗?...
  9. 安装php-amqplib(RabbitMQ的phpAPI)
  10. android 广播观察者,作业三——观察者模式在Android广播机制上的应用
  11. php扩展传参,c写php扩展传参学习记录
  12. 语义替换脚本——论文降重GUI
  13. oracle19c报价_Oracle 19c下载
  14. BootStrap表格鼠标悬停颜色修改
  15. RTL8192EU调试信息
  16. HTML 表单元素的基本样式
  17. 让发展中国家展示清洁能源领导力
  18. centos7 shell脚本开机自启动(亲测可用)
  19. 嵌入式工程师不能不参加的技术盛会
  20. springboot微信公众号发送模板消息

热门文章

  1. LTV 即用户生命周期价值
  2. LeetCode简单题之整理字符串
  3. LeetCode简单题之二进制矩阵中的特殊位置
  4. 自动驾驶传感器比较:激光雷达(LiDAR) vs. 雷达(RADAR)
  5. 用于ONNX的TensorRT后端
  6. 人工智能:深层神经网络
  7. CSS 选择器:BeautifulSoup4解析器
  8. Python数据挖掘:数据转换-数据规范化
  9. Python 合并2个list
  10. python 使用import导入不同文件下的文件