Question

我编写了一个简单的css进程条代码。我需要将范围或文本框值设为Div宽度<div style="width:50%;">，当用户更改范围或文本框等文本框的值时，此代码中的范围值。我可以用javascript做吗？ *我对JS不好，所以不知道如何开始！有可能吗？

这是我的简单代码：

.graph {
width:200px; margin-left:25px; height:20px;
background: rgb(168,168,168);
background: -moz-linear-gradient(top, rgba(168,168,168,1) 0%, rgba(204,204,204,1) 23%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(168,168,168,1)), color-stop(23%,rgba(204,204,204,1)));
background: -webkit-linear-gradient(top, rgba(168,168,168,1) 0%,rgba(204,204,204,1) 23%);
background: -o-linear-gradient(top, rgba(168,168,168,1) 0%,rgba(204,204,204,1) 23%);
background: -ms-linear-gradient(top, rgba(168,168,168,1) 0%,rgba(204,204,204,1) 23%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a8a8a8', endColorstr='#cccccc',GradientType=0 );
background: linear-gradient(top, rgba(168,168,168,1) 0%,rgba(204,204,204,1) 23%);
position: relative;
  }
#bar {
background:#09C; height:20px;               
}

<div id="progress" class="graph"><div id="bar" style="width:50%;"></div></div>
<br>
<form>
<input type="range" min="0" max="100"  step="5" onchange="rangevalue.value=value" id="textvalue" />
<br>
<input type="text" maxlength="3" id="rangevalue" onchange="textvalue.value=value">
</form>

Answer 1

简单，只需将更改事件连接到滑块＆amp;文本框，并适当调整栏。

$(document).on('change','#rangevalue, #textvalue',function(){
  $('#bar').css('width',$(this).val() + '%');
  });

.graph {
width:200px; margin-left:25px; height:20px;
background: rgb(168,168,168);
background: -moz-linear-gradient(top, rgba(168,168,168,1) 0%, rgba(204,204,204,1) 23%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(168,168,168,1)), color-stop(23%,rgba(204,204,204,1)));
background: -webkit-linear-gradient(top, rgba(168,168,168,1) 0%,rgba(204,204,204,1) 23%);
background: -o-linear-gradient(top, rgba(168,168,168,1) 0%,rgba(204,204,204,1) 23%);
background: -ms-linear-gradient(top, rgba(168,168,168,1) 0%,rgba(204,204,204,1) 23%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a8a8a8', endColorstr='#cccccc',GradientType=0 );
background: linear-gradient(top, rgba(168,168,168,1) 0%,rgba(204,204,204,1) 23%);
position: relative;
  }
#bar {
background:#09C; height:20px;               
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="progress" class="graph"><div id="bar" style="width:50%;"></div></div>
<br>
<form>
<input type="range" min="0" max="100"  step="5" onchange="rangevalue.value=value" id="textvalue" />
<br>
<input type="text" maxlength="3" id="rangevalue" onchange="textvalue.value=value">
</form>

Answer 2

〜更新以更改文本框。

function changeGraph(rangeValue){
  document.getElementById('bar').style.width=rangeValue+"%";
  document.getElementById('rangevalue').value=rangeValue;
}

.graph {
width:200px; margin-left:25px; height:20px;
background: rgb(168,168,168);
background: -moz-linear-gradient(top, rgba(168,168,168,1) 0%, rgba(204,204,204,1) 23%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(168,168,168,1)), color-stop(23%,rgba(204,204,204,1)));
background: -webkit-linear-gradient(top, rgba(168,168,168,1) 0%,rgba(204,204,204,1) 23%);
background: -o-linear-gradient(top, rgba(168,168,168,1) 0%,rgba(204,204,204,1) 23%);
background: -ms-linear-gradient(top, rgba(168,168,168,1) 0%,rgba(204,204,204,1) 23%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a8a8a8', endColorstr='#cccccc',GradientType=0 );
background: linear-gradient(top, rgba(168,168,168,1) 0%,rgba(204,204,204,1) 23%);
position: relative;
  }
#bar {
background:#09C; height:20px;               
}

<div id="progress" class="graph"><div id="bar" style="width:50%;"></div></div>
<br>
<form>
<input type="range" min="0" max="100"  step="5" onchange="changeGraph(this.value)" />
<br>
<input type="text" maxlength="3" id="rangevalue" >
</form>

Answer 3

或者，您可以使用jQueryUI滑块库执行以下操作：

<强> FIDDLE

$(function () {
    var $slider = $("#slider-range-min").slider({
        range: "min",
        value: $('#amount').val(),
        min: 0,
        max: 100,
        step: 5,
        slide: function (event, ui) {
            $("#amount").val(ui.value);
        }
    });
    $("#amount").keyup(function(e) {
        $slider.slider('value', $(this).val());   
    });
});

HTML

<p>
    <label for="amount">Progress</label>
    <input type="number" id="amount" value="20" style="border:1; color:#f6931f; font-weight:bold;">
</p>
<div id="slider-range-min"></div>

使用Javascript获取范围输入值到css

3 个答案: