如何在javascript中通过移动滑块来增加圆中的线条_Javascript_Html_Dom

如何在javascript中通过移动滑块来增加圆中的线条

javascript html dom

如何在javascript中通过移动滑块来增加圆中的线条,javascript,html,dom,Javascript,Html,Dom,我想写一个代码，通过移动滑块来增加圆内的线条，下面是我编写的代码，它显示一个值，但在移动滑块时不增加其他行。请帮我输入这个密码 <html> <head> <style> #circle { height: 80px; width: 80px; margin-left: 30px; margin-top: 30px;

我想写一个代码，通过移动滑块来增加圆内的线条，下面是我编写的代码，它显示一个值，但在移动滑块时不增加其他行。请帮我输入这个密码

<html>
<head>
    <style>
        #circle {
            height: 80px;
            width: 80px;
            margin-left: 30px;
            margin-top: 30px;
            background-color: #fff;
            border: 2px solid blue;
            border-radius: 80px;
            position: absolute;
        }
    </style>
</head>
<body>
    <div class="slidecontainer">
        <input type="range" min="1" max="100" value="0" class="slider" id="myRange">
    </div>
    <div id="circle"></div>
    <script>
        var a = document.getElementById("myRange");
        var U = a.value;
        drawNLines(U, 40, 40, 40);

        function drawNLines(N, centreX, centreY, radius) {
            for (i = 0; i < N; i++) {
                angle = 360 / N;
                x2 = centreX + radius * Math.cos(Math.PI * angle * i / 180);
                y2 = centreY + radius * Math.sin(Math.PI * angle * i / 180);
                DrawLine(centreX, centreY, x2, y2);
            }

    </script>
</body>
</html>```


#圈{
高度：80px；
宽度：80px；
左边距：30px；
边缘顶部：30px；
背景色：#fff；
边框：2件纯蓝；
边界半径：80px；
位置：绝对位置；
}
var a=document.getElementById（“myRange”）；
var U=a.值；
绘图线（U、40、40、40）；
函数绘图线（N、centreX、centreY、半径）{
对于（i=0；i

使用“onchange”
当前，您的drawNLines
代码只运行一次，固定值为N
我给您的提示是在input
标记中添加onchange
属性，这将是一个在脚本开头重新运行3行的函数
<input onchange="draw" type="range" min="1" max="100" value="0" class="slider" id="myRange">

如果要确保在开始时绘制图像（无需等待用户移动滑块），则应额外调用draw（）.不起作用..我已经放置了onchange，我应该添加更多的代码吗？这是我参考的代码。我想添加一个滑块以增加圆圈内绘制的线条数。是否可能？？？您添加的链接非常有用，因为有一段代码可以由网站访问者执行，这有助于他们理解了解你想要什么，并引导他们知道你可能做错了什么。使用“Snippet”工具在你的问题中添加一段运行代码，你就更有可能得到精确的帮助。
function draw(){
  var a = document.getElementById("myRange");
  var U = a.value;
  drawNLines(U, 40, 40, 40);
}