Question

我有三个范围..一个范围改变宽度第二个范围改变高度..我想要第三个范围改变宽度和高度以及相同的值（改变大小）。

function x11() {
  var x1 = document.getElementById("m1").value;
  var mm = document.getElementById("mm").style;
  mm.width = x1 + "px";
}

function x22() {
  var x1 = document.getElementById("m2").value;
  var mm = document.getElementById("mm").style;
  mm.height = x1 + "px";
}

1<input type="range" min="0" max="200" value="100" style="width:100%;" oninput="x11(this.value)" id="m1">
   
2<input type="range" min="0" max="200" value="40" step="0.5" style="width:100%;" oninput="x22(this.value)" id="m2">
    3
<input type="range" style="width:100%;"  id="m3">

<p id="mm" style="width: 150px; height:40px;  background-color:red;"></p>

Answer 1

如果要按比例更改宽度和高度，则需要将其值保存在某处。这样你就有了工作的参考点。然后，只需添加这些参考点即可。

＆＃13;

var width = 100;
var height = 40;
var extra = 0;

// Actually use the passed in value
function x11(x1) {
  var mm = document.getElementById("mm").style;
  width = Number(x1);
  mm.width = (width + extra) + "px";
}

function x22(x1) {
  var mm = document.getElementById("mm").style;
  height = Number(x1);
  mm.height = (height + extra) + "px";
}

function x33(x1) {
  // Change the size proportionally
  var mm = document.getElementById("mm").style;
  extra = Number(x1);
  mm.width = (width + extra) + 'px';
  mm.height = (height + extra) + 'px';
}

＆＃13;

1<input type="range" min="0" max="200" value="100" style="width:100%;" oninput="x11(this.value)" id="m1">
   
2<input type="range" min="0" max="200" value="40" step="0.5" style="width:100%;" oninput="x22(this.value)" id="m2">
    3
<input type="range" style="width:100%;" oninput="x33(this.value)" min="0" max="200" value="0" id="m3">

<p id="mm" style="width: 100px; height:40px;  background-color:red;"></p>

＆＃13;

上述方法可行，但我个人会稍微清理一下。

＆＃13;

var width = 100;
var height = 40;
var margin = 0;

function setWidth(w) {
  width = Number(w);
  drawBox();
}

function setHeight(h) {
  height = Number(h);
  drawBox();
}

function setMargin(m) {
  margin = Number(m);
  drawBox();
}

// Move box drawing to one function
function drawBox() {
  var box = document.getElementById('box').style;
  box.width = (width + margin) + 'px';
  box.height = (height + margin) + 'px';
}

// Avoid having to set the initial size in CSS
drawBox();

＆＃13;

/* Separate CSS from HTML */
input {
  width: 100%;
}

p {
  background-color: red;
}

＆＃13;

<!-- We don't need the IDs since we're getting the value directly -->
<!-- We're also going to use more descriptive function names -->
1 <input type="range" min="0" max="200" value="100" oninput="setWidth(this.value)">
   
2 <input type="range" min="0" max="200" value="40" step="0.5" oninput="setHeight(this.value)">
    
3 <input type="range" min="0" max="200" value="0" oninput="setMargin(this.value)">

<p id="box"></p>

＆＃13;

Answer 2

如果我理解你，你想缩放元素：

function scale(value){
mm=document.getElementById("mm");
mm.width=mm.width*value+"px";
mm.height=mm.height*value+"px";
}

<input oninput="scale(this.value)">

一起改变两个范围 - javascript

2 个答案: