Question

我在将setTimeout（来自JavaScript文件）连接到游侠表单（位于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;

这是html：

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

CSS：

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

将setInterval分配给范围表单

0 个答案: