html滑块数值怎么显示,显示HTML5滑块值旁边的百分比
我有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滑块值旁边的百分比相关推荐
- FairyGUI增益BUFF数值改变的显示
FairyGUI增益BUFF数值改变的显示 点击此处下载素材 一.FGUI中的操作 1.导入资源 2.新建两个位图字体和一个动画 (1)addValue位图字体 (2)attackValue位图字体 ...
- html 文件域变滑块,小巧的jQuery区域范围滑块插件noUiSlider
小巧的jQuery区域范围滑块插件noUiSlider 分类:代码 日期:2020-02-10 点击(21,970) 下载(0) 来源:未知 收藏 区域范围滑块在 Windows 系统中很常见,如更改 ...
- Microsoft Excel 教程:如何在 Excel 中显示或隐藏零值?
欢迎观看 Microsoft Excel 教程,小编带大家学习 Microsoft Excel 的使用技巧,了解如何在 Excel 中显示或隐藏零值. 在 Excel 中有时希望将零值显示为空单元格, ...
- Ubuntu系统在VMware虚拟机中显示显示过小
Ubuntu系统在VMware中显示显示过小 安装Ubuntu之后,显示画面非常小,System Settings中设置分辨率则提示Unknown Display.无法通过设置调节屏幕分辨率. 解决办 ...
- .Net有关问题。在GridView中添加了一个HyperLinkField,用来显示显示详细信息,请教跳转后的详细信息页面该怎样写代码
.Net问题...在GridView中添加了一个HyperLinkField,用来显示显示详细信息,请问跳转后的详细信息页面该怎样写代码 在一个页面的GridView中添加了下面的代码: <as ...
- Java黑皮书课后题第5章:**5.38(十进制转八进制)编写程序,提示用户输入一个十进制整数,然后显示对应的八进制值。(不要是使用Java的Integer类的任何方法)
**5.38(十进制转八进制)编写程序,提示用户输入一个十进制整数,然后显示对应的八进制值.(不要是使用Java的Integer类的任何方法) 题目 题目概述 破题 代码 运行示例 题目 题目概述 * ...
- Java黑皮书课后题第5章:**5.37(十进制转二进制)编写程序,提示用户输入一个十进制整数,然后显示对应的二进制值(不要使用Integer.toBinaryString(int)方法)
5.37(十进制转二进制)编写程序,提示用户输入一个十进制整数,然后显示对应的二进制值 题目 题目概述 破题 代码 运行示例 题目 题目概述 5.37(十进制转二进制)编写程序,提示用户输入一个十进制 ...
- 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.对其它输入,提示非法等级 题目 题目概述 运行示例 破题 代码 题目 题目 ...
- 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 ...
最新文章
- 采集Nginx日志的几种方式
- 写底部样式一定要加的属性
- CentOS7安装Docker详细教程
- 华为Mate20首支预告片爆出,30秒内包含太多黑科技
- 怎样分组教学计算机学生才有兴趣,学生计算机论文,关于如何激发职业中专学生学习计算机的兴趣相关参考文献资料-免费论文范文...
- irrlicht v1.6 例程18 Splitscreen
- oracle实现id自增和设置主键
- 二级域名是否可以随意设定_新老域名是否影响SEO优化收录排名?企业需要多域名做网站吗?...
- 安装php-amqplib(RabbitMQ的phpAPI)
- android 广播观察者,作业三——观察者模式在Android广播机制上的应用
- php扩展传参,c写php扩展传参学习记录
- 语义替换脚本——论文降重GUI
- oracle19c报价_Oracle 19c下载
- BootStrap表格鼠标悬停颜色修改
- RTL8192EU调试信息
- HTML 表单元素的基本样式
- 让发展中国家展示清洁能源领导力
- centos7 shell脚本开机自启动(亲测可用)
- 嵌入式工程师不能不参加的技术盛会
- springboot微信公众号发送模板消息