在 HTML 中显示当前滑块值(输入类型 = "range" )

我正在用JS制作一个简单的Lissajous图形生成器。我无法在 html 代码中显示当前滑块值。下面是完整的代码：

<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
    <meta charset="UTF-8">
    <title>Lissajous figures</title>
    <br>
    <script type="application/javascript">
        var ctx;
        var timer = null;
        var aS = new Array();
        var rad = 189;
        var max=3*360, m1=max-1, m2 = max/2;
        var iXo=0, iYo=m2/2;
        var parN=2, parM=1;
        function init() {
            var canvas = document.getElementById("field");
            if (canvas.getContext) { ctx = canvas.getContext("2d");
                sf=Math.sin(3.14159265/m2);  cf=Math.cos(3.14159265/m2);
                s=-sf; c=cf;
                for (i=0; i<m2; i++) {
                    s1=s*cf+c*sf; c=c*cf-s*sf; s=s1;
                    aS[i]=Math.round(rad*(1.+s))+1;
                    aS[i+m2]=Math.round(rad*(1.-s))+1;
                }
                startAnimation();
            }
        }
        function draw() {
            Xo=aS[iXo],Yo=aS[iYo];
            ctx.beginPath();
            ctx.moveTo(Xo,Yo);
            for (j=max; j>0; j--) {
                iX=(iXo+parM) % max; iY=(iYo+parN) % m1;
                X=aS[iX];  Y=aS[iY];
                ctx.lineTo(X,Y);
                iXo=iX; iYo=iY; Xo=X; Yo=Y;
            }
            ctx.clearRect (0, 0, 500, 500);
            ctx.stroke();
			ctx.strokeStyle="green";
			ctx.lineWidth = 3;
        }
        function startAnimation() {
            setInterval(draw,0);
        }
    </script>
</head>
<h1>Lissajous Figure Generator</h1>
<br>
<body onload="init();" bgcolor="black">
<center><canvas id="field" width="400" height="400">
</canvas>
    <br>
    <br>
    <br>
    <h2>Choose parameters value using sliders below:</h2>
	<p><h2>A = <input type="range" id="value1" name="parM_choose" min="1" max="9" value="1" step="1" oninput="parM=parseInt(this.value)">
	<output name="show_parM_val" id="parM">1</output></h2>											
    </p>
	<p><h2>B = <input type="range" id="value2" min="1" max="9" value="2" step="1" oninput="parN=parseInt(this.value)">
   <output name="show_parN_val" id="parN">2</output></h2>
    </p>
</center>
</body>
</html>

如何使输出值起作用？正确的 ID 应该是什么？我在下面谈论代码片段：

<h2>Choose parameters value using sliders below:</h2>
    	<p><h2>A = <input type="range" id="value1" name="parM_choose" min="1" max="9" value="1" step="1" oninput="parM=parseInt(this.value)">
    	<output name="show_parM_val" id="parM">1</output></h2>											
        </p>
    	<p><h2>B = <input type="range" id="value2" min="1" max="9" value="2" step="1" oninput="parN=parseInt(this.value)">
       <output name="show_parN_val" id="parN">2</output></h2>

您的问题是您在幻灯片中设置全局范围变量，但在代码中使用局部变量，请检查此更新的工作示例：

<!doctype html>
<html>
<head>
  <link rel="stylesheet" type="text/css" href="style.css" media="screen" />
  <meta charset="UTF-8">
  <title>Lissajous figures</title>
  <br>
  <script type="application/javascript">
    var ctx;
    var timer = null;
    var aS = new Array();
    var rad = 189;
    var max = 3 * 360,
      m1 = max - 1,
      m2 = max / 2;
    var iXo = 0,
      iYo = m2 / 2;
    parN = 2;
    parM = 1;
    function init() {
      var canvas = document.getElementById("field");
      if (canvas.getContext) {
        ctx = canvas.getContext("2d");
        sf = Math.sin(3.14159265 / m2);
        cf = Math.cos(3.14159265 / m2);
        s = -sf;
        c = cf;
        for (i = 0; i < m2; i++) {
          s1 = s * cf + c * sf;
          c = c * cf - s * sf;
          s = s1;
          aS[i] = Math.round(rad * (1. + s)) + 1;
          aS[i + m2] = Math.round(rad * (1. - s)) + 1;
        }
        startAnimation();
      }
    }
    function draw() {
      Xo = aS[iXo], Yo = aS[iYo];
      ctx.beginPath();
      ctx.moveTo(Xo, Yo);
      for (j = max; j > 0; j--) {
        iX = (iXo + parM) % max;
        iY = (iYo + parN) % m1;
        X = aS[iX];
        Y = aS[iY];
        ctx.lineTo(X, Y);
        iXo = iX;
        iYo = iY;
        Xo = X;
        Yo = Y;
      }
      ctx.clearRect(0, 0, 500, 500);
      ctx.stroke();
      ctx.strokeStyle = "green";
      ctx.lineWidth = 3;
    }
    function startAnimation() {
      setInterval(draw, 0);
    }
  </script>
</head>
<h1>Lissajous Figure Generator</h1>
<br>
<body onload="init();" bgcolor="black">
  <center>
    <canvas id="field" width="400" height="400">
    </canvas>
    <br>
    <br>
    <br>
    <div style="background: #999;">
    <h2>Choose parameters value using sliders below:</h2>
    <p>
      <h2>A = <input type="range" id="value1" name="parM_choose" min="1" max="9" value="1" step="1" oninput="document.getElementById('parM').innerText = parseInt(this.value);parM=parseInt(this.value)">
	<output name="show_parM_val" id="parM">1</output></h2>	
    </p>
    <p>
      <h2>B = <input type="range" id="value2" min="1" max="9" value="2" step="1" oninput="document.getElementById('parN').innerText = parseInt(this.value);parN=parseInt(this.value)">
   <output name="show_parN_val" id="parN">2</output></h2>
    </p>
    </div>
  </center>
</body>
</html>

这有效。使用函数 updateTextInput（val）函数定位元素以更新字段中的值。在这里回答：HTML5输入类型范围显示范围值

  <html>
<head>
<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
    <meta charset="UTF-8">
    <title>Lissajous figures</title>
    <br>
    <script type="application/javascript">
        var ctx;
        var timer = null;
        var aS = new Array();
        var rad = 189;
        var max=3*360, m1=max-1, m2 = max/2;
        var iXo=0, iYo=m2/2;
        var parN=2, parM=1;
        function init() {
            var canvas = document.getElementById("field");
            if (canvas.getContext) { ctx = canvas.getContext("2d");
                sf=Math.sin(3.14159265/m2);  cf=Math.cos(3.14159265/m2);
                s=-sf; c=cf;
                for (i=0; i<m2; i++) {
                    s1=s*cf+c*sf; c=c*cf-s*sf; s=s1;
                    aS[i]=Math.round(rad*(1.+s))+1;
                    aS[i+m2]=Math.round(rad*(1.-s))+1;
                }
                startAnimation();
            }
        }
        function draw() {
            Xo=aS[iXo],Yo=aS[iYo];
            ctx.beginPath();
            ctx.moveTo(Xo,Yo);
            for (j=max; j>0; j--) {
                iX=(iXo+parM) % max; iY=(iYo+parN) % m1;
                X=aS[iX];  Y=aS[iY];
                ctx.lineTo(X,Y);
                iXo=iX; iYo=iY; Xo=X; Yo=Y;
            }
            ctx.clearRect (0, 0, 500, 500);
            ctx.stroke();
            ctx.strokeStyle="green";
            ctx.lineWidth = 3;
        }
        function startAnimation() {
            setInterval(draw,0);
        }
        function updateTextInput(val) {
          document.getElementById('textInput').value=val;
        }
        function updateTextInput2(val) {
          document.getElementById('textInput2').value=val;
        }
    </script>
</head>
<h1>Lissajous Figure Generator</h1>
<br>
<body onload="init();" bgcolor="black">
<center><canvas id="field" width="400" height="400">
</canvas>
    <br>
    <br>
    <br>
    <h2>Choose parameters value using sliders below:</h2>
    <p><h2>A = <input type="range" id="value1" name="parM_choose" min="1" max="9" value="1" step="1" oninput="parM=parseInt(this.value)" onchange="updateTextInput(this.value);">
    <input type="text" id="textInput" value="">
    </p>
    <p><h2>B = <input type="range" id="value2" min="1" max="9" value="2" step="1" oninput="parN=parseInt(this.value)" onchange="updateTextInput2(this.value);">
  <input type="text" id="textInput2" value="">

    </p>
</center>
</body>
</html>

相关内容

最新更新

热门标签：