javascript - 一起改变两个范围-javascript

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

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>

最佳答案

如果要按比例更改宽度和高度，则需要将其值保存在某处。这样，您就可以从中进行参考。然后，只需添加这些参考点即可。

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';
}

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>

上面的方法可以工作，但是我个人会整理一下。

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();

/* Separate CSS from HTML */
input {
  width: 100%;
}

p {
  background-color: red;
}

<!-- 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>