个人中心
gpt4 book ai didi

javascript - 在 HTML 中显示当前 slider 值(输入类型 = "range")

转载 作者：太空宇宙 更新时间：2023-11-03 22:46:50 26 4
gpt4 key购买 nike

我正在用 JS 制作一个简单的李萨如图形生成器。我无法在 html 代码中显示当前 slider 值。完整代码如下:

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

关于javascript - 在 HTML 中显示当前 slider 值(输入类型 = "range")，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41579811/

26 4 0
文章推荐： node.js - ExpressJS next ('route' )打破了我的路线
文章推荐： xml - 在 Node 中为 xml 模板化 ejs
文章推荐： python - 安装 OpenCV
文章推荐： node.js - Count 方法在环回中与 where 子句一起使用时会引发语法错误
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com