Javascript 将setInterval指定给范围窗体_Javascript_Forms_Canvas_Range_Setinterval

Javascript 将setInterval指定给范围窗体

javascript forms canvas

Javascript 将setInterval指定给范围窗体,javascript,forms,canvas,range,setinterval,Javascript,Forms,Canvas,Range,Setinterval,我在将我的setTimeout（来自JavaScript文件）连接到ranger表单（位于HTML文件中）时遇到问题 HTML中的代码是自己工作的，但当它链接到外部HTML文件时就不工作了以下是JavaScript代码： //javascript var canvas = document.getElementById('canvas'); var c = canvas.getContext('2d'); var i = 0; var speed = 50; function smoke3(

我在将我的

setTimeout

（来自JavaScript文件）连接到ranger表单（位于HTML文件中）时遇到问题

HTML中的代码是自己工作的，但当它链接到外部HTML文件时就不工作了

以下是JavaScript代码：

//javascript
var canvas = document.getElementById('canvas');
var c = canvas.getContext('2d');
var i = 0;
var speed = 50;

function smoke3() {
    particles = {};
    particleIndex = 0;
    particleNum = 20;

    function Particle(){
        this.x = canvas.width/2.7;
        this.y = canvas.height/5.6;
        this.vx = Math.random() * 5 - 3;
        this.vy = Math.random() * 8 - 6;
        this.gravity = -0.8;
        particleIndex++;
        particles[particleIndex] = this;
        this.id = particleIndex;
        this.life = 1;
        this.maxLife = Math.random() * 10 + 80;
        this.color = "rgba("+parseInt(Math.random()*50, 10) + " , " +
            +parseInt(Math.random()*30, 10) + " , " +
            +parseInt(Math.random()*50, 10) + " , " + "0.5";
    }

    Particle.prototype.draw = function (){
        this.x += this.vx;
        this.y += this.vy;
        this.vy += this.gravity;
        this.life++;
        if (this.life >= this.maxLife) {
            delete particles[this.id];
        }
        c.fillStyle = this.color;
        c.fillRect(this.x, this.y, 20, 20);
    };

    function bigSmoke()
        var speedCont = document.getElementById('speedCont');
    {
        for (var i = 0; i < particleNum; i++){
            new Particle();

        for (var i in particles) {
            particles[i].draw();
        }
    }
    window.setTimeout(bigSmoke, speed); 
}
//window.addEventListener("load", smoke3, false);
window.onload = smoke3;

我修复了你所有的语法错误，至少做了一些看起来有点像smoke work->的东西，你根本没有解释范围滑块应该做什么，也没有为它添加任何代码，所以这是任何人的猜测？你好，谢谢你的帮助！滑块的作用是让烟更快或更慢地从管道中喷出，这不在.js文件中（这是另一个我没有在这里发布的版本。因此，基本上，我想我想说的是，滑块会在setTimeout函数中切换烟雾喷出的速度，我不知道如何将其连接到滑块上。你难道不改变

速度

来做到这一点吗->我修复了你所有的语法错误，至少st做了一些看起来有点像烟雾的工作->的东西，你根本没有解释范围滑块应该做什么，也没有为它添加任何代码，所以这是任何人猜测的？您好，谢谢您的帮助！滑块应该让烟雾更快或更慢地从管道中吹出，这不在.js文件中（这是另一个我没有在这里发布的版本。因此，基本上，我想我想说的是，滑块会在setTimeout函数中切换烟雾喷出的速度，我不知道如何将其连接到滑块上。你难道不改变

速度

来实现这一点->

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8"/>
    <link rel="stylesheet" href="style.css"/>

</head>
<body>
    <canvas id="canvas" width="500" height="500">Get a new Browser!</canvas>
    <script src="script.js" ></script>
    <script src="smoke.js" ></script>
    <br/>

    <form>
    <input type="range" min="10" max="250" value="125" />
    <div id="speedCont"></div>
    </form>

</body>
</html>

#canvas {
    background-color: aqua;
    border: 1px solid black;
    margin-bottom: 10px ;
}
body {
    background-color: gray;
}

input[type=range] {
    -webkit-appearance: none;
    border: 3px solid black;
    width: 500px;
    border-radius: 20px;
}
input[type=range]::-webkit-slider-runnable-track {
    width: 500px;
    height: 10px;
    background: #ddd;
    border: none;
    border-radius: 20px;
}
input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    border: 3px solid black;
    height: 30px;
    width: 30px;
    border-radius: 50%;
    background: red;
    margin-top: -8px;
}
input[type=range]:focus {
    outline: none;
}
input[type=range]:focus::-webkit-slider-runnable-track {
    background: #ccc;
}