Closed. This question needs to be more focused。它当前不接受答案。
想改善这个问题吗？更新问题，使其仅通过editing this post专注于一个问题。
3年前关闭。
我已经编写了用于显示范围滑块值的代码。现在，我想添加两个范围滑块值，并将其显示在文本框中。我该怎么做？
想改善这个问题吗？更新问题，使其仅通过editing this post专注于一个问题。
3年前关闭。
我已经编写了用于显示范围滑块值的代码。现在，我想添加两个范围滑块值，并将其显示在文本框中。我该怎么做？
<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.h
{
position:absolute;
left:50px;
top:100px;
}
.P
{
position:absolute;
left:50px;
top:140px;
}
.i1
{
position:absolute;
left:150px;
width:100px;
height:40px;
top:250px;
}
.i2
{
position:absolute;
left:600px;
width:100px;
height:40px;
top:250px;
}
.i3
{
position:absolute;
right:300px;
width:100px;
height:40px;
top:250px;
}
.P1
{
position:absolute;
left:150px;
top:210px;
font-size:15px;
}
.P2
{
position:absolute;
left:600px;
top:210px;
font-size:15px;
}
.img1
{
position:absolute;
left:380px;
width:90px;
height:60px;
top:245px;
}
.img2
{
position:absolute;
right:480px;
width:90px;
height:60px;
top:240px;
}
.r1
{
position:absolute;
bottom:150px;
left:150px;
width:180px;
height:10px;
-webkit-appearance:none;
border-radius:5px;
background:#d7dcdf;
outline:blue;
padding:0;
margin:0;
cursor:pointer;
}
.r1::-webkit-slider-thumb
{
-webkit-appearance:none;
width:20px;
height:20px;
border:0;
border-radius:50%;
background:lightblue;
cursor:pointer;
}
.r1:hover
{
background:lightblue;
}
.spa
{
position:absolute;
bottom:150px;
left:340px;
display:inline-block;
background:lightblue;
border-radius:3px;
line-height:20px;
text-align:center;
padding: 5px 10px;
margin-left: 8px;
}
.P3
{
position:absolute;
left:90px;
bottom:135px;
}
.P4
{
position:absolute;
left:77px;
bottom:95px;
}
.r2
{
position:absolute;
bottom:110px;
left:150px;
width:180px;
height:10px;
-webkit-appearance:none;
border-radius:5px;
background:#d7dcdf;
outline:blue;
padding:0;
margin:0;
cursor:pointer;
}
.r2::-webkit-slider-thumb
{
-webkit-appearance:none;
width:20px;
height:20px;
border:0;
border-radius:50%;
background:lightblue;
cursor:pointer;
}
.r2:hover
{
background:lightblue;
}
.spa1{
position:absolute;
bottom:110px;
left:340px;
display:inline-block;
background:lightblue;
border-radius:3px;
line-height:20px;
text-align:center;
padding: 5px 10px;
margin-left: 8px;
}
</style>
</head>
<body>
<h4 class="h">Score recommendation </h4>
<p class="P">Based on the inputs given by you, we recommend the following score splits that you should aim for to achieve the desired target score </p>
<p class="P1">Quant Score</p>
<input type="text" id="Q1" class="i1" onclick="ret(this.value);" value="">
<img src="plus.png" alt="plus" class="img1">
<p class="P2"> Verbal Score</p>
<input type="text" id="s2" class="i2">
<img src="equal.jpg" alt="equal" class="img2">
<input type="text" id="s3" class="i3">
<p class="P3">Algebra</p><input type="range" min="20" max="180" value="20" step="1" class="r1" onchange="showValue(this.value);" >
<span id="range" class="spa">20</span>
<p class="P4">Arithmetic</p><input type="range" min="20" max="180" value="20" step="1" class="r2" onchange="showValue1(this.value);" >
<span id="range1" class="spa1">20</span>
<script>
function showValue(newValue){
document.getElementById("range").innerHTML=newValue;
}
function showValue1(newValue1){
document.getElementById("range1").innerHTML=newValue1;
}
function ret(q){
var q1,q2;
q1=document.getElementById("range").value;
q2=document.getElementById("range1").value;
q=q1+q2;
document.getElementById("Q1").innerHTML=q;
}
</script>
</body>
</html>最佳答案
尝试这样的事情：
<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.h
{
position:absolute;
left:50px;
top:100px;
}
.P
{
position:absolute;
left:50px;
top:140px;
}
.i1
{
position:absolute;
left:150px;
width:100px;
height:40px;
top:250px;
}
.i2
{
position:absolute;
left:600px;
width:100px;
height:40px;
top:250px;
}
.i3
{
position:absolute;
right:300px;
width:100px;
height:40px;
top:250px;
}
.P1
{
position:absolute;
left:150px;
top:210px;
font-size:15px;
}
.P2
{
position:absolute;
left:600px;
top:210px;
font-size:15px;
}
.img1
{
position:absolute;
left:380px;
width:90px;
height:60px;
top:245px;
}
.img2
{
position:absolute;
right:480px;
width:90px;
height:60px;
top:240px;
}
.r1
{
position:absolute;
bottom:150px;
left:150px;
width:180px;
height:10px;
-webkit-appearance:none;
border-radius:5px;
background:#d7dcdf;
outline:blue;
padding:0;
margin:0;
cursor:pointer;
}
.r1::-webkit-slider-thumb
{
-webkit-appearance:none;
width:20px;
height:20px;
border:0;
border-radius:50%;
background:lightblue;
cursor:pointer;
}
.r1:hover
{
background:lightblue;
}
.spa
{
position:absolute;
bottom:150px;
left:340px;
display:inline-block;
background:lightblue;
border-radius:3px;
line-height:20px;
text-align:center;
padding: 5px 10px;
margin-left: 8px;
}
.P3
{
position:absolute;
left:90px;
bottom:135px;
}
.P4
{
position:absolute;
left:77px;
bottom:95px;
}
.r2
{
position:absolute;
bottom:110px;
left:150px;
width:180px;
height:10px;
-webkit-appearance:none;
border-radius:5px;
background:#d7dcdf;
outline:blue;
padding:0;
margin:0;
cursor:pointer;
}
.r2::-webkit-slider-thumb
{
-webkit-appearance:none;
width:20px;
height:20px;
border:0;
border-radius:50%;
background:lightblue;
cursor:pointer;
}
.r2:hover
{
background:lightblue;
}
.spa1{
position:absolute;
bottom:110px;
left:340px;
display:inline-block;
background:lightblue;
border-radius:3px;
line-height:20px;
text-align:center;
padding: 5px 10px;
margin-left: 8px;
}
</style>
</head>
<body>
<h4 class="h">Score recommendation </h4>
<p class="P">Based on the inputs given by you, we recommend the following score splits that you should aim for to achieve the desired target score </p>
<p class="P1">Quant Score</p>
<input type="text" id="Q1" class="i1" onclick="ret();" value="">
<img src="plus.png" alt="plus" class="img1">
<p class="P2"> Verbal Score</p>
<input type="text" id="s2" class="i2">
<img src="equal.jpg" alt="equal" class="img2">
<input type="text" id="s3" class="i3">
<p class="P3">Algebra</p><input type="range" min="20" max="180" value="20" step="1" class="r1" onchange="showValue(this.value);" >
<span id="range" class="spa">20</span>
<p class="P4">Arithmetic</p><input type="range" min="20" max="180" value="20" step="1" class="r2" onchange="showValue1(this.value);" >
<span id="range1" class="spa1">20</span>
<script>
function showValue(newValue){
document.getElementById("range").textContent=newValue;
}
function showValue1(newValue1){
document.getElementById("range1").textContent=newValue1;
}
function ret(){
var q1,q2;
q1=+document.getElementById("range").textContent;
q2=+document.getElementById("range1").textContent;
q=q1+q2;
document.getElementById("Q1").value=q;
return q;
}
</script>
</body>
</html>07-27 13:42