2016-11-13 56 views
0

我的代碼是煙囪冒煙的房子。煙霧由setInterval函數控制,該函數連接到HTML頁面上的滑塊,該頁面假設控制煙霧吹出的速度,但當您移動滑塊時,煙霧重新啓動煙霧功能。輸入滑塊的setInterval無法正常工作

如何設置我的滑塊來控制煙霧的速度?

這裏是我的代碼:

/* 
 
    Draws each floor of the canvas. 
 
*/ 
 
function drawFloor() { 
 
    ctx.fillStyle = "white"; 
 
    ctx.fillRect(0, 250, 500, 250); 
 
} 
 
/* 
 
    Draws the front side of the house. 
 
*/ 
 
function drawFront() { 
 
    ctx.fillStyle = "#91AEAC"; 
 
    ctx.beginPath(); 
 
    ctx.moveTo(275,256); \t //tip 
 
    ctx.lineTo(325,350); \t //mid-right 
 
    ctx.lineTo(319,400); \t //bot-right 
 
    ctx.lineTo(250,387); \t //bot-left 
 
    ctx.lineTo(230,325); \t //mid-left 
 
    ctx.closePath(); 
 
    ctx.fill(); 
 
} 
 
/* 
 
    Draws the side of the house. 
 
*/ 
 
function drawSide() { 
 
    ctx.fillStyle = "#6F978F"; 
 
    ctx.beginPath(); 
 
    ctx.moveTo(325,350); \t //top-left 
 
    ctx.lineTo(412,325); \t //top-right 
 
    ctx.lineTo(400,375); \t //bot-right 
 
    ctx.lineTo(319,400); \t //bot-left 
 
    ctx.closePath(); 
 
    ctx.fill(); 
 
} 
 
/* 
 
    Draws the chimney of the house. 
 
*/ 
 
function drawChimney() { 
 
    ctx.beginPath(); 
 
    ctx.moveTo(308,217); \t //top-left 
 
    ctx.lineTo(337,213); \t //top-right 
 
    ctx.lineTo(337,250); \t //bot-right 
 
    ctx.lineTo(312,250); \t //bot-left 
 
    ctx.closePath(); 
 
    ctx.fillStyle = "#8EB0AF"; 
 
    ctx.fill(); 
 
} 
 
/* 
 
    Draws the roof of the house. 
 
*/ 
 
function drawRoof() { 
 
    ctx.fillStyle = "#8E2F35"; 
 
    ctx.beginPath(); 
 
    ctx.moveTo(278,244); \t //top-left 
 
    ctx.lineTo(370,221); \t //top-right 
 
    ctx.lineTo(425,324); \t //bot-right 
 
    ctx.lineTo(334,350); \t //bot-left 
 
    ctx.closePath(); 
 
    ctx.fill(); 
 
    // draw left line of the roof at the from 
 
    ctx.lineWidth=10; 
 
    ctx.strokeStyle = "#C55463"; 
 
    ctx.beginPath(); 
 
    ctx.moveTo(275,250); //top 
 
    ctx.lineTo(220,336); //bot 
 
    ctx.stroke(); 
 
    // draw right line of the roof at the from 
 
    ctx.lineWidth=10; 
 
    ctx.strokeStyle = "#C55463"; 
 
    ctx.beginPath(); 
 
    ctx.moveTo(275,245); //top 
 
    ctx.lineTo(330,352); //bot 
 
    ctx.stroke(); 
 
} 
 
/* 
 
    Draws the door of the house. 
 
*/ 
 
function drawDoor(){ 
 
    // draws the top of the door 
 
    ctx.beginPath(); 
 
    ctx.arc(278, 351, 19, 0, Math.PI*2, true); 
 
    ctx.closePath(); 
 
    ctx.fillStyle = "#C18459"; 
 
    ctx.fill(); 
 
    // draws the bottom of the door 
 
    ctx.beginPath(); 
 
    ctx.moveTo(265,389); \t //bot-left 
 
    ctx.lineTo(258.5,349); \t //top-left 
 
    ctx.lineTo(297,350); \t //top-right 
 
    ctx.lineTo(295,395); \t //bot-right 
 
    ctx.closePath(); 
 
    ctx.fillStyle = "#C18459"; 
 
    ctx.fill(); 
 
    // draws the door knob 
 
    ctx.beginPath(); 
 
    ctx.arc(288, 363, 4, 0, Math.PI*2, true); 
 
    ctx.closePath(); 
 
    ctx.fillStyle = " \t #5F371F"; 
 
    ctx.fill(); 
 
} 
 
/* 
 
    Draws the window of the house. 
 
*/ 
 
function drawWindow() { 
 
    ctx.save(); 
 
    ctx.shadowColor="white"; 
 
    ctx.shadowBlur = 20; 
 
    ctx.beginPath(); 
 
    ctx.moveTo(275,277); \t //tip 
 
    ctx.lineTo(288,300); \t //right 
 
    ctx.lineTo(275,325); \t //bot 
 
    ctx.lineTo(260,301); \t //left 
 
    ctx.closePath(); 
 
    ctx.fillStyle = "#F9F2C5"; 
 
    ctx.fill(); 
 
    ctx.restore(); 
 
} 
 
/* 
 
    Draws the Christmas tree. 
 
*/ 
 
function drawTree() { 
 
    /* 
 
    // tree top 
 
    ctx.beginPath(); 
 
    ctx.moveTo(129,280); \t //tip 
 
    ctx.lineTo(179,415); \t //right 
 
    ctx.lineTo(90,419); \t //left 
 
    ctx.closePath(); 
 
    ctx.fillStyle = "#8E9D2A"; 
 
    ctx.fill(); 
 
    // tree trunk 
 
    ctx.fillStyle = "#A7673B"; 
 
    ctx.beginPath(); 
 
    ctx.moveTo(124,417); \t //top-left 
 
    ctx.lineTo(150,415); \t //top-right 
 
    ctx.lineTo(148,427); \t //bot-right 
 
    ctx.lineTo(128,428); \t //bot-left 
 
    ctx.closePath(); 
 
    ctx.fill(); 
 
    */ 
 
    // tree top 1 
 
    ctx.beginPath(); 
 
    ctx.moveTo(135,350); \t //tip 
 
    ctx.lineTo(179,415); \t //right 
 
    ctx.lineTo(90,419); \t //left 
 
    ctx.closePath(); 
 
    ctx.fillStyle = "#8E9D2A"; 
 
    ctx.fill(); 
 
    // tree top 2 
 
    ctx.beginPath(); 
 
    ctx.moveTo(135,320); \t //tip 
 
    ctx.lineTo(179,385); \t //right 
 
    ctx.lineTo(90,385); \t //left 
 
    ctx.closePath(); 
 
    ctx.fillStyle = "#8E9D2A"; 
 
    ctx.fill(); 
 
    // tree trunk 
 
    ctx.fillStyle = "#A7673B"; 
 
    ctx.beginPath(); 
 
    ctx.moveTo(124,417); \t //top-left 
 
    ctx.lineTo(150,415); \t //top-right 
 
    ctx.lineTo(148,427); \t //bot-right 
 
    ctx.lineTo(128,428); \t //bot-left 
 
    ctx.closePath(); 
 
    ctx.fill(); 
 
} 
 
/* 
 
    Draw the candy cane. 
 
*/ 
 
function drawCandy() { 
 
    ctx.beginPath(); 
 
    ctx.strokeStyle = "#C72828"; 
 
    ctx.beginPath(); 
 
    ctx.lineWidth=8; 
 
    ctx.moveTo(200,435); 
 
    ctx.bezierCurveTo(205,405,220,420,220,460); 
 
    ctx.stroke(); 
 
    ctx.closePath(); 
 
} 
 
/* 
 
    Draws the snowman in the background. 
 
*/ 
 
function drawSnowman() { 
 
    // snowman body 
 
    ctx.beginPath(); 
 
    ctx.arc(80,250,20,0,Math.PI*2,true); 
 
    ctx.closePath(); 
 
    ctx.fillStyle = "#D8D8D8"; 
 
    ctx.fill(); 
 
    // snowman head 
 
    ctx.beginPath(); 
 
    ctx.arc(80,222,13,0,Math.PI*2,true); 
 
    ctx.closePath(); 
 
    ctx.fillStyle = "#D8D8D8"; 
 
    ctx.fill(); 
 
    // snowman hat 
 
    ctx.beginPath(); 
 
    ctx.strokeStyle="#F06140"; 
 
    ctx.rect(78,200,5,5); 
 
    ctx.stroke(); 
 
    ctx.strokeStyle = "#FF4444"; 
 
    ctx.beginPath(); 
 
    ctx.lineWidth=5; 
 
    ctx.moveTo(70,210); //top 
 
    ctx.lineTo(92,210); //bot 
 
    ctx.stroke(); 
 
    // snowman left eye 
 
    ctx.beginPath(); 
 
    ctx.arc(76,220,2,0,Math.PI*2,true); 
 
    ctx.closePath(); 
 
    ctx.fillStyle = "#000000"; 
 
    ctx.fill(); 
 
    // snowman right eye 
 
    ctx.beginPath(); 
 
    ctx.arc(84,220,2,0,Math.PI*2,true); 
 
    ctx.closePath(); 
 
    ctx.fillStyle = "#000000"; 
 
    ctx.fill(); 
 
    // snowman left hand 
 
    ctx.strokeStyle = "#854B24"; 
 
    ctx.beginPath(); 
 
    ctx.lineWidth=3; 
 
    ctx.moveTo(45,235); //top 
 
    ctx.lineTo(62,243); //bot 
 
    ctx.stroke(); 
 
    // snowman right hand 
 
    ctx.strokeStyle = "#854B24"; 
 
    ctx.beginPath(); 
 
    ctx.lineWidth=3; 
 
    ctx.moveTo(113,235); //top 
 
    ctx.lineTo(98,243); //bot 
 
    ctx.stroke(); 
 
} 
 
/* 
 
    Draws the falling snow. 
 
*/ 
 
function drawSnow() { 
 
    for (var i = 0; i < 10; i++) { 
 
     ctx.beginPath(); 
 
     ctx.arc(Math.floor(Math.random()*(500)), Math.floor(Math.random()*(500)) 
 
       , Math.random() + 0.7, 0, 2*Math.PI); 
 
     ctx.closePath(); 
 
     ctx.fillStyle = "#FFFFFF"; 
 
     ctx.fill(); 
 
    } 
 
} 
 
/* 
 
    Draws the stars in the sky. 
 
*/ 
 
function drawStars() { 
 
    ctx.save(); 
 
    ctx.shadowColor="white"; 
 
    ctx.shadowBlur = 10; 
 

 
    ctx.beginPath(); 
 
    ctx.arc(55,115,1,0,Math.PI*2,true); 
 
    ctx.closePath(); 
 
    ctx.fillStyle = "#FFFFFF"; 
 
    ctx.fill(); 
 

 
    ctx.beginPath(); 
 
    ctx.arc(90,90,0.5,0,Math.PI*2,true); 
 
    ctx.closePath(); 
 
    ctx.fillStyle = "#FFFFFF"; 
 
    ctx.fill(); 
 

 
    ctx.beginPath(); 
 
    ctx.arc(100,30,1,0,Math.PI*2,true); 
 
    ctx.closePath(); 
 
    ctx.fillStyle = "#FFFFFF"; 
 
    ctx.fill(); 
 

 
    ctx.beginPath(); 
 
    ctx.arc(120,48,0.4,0,Math.PI*2,true); 
 
    ctx.closePath(); 
 
    ctx.fillStyle = "#FFFFFF"; 
 
    ctx.fill(); 
 

 
    ctx.beginPath(); 
 
    ctx.arc(133,100,0.8,0,Math.PI*2,true); 
 
    ctx.closePath(); 
 
    ctx.fillStyle = "#FFFFFF"; 
 
    ctx.fill(); 
 

 
    ctx.beginPath(); 
 
    ctx.arc(150,80,1,0,Math.PI*2,true); 
 
    ctx.closePath(); 
 
    ctx.fillStyle = "#FFFFFF"; 
 
    ctx.fill(); 
 

 
    ctx.beginPath(); 
 
    ctx.arc(224,155,0.5,0,Math.PI*2,true); 
 
    ctx.closePath(); 
 
    ctx.fillStyle = "#FFFFFF"; 
 
    ctx.fill(); 
 

 
    ctx.beginPath(); 
 
    ctx.arc(250,50,1,0,Math.PI*2,true); 
 
    ctx.closePath(); 
 
    ctx.fillStyle = "#FFFFFF"; 
 
    ctx.fill(); 
 

 
    ctx.beginPath(); 
 
    ctx.arc(290,100,0.5,0,Math.PI*2,true); 
 
    ctx.closePath(); 
 
    ctx.fillStyle = "#FFFFFF"; 
 
    ctx.fill(); 
 

 
    ctx.beginPath(); 
 
    ctx.arc(400,100,1,0,Math.PI*2,true); 
 
    ctx.closePath(); 
 
    ctx.fillStyle = "#FFFFFF"; 
 
    ctx.fill(); 
 

 
    ctx.beginPath(); 
 
    ctx.arc(430,111,1.2,0,Math.PI*2,true); 
 
    ctx.closePath(); 
 
    ctx.fillStyle = "#FFFFFF"; 
 
    ctx.fill(); 
 

 
    ctx.beginPath(); 
 
    ctx.arc(444,48,0.5,0,Math.PI*2,true); 
 
    ctx.closePath(); 
 
    ctx.fillStyle = "#FFFFFF"; 
 
    ctx.fill(); 
 

 
    ctx.beginPath(); 
 
    ctx.arc(450,155,0.6,0,Math.PI*2,true); 
 
    ctx.closePath(); 
 
    ctx.fillStyle = "#FFFFFF"; 
 
    ctx.fill(); 
 

 
    ctx.beginPath(); 
 
    ctx.arc(480,120,0.6,0,Math.PI*2,true); 
 
    ctx.closePath(); 
 
    ctx.fillStyle = "#FFFFFF"; 
 
    ctx.fill(); 
 
    ctx.restore(); 
 
} 
 
var canvas = document.getElementsByTagName("canvas")[0]; //get the canvas dom object 
 
var ctx = canvas.getContext("2d"); //get the context 
 
/* 
 
    Create objects a to g that make up the smoke. 
 
    Each object is placed off screen, and only their shadows 
 
    remain on the screen. 
 
*/ 
 
var a = { //create object a of the smoke 
 
    x:621, //x value 
 
    y:250, //y value 
 
    r:13 //radius 
 
} 
 
var b = { //create object b of the smoke 
 
    x:595, 
 
    y:190, 
 
    r:13 
 
} 
 
var c = { //create object c of the smoke 
 
    x:605, 
 
    y:180, 
 
    r:13 
 
} 
 
var d = { //create object d of the smoke 
 
    x:620, 
 
    y:210, 
 
    r:13 
 
} 
 
var e = { //create object e of the smoke 
 
    x:610, 
 
    y:170, 
 
    r:10 
 
} 
 
var f = { //create object f of the smoke 
 
    x:610, 
 
    y:250, 
 
    r:8 
 
} 
 
var g = { //create object g of the smoke 
 
    x:650, 
 
    y:200, 
 
    r:8 
 
} 
 
/* 
 
    Draws all components on the canvas. 
 
*/ 
 
var redraw = function(){ 
 
    // draw smoke 
 
    ctx.save(); 
 
    ctx.shadowColor="#808080"; 
 
    ctx.shadowBlur = 40; 
 
    ctx.shadowOffsetX = -300; 
 
    ctx.clearRect(0, 0, canvas.width, canvas.height); //clear canvas 
 
    ctx.beginPath(); //draw the object c 
 
    ctx.arc(a.x, a.y, a.r, 0, Math.PI*2); 
 
    ctx.fillStyle = "rgba(128, 128, 128, 0.4)"; 
 
    ctx.closePath(); 
 
    ctx.fill(); 
 

 
    ctx.beginPath(); //draw the object b 
 
    ctx.arc(b.x, b.y, b.r, 0, Math.PI*2); 
 
    ctx.closePath(); 
 
    ctx.fill(); 
 

 
    ctx.beginPath(); //draw the object c 
 
    ctx.arc(c.x, c.y, c.r, 0, Math.PI*2); 
 
    ctx.closePath(); 
 
    ctx.fill(); 
 

 
    ctx.beginPath(); //draw the object d 
 
    ctx.arc(d.x, d.y, d.r, 0, Math.PI*2); 
 
    ctx.closePath(); 
 
    ctx.fill(); 
 

 
    ctx.beginPath(); //draw the object e 
 
    ctx.arc(e.x, e.y, e.r, 0, Math.PI*2); 
 
    ctx.closePath(); 
 
    ctx.fill(); 
 

 
    ctx.beginPath(); //draw the object f 
 
    ctx.arc(f.x, f.y, f.r, 0, Math.PI*2); 
 
    ctx.closePath(); 
 
    ctx.fill(); 
 

 
    ctx.beginPath(); //draw the object g 
 
    ctx.arc(g.x, g.y, g.r, 0, Math.PI*2); 
 
    ctx.closePath(); 
 
    ctx.fill(); 
 
    ctx.restore(); 
 

 
    drawStars(); 
 
    drawFloor(); 
 
    drawFront(); 
 
    drawSide(); 
 
    drawChimney(); 
 
    drawRoof(); 
 
    drawDoor(); 
 
    drawWindow(); 
 
    drawTree(); 
 
    drawSnowman(); 
 
    drawSnow(); 
 
    drawCandy(); 
 
    requestAnimationFrame(redraw); 
 
} 
 
/* 
 
    Increases each smoke component in size and moves it up the canvas. 
 
    Returns each one to a specified position and size after it reaches 
 
    a specified point above the canvas. 
 
*/ 
 
function move(){ 
 
    a.y -= 8; // move circle up canvas 
 
    a.r += 2; // increase circle in size 
 
    if (a.y < -100) { 
 
     // if the circle reaches this position, it returns to specified position 
 
     // and size 
 
     a.y = 195; // returns to this position 
 
     a.r = 13; // returns to this size 
 
    } 
 
    b.y -= 8; 
 
    b.r += 2; 
 
    if (b.y < -200) { 
 
     b.y = 195; 
 
     b.r = 13; 
 
    } 
 
    c.y -= 8; 
 
    c.r += 2; 
 
    if (c.y < -300) { 
 
     c.y = 195; 
 
     c.r = 13; 
 
    } 
 
    d.y -= 8; 
 
    d.r += 2; 
 
    if (d.y < -250) { 
 
     d.y = 195; 
 
     d.r = 13; 
 
    } 
 
    e.y -= 8; 
 
    e.r += 2; 
 
    if (e.y < -200) { 
 
     e.y = 195; 
 
     e.r = 10; 
 
    } 
 
    f.y -= 8; 
 
    f.r += 2; 
 
    if (f.y < -220) { 
 
     f.y = 200; 
 
     f.r = 10; 
 
    } 
 
    g.y -= 8; 
 
    g.r += 2; 
 
    if (g.y < -250) { 
 
     g.y = 195; 
 
     g.r = 10; 
 
    } 
 
} 
 
redraw(); 
 
setInterval(move, 100); // initial animation before slider is used 
 
/* 
 
    Uses slider output to determine how often the animate is executed. 
 
    Reverses the number so that when user positions the slider to the right, 
 
    the code is executed more often (faster smoke); likewise, when it is 
 
    positioned to the left, it is executed less often (slower smoke). 
 
*/ 
 
function outputUpdate(counter) { 
 
    var canvas = document.getElementsByTagName("canvas")[0]; //get the canvas dom object 
 
    var ctx = canvas.getContext("2d"); //get the context 
 
    /* 
 
     Create objects a to g that make up the smoke. 
 
     Each object is placed off screen, and only their shadows 
 
     remain on the screen. 
 
    */ 
 
    var a = { //create object a of the smoke 
 
     x:621, //x value 
 
     y:250, //y value 
 
     r:13 //radius 
 
    } 
 
    var b = { //create object b of the smoke 
 
     x:595, 
 
     y:190, 
 
     r:13 
 
    } 
 
    var c = { //create object c of the smoke 
 
     x:605, 
 
     y:180, 
 
     r:13 
 
    } 
 
    var d = { //create object d of the smoke 
 
     x:620, 
 
     y:210, 
 
     r:13 
 
    } 
 
    var e = { //create object e of the smoke 
 
     x:610, 
 
     y:170, 
 
     r:10 
 
    } 
 
    var f = { //create object f of the smoke 
 
     x:610, 
 
     y:250, 
 
     r:8 
 
    } 
 
    var g = { //create object g of the smoke 
 
     x:650, 
 
     y:200, 
 
     r:8 
 
    } 
 
    /* 
 
     Draws all components on the canvas. 
 
    */ 
 
    var redraw = function(){ 
 
     // draw smoke 
 
     ctx.save(); 
 
     ctx.shadowColor="#808080"; 
 
     ctx.shadowBlur = 40; 
 
     ctx.shadowOffsetX = -300; 
 
     ctx.clearRect(0, 0, canvas.width, canvas.height); //clear canvas 
 
     ctx.beginPath(); //draw the object c 
 
     ctx.arc(a.x, a.y, a.r, 0, Math.PI*2); 
 
     ctx.fillStyle = "rgba(128, 128, 128, 0.4)"; 
 
     ctx.closePath(); 
 
     ctx.fill(); 
 

 
     ctx.beginPath(); //draw the object b 
 
     ctx.arc(b.x, b.y, b.r, 0, Math.PI*2); 
 
     ctx.closePath(); 
 
     ctx.fill(); 
 

 
     ctx.beginPath(); //draw the object c 
 
     ctx.arc(c.x, c.y, c.r, 0, Math.PI*2); 
 
     ctx.closePath(); 
 
     ctx.fill(); 
 

 
     ctx.beginPath(); //draw the object d 
 
     ctx.arc(d.x, d.y, d.r, 0, Math.PI*2); 
 
     ctx.closePath(); 
 
     ctx.fill(); 
 

 
     ctx.beginPath(); //draw the object e 
 
     ctx.arc(e.x, e.y, e.r, 0, Math.PI*2); 
 
     ctx.closePath(); 
 
     ctx.fill(); 
 

 
     ctx.beginPath(); //draw the object f 
 
     ctx.arc(f.x, f.y, f.r, 0, Math.PI*2); 
 
     ctx.closePath(); 
 
     ctx.fill(); 
 

 
     ctx.beginPath(); //draw the object g 
 
     ctx.arc(g.x, g.y, g.r, 0, Math.PI*2); 
 
     ctx.closePath(); 
 
     ctx.fill(); 
 
     ctx.restore(); 
 

 
     drawStars(); 
 
     drawFloor(); 
 
     drawFront(); 
 
     drawSide(); 
 
     drawChimney(); 
 
     drawRoof(); 
 
     drawDoor(); 
 
     drawWindow(); 
 
     drawTree(); 
 
     drawSnowman(); 
 
     drawSnow(); 
 
     requestAnimationFrame(redraw); 
 
    } 
 
    /* 
 
     Increases each smoke component in size and moves it up the canvas. 
 
     Returns each one to a specified position and size after it reaches 
 
     a specified point above the canvas. 
 
    */ 
 
    function move(){ 
 
     a.y -= 8; // move circle up canvas 
 
     a.r += 2; // increase circle in size 
 
     if (a.y < -100) { 
 
      // if the circle reaches this position, it returns to specified position 
 
      // and size 
 
      a.y = 195; // returns to this position 
 
      a.r = 13; // returns to this size 
 
     } 
 
     b.y -= 8; 
 
     b.r += 2; 
 
     if (b.y < -200) { 
 
      b.y = 195; 
 
      b.r = 13; 
 
     } 
 
     c.y -= 8; 
 
     c.r += 2; 
 
     if (c.y < -300) { 
 
      c.y = 195; 
 
      c.r = 13; 
 
     } 
 
     d.y -= 8; 
 
     d.r += 2; 
 
     if (d.y < -250) { 
 
      d.y = 195; 
 
      d.r = 13; 
 
     } 
 
     e.y -= 8; 
 
     e.r += 2; 
 
     if (e.y < -200) { 
 
      e.y = 195; 
 
      e.r = 10; 
 
     } 
 
     f.y -= 8; 
 
     f.r += 2; 
 
     if (f.y < -220) { 
 
      f.y = 200; 
 
      f.r = 10; 
 
     } 
 
     g.y -= 8; 
 
     g.r += 2; 
 
     if (g.y < -250) { 
 
      g.y = 195; \t 
 
      g.r = 10; 
 
     } 
 
    } 
 
    redraw(); 
 
    document.querySelector('#speed').value = counter; 
 
    setInterval(function(){ move() }, (200-counter)); 
 
}
body { 
 
    padding-left: 2em; 
 
} 
 
canvas { 
 
    border: 1px solid grey; 
 
    background-color: #4A6485; 
 
    display: block; 
 
} 
 
#fakeLinks { 
 
    position: relative; 
 
    color: blue; 
 
    font-family: arial; 
 
    top: -10; 
 
    left: -25; 
 
} 
 
span { 
 
    color: black; 
 
} 
 
#icon { 
 
    position: relative; 
 
    top: 12; 
 
    left: -5; 
 
} 
 
#setSpeed { 
 
    position: relative; 
 
    top:0; 
 
    left:180; 
 
    right:0; 
 
    bottom:1000; 
 
} 
 
#speed { 
 
    color: white; 
 
} 
 
#info { 
 
    position: relative; 
 
    top:0; 
 
    left:0; 
 
    right:0; 
 
    bottom:0; 
 
}
<!-- stars or snow; separate function 
 
for smoke - does not work with range?; stars behind smoke; get rid of range # 
 
--> 
 
<html lang="en"> 
 
<head> 
 
    <title>smoke</title> 
 
    <div id="fakeLinks"> 
 
     <img id="icon" src="Images/houseicon.png" alt="houseicon">vancouver, BC 
 
     <span>></span> housing <span>></span> for rent</div> 
 
     <h2>Get out of the cold and stay at our winter vacation rental!</h2> 
 
     <div class="wrapper"> 
 
     <canvas id="canvas" width="500" height="500"></canvas> 
 
     <input id="setSpeed" type="range" min="0" max="200" value="100" 
 
      oninput="outputUpdate(value)" name="sliderInput"/> 
 
     <output for="setSpeed" id="speed" name="sliderOutput"></output> 
 
     </div> 
 
    <link rel="stylesheet" href="Style/house.css"> 
 
</head> 
 
<!--Commented out for use in snippet  <script src="house.js"></script> --> 
 
<body onLoad="drawSnow()"> 
 
    <div id ="info"> 
 
     <p>Everything is completed. We have a working fireplace and electricity.</p> 
 
     <p>There were no major challenges in the construction of this house.</p></br> 
 
     <p>For more information please contact: </p> 
 
     <p> </p> 
 
     <p></p> 
 
    </div> 
 
</body> 
 
</html>

+1

一般的期望是什麼是爲你提供一個** **最小[MCVE]它可以隔離您遇到的問題。 – Makyen

回答

0

刪除此行:document.querySelector( '#速度')值=計數器;

我測試了這個,在FireFox中工作。

+0

此答案無效。寫入的代碼讀取值(將其作爲參數填充)。由於OP已經寫了,所以這部分代碼是正確的。你只是看不到這個代碼正在改變的輸出數字,因爲文本在CSS中被標記爲「white」。如果您更改CSS,您將能夠看到它。 – Makyen

1

outputUpdate()中,您重新定義了大量的變量以及move()redraw()函數。唯一的區別是,在重新定義的redraw()中,您不會撥打drawCandy()。這是一種荒謬的方式,通過重新定義這些方法來做你想做的事情。我不確定那是什麼。如果你真的不想打電話drawCandy()然後傳遞參數,或設置一個全局變量。不要複製代碼。複製代碼導致重大問題。

您在setInterval()上遇到的問題是,在設置以不同速率更新的新間隔之前,您沒有清除任何間隔。這會導致您創建大量間隔定時器,導致CPU陷入停滯狀態。爲了解決這個問題,我只是用蠻力法創建全局變量moveIntervalId來存儲間隔ID,然後在調用setInterval()之前調用clearInterval()

我也將煙霧劃分爲自己的功能。

var moveIntervalId; 
 

 
/* 
 
    Draws each floor of the canvas. 
 
*/ 
 
function drawFloor() { 
 
    ctx.fillStyle = "white"; 
 
    ctx.fillRect(0, 250, 500, 250); 
 
} 
 
/* 
 
    Draws the front side of the house. 
 
*/ 
 
function drawFront() { 
 
    ctx.fillStyle = "#91AEAC"; 
 
    ctx.beginPath(); 
 
    ctx.moveTo(275,256); \t //tip 
 
    ctx.lineTo(325,350); \t //mid-right 
 
    ctx.lineTo(319,400); \t //bot-right 
 
    ctx.lineTo(250,387); \t //bot-left 
 
    ctx.lineTo(230,325); \t //mid-left 
 
    ctx.closePath(); 
 
    ctx.fill(); 
 
} 
 
/* 
 
    Draws the side of the house. 
 
*/ 
 
function drawSide() { 
 
    ctx.fillStyle = "#6F978F"; 
 
    ctx.beginPath(); 
 
    ctx.moveTo(325,350); \t //top-left 
 
    ctx.lineTo(412,325); \t //top-right 
 
    ctx.lineTo(400,375); \t //bot-right 
 
    ctx.lineTo(319,400); \t //bot-left 
 
    ctx.closePath(); 
 
    ctx.fill(); 
 
} 
 
/* 
 
    Draws the chimney of the house. 
 
*/ 
 
function drawChimney() { 
 
    ctx.beginPath(); 
 
    ctx.moveTo(308,217); \t //top-left 
 
    ctx.lineTo(337,213); \t //top-right 
 
    ctx.lineTo(337,250); \t //bot-right 
 
    ctx.lineTo(312,250); \t //bot-left 
 
    ctx.closePath(); 
 
    ctx.fillStyle = "#8EB0AF"; 
 
    ctx.fill(); 
 
} 
 
/* 
 
    Draws the roof of the house. 
 
*/ 
 
function drawRoof() { 
 
    ctx.fillStyle = "#8E2F35"; 
 
    ctx.beginPath(); 
 
    ctx.moveTo(278,244); \t //top-left 
 
    ctx.lineTo(370,221); \t //top-right 
 
    ctx.lineTo(425,324); \t //bot-right 
 
    ctx.lineTo(334,350); \t //bot-left 
 
    ctx.closePath(); 
 
    ctx.fill(); 
 
    // draw left line of the roof at the from 
 
    ctx.lineWidth=10; 
 
    ctx.strokeStyle = "#C55463"; 
 
    ctx.beginPath(); 
 
    ctx.moveTo(275,250); //top 
 
    ctx.lineTo(220,336); //bot 
 
    ctx.stroke(); 
 
    // draw right line of the roof at the from 
 
    ctx.lineWidth=10; 
 
    ctx.strokeStyle = "#C55463"; 
 
    ctx.beginPath(); 
 
    ctx.moveTo(275,245); //top 
 
    ctx.lineTo(330,352); //bot 
 
    ctx.stroke(); 
 
} 
 
/* 
 
    Draws the door of the house. 
 
*/ 
 
function drawDoor(){ 
 
    // draws the top of the door 
 
    ctx.beginPath(); 
 
    ctx.arc(278, 351, 19, 0, Math.PI*2, true); 
 
    ctx.closePath(); 
 
    ctx.fillStyle = "#C18459"; 
 
    ctx.fill(); 
 
    // draws the bottom of the door 
 
    ctx.beginPath(); 
 
    ctx.moveTo(265,389); \t //bot-left 
 
    ctx.lineTo(258.5,349); \t //top-left 
 
    ctx.lineTo(297,350); \t //top-right 
 
    ctx.lineTo(295,395); \t //bot-right 
 
    ctx.closePath(); 
 
    ctx.fillStyle = "#C18459"; 
 
    ctx.fill(); 
 
    // draws the door knob 
 
    ctx.beginPath(); 
 
    ctx.arc(288, 363, 4, 0, Math.PI*2, true); 
 
    ctx.closePath(); 
 
    ctx.fillStyle = " \t #5F371F"; 
 
    ctx.fill(); 
 
} 
 
/* 
 
    Draws the window of the house. 
 
*/ 
 
function drawWindow() { 
 
    ctx.save(); 
 
    ctx.shadowColor="white"; 
 
    ctx.shadowBlur = 20; 
 
    ctx.beginPath(); 
 
    ctx.moveTo(275,277); \t //tip 
 
    ctx.lineTo(288,300); \t //right 
 
    ctx.lineTo(275,325); \t //bot 
 
    ctx.lineTo(260,301); \t //left 
 
    ctx.closePath(); 
 
    ctx.fillStyle = "#F9F2C5"; 
 
    ctx.fill(); 
 
    ctx.restore(); 
 
} 
 
/* 
 
    Draws the Christmas tree. 
 
*/ 
 
function drawTree() { 
 
    /* 
 
    // tree top 
 
    ctx.beginPath(); 
 
    ctx.moveTo(129,280); \t //tip 
 
    ctx.lineTo(179,415); \t //right 
 
    ctx.lineTo(90,419); \t //left 
 
    ctx.closePath(); 
 
    ctx.fillStyle = "#8E9D2A"; 
 
    ctx.fill(); 
 
    // tree trunk 
 
    ctx.fillStyle = "#A7673B"; 
 
    ctx.beginPath(); 
 
    ctx.moveTo(124,417); \t //top-left 
 
    ctx.lineTo(150,415); \t //top-right 
 
    ctx.lineTo(148,427); \t //bot-right 
 
    ctx.lineTo(128,428); \t //bot-left 
 
    ctx.closePath(); 
 
    ctx.fill(); 
 
    */ 
 
    // tree top 1 
 
    ctx.beginPath(); 
 
    ctx.moveTo(135,350); \t //tip 
 
    ctx.lineTo(179,415); \t //right 
 
    ctx.lineTo(90,419); \t //left 
 
    ctx.closePath(); 
 
    ctx.fillStyle = "#8E9D2A"; 
 
    ctx.fill(); 
 
    // tree top 2 
 
    ctx.beginPath(); 
 
    ctx.moveTo(135,320); \t //tip 
 
    ctx.lineTo(179,385); \t //right 
 
    ctx.lineTo(90,385); \t //left 
 
    ctx.closePath(); 
 
    ctx.fillStyle = "#8E9D2A"; 
 
    ctx.fill(); 
 
    // tree trunk 
 
    ctx.fillStyle = "#A7673B"; 
 
    ctx.beginPath(); 
 
    ctx.moveTo(124,417); \t //top-left 
 
    ctx.lineTo(150,415); \t //top-right 
 
    ctx.lineTo(148,427); \t //bot-right 
 
    ctx.lineTo(128,428); \t //bot-left 
 
    ctx.closePath(); 
 
    ctx.fill(); 
 
} 
 
/* 
 
    Draw the candy cane. 
 
*/ 
 
function drawCandy() { 
 
    ctx.beginPath(); 
 
    ctx.strokeStyle = "#C72828"; 
 
    ctx.beginPath(); 
 
    ctx.lineWidth=8; 
 
    ctx.moveTo(200,435); 
 
    ctx.bezierCurveTo(205,405,220,420,220,460); 
 
    ctx.stroke(); 
 
    ctx.closePath(); 
 
} 
 
/* 
 
    Draws the snowman in the background. 
 
*/ 
 
function drawSnowman() { 
 
    // snowman body 
 
    ctx.beginPath(); 
 
    ctx.arc(80,250,20,0,Math.PI*2,true); 
 
    ctx.closePath(); 
 
    ctx.fillStyle = "#D8D8D8"; 
 
    ctx.fill(); 
 
    // snowman head 
 
    ctx.beginPath(); 
 
    ctx.arc(80,222,13,0,Math.PI*2,true); 
 
    ctx.closePath(); 
 
    ctx.fillStyle = "#D8D8D8"; 
 
    ctx.fill(); 
 
    // snowman hat 
 
    ctx.beginPath(); 
 
    ctx.strokeStyle="#F06140"; 
 
    ctx.rect(78,200,5,5); 
 
    ctx.stroke(); 
 
    ctx.strokeStyle = "#FF4444"; 
 
    ctx.beginPath(); 
 
    ctx.lineWidth=5; 
 
    ctx.moveTo(70,210); //top 
 
    ctx.lineTo(92,210); //bot 
 
    ctx.stroke(); 
 
    // snowman left eye 
 
    ctx.beginPath(); 
 
    ctx.arc(76,220,2,0,Math.PI*2,true); 
 
    ctx.closePath(); 
 
    ctx.fillStyle = "#000000"; 
 
    ctx.fill(); 
 
    // snowman right eye 
 
    ctx.beginPath(); 
 
    ctx.arc(84,220,2,0,Math.PI*2,true); 
 
    ctx.closePath(); 
 
    ctx.fillStyle = "#000000"; 
 
    ctx.fill(); 
 
    // snowman left hand 
 
    ctx.strokeStyle = "#854B24"; 
 
    ctx.beginPath(); 
 
    ctx.lineWidth=3; 
 
    ctx.moveTo(45,235); //top 
 
    ctx.lineTo(62,243); //bot 
 
    ctx.stroke(); 
 
    // snowman right hand 
 
    ctx.strokeStyle = "#854B24"; 
 
    ctx.beginPath(); 
 
    ctx.lineWidth=3; 
 
    ctx.moveTo(113,235); //top 
 
    ctx.lineTo(98,243); //bot 
 
    ctx.stroke(); 
 
} 
 
/* 
 
    Draws the falling snow. 
 
*/ 
 
function drawSnow() { 
 
    for (var i = 0; i < 10; i++) { 
 
     ctx.beginPath(); 
 
     ctx.arc(Math.floor(Math.random()*(500)), Math.floor(Math.random()*(500)) 
 
       , Math.random() + 0.7, 0, 2*Math.PI); 
 
     ctx.closePath(); 
 
     ctx.fillStyle = "#FFFFFF"; 
 
     ctx.fill(); 
 
    } 
 
} 
 
/* 
 
    Draw the smoke 
 
*/ 
 
function drawSmoke() { 
 
    // draw smoke 
 
    ctx.save(); 
 
    ctx.shadowColor="#808080"; 
 
    ctx.shadowBlur = 40; 
 
    ctx.shadowOffsetX = -300; 
 
    ctx.clearRect(0, 0, canvas.width, canvas.height); //clear canvas 
 
    ctx.beginPath(); //draw the object c 
 
    ctx.arc(a.x, a.y, a.r, 0, Math.PI*2); 
 
    ctx.fillStyle = "rgba(128, 128, 128, 0.4)"; 
 
    ctx.closePath(); 
 
    ctx.fill(); 
 

 
    ctx.beginPath(); //draw the object b 
 
    ctx.arc(b.x, b.y, b.r, 0, Math.PI*2); 
 
    ctx.closePath(); 
 
    ctx.fill(); 
 

 
    ctx.beginPath(); //draw the object c 
 
    ctx.arc(c.x, c.y, c.r, 0, Math.PI*2); 
 
    ctx.closePath(); 
 
    ctx.fill(); 
 

 
    ctx.beginPath(); //draw the object d 
 
    ctx.arc(d.x, d.y, d.r, 0, Math.PI*2); 
 
    ctx.closePath(); 
 
    ctx.fill(); 
 

 
    ctx.beginPath(); //draw the object e 
 
    ctx.arc(e.x, e.y, e.r, 0, Math.PI*2); 
 
    ctx.closePath(); 
 
    ctx.fill(); 
 

 
    ctx.beginPath(); //draw the object f 
 
    ctx.arc(f.x, f.y, f.r, 0, Math.PI*2); 
 
    ctx.closePath(); 
 
    ctx.fill(); 
 

 
    ctx.beginPath(); //draw the object g 
 
    ctx.arc(g.x, g.y, g.r, 0, Math.PI*2); 
 
    ctx.closePath(); 
 
    ctx.fill(); 
 
    ctx.restore(); 
 
} 
 
/* 
 
    Draws the stars in the sky. 
 
*/ 
 
function drawStars() { 
 
    ctx.save(); 
 
    ctx.shadowColor="white"; 
 
    ctx.shadowBlur = 10; 
 

 
    ctx.beginPath(); 
 
    ctx.arc(55,115,1,0,Math.PI*2,true); 
 
    ctx.closePath(); 
 
    ctx.fillStyle = "#FFFFFF"; 
 
    ctx.fill(); 
 

 
    ctx.beginPath(); 
 
    ctx.arc(90,90,0.5,0,Math.PI*2,true); 
 
    ctx.closePath(); 
 
    ctx.fillStyle = "#FFFFFF"; 
 
    ctx.fill(); 
 

 
    ctx.beginPath(); 
 
    ctx.arc(100,30,1,0,Math.PI*2,true); 
 
    ctx.closePath(); 
 
    ctx.fillStyle = "#FFFFFF"; 
 
    ctx.fill(); 
 

 
    ctx.beginPath(); 
 
    ctx.arc(120,48,0.4,0,Math.PI*2,true); 
 
    ctx.closePath(); 
 
    ctx.fillStyle = "#FFFFFF"; 
 
    ctx.fill(); 
 

 
    ctx.beginPath(); 
 
    ctx.arc(133,100,0.8,0,Math.PI*2,true); 
 
    ctx.closePath(); 
 
    ctx.fillStyle = "#FFFFFF"; 
 
    ctx.fill(); 
 

 
    ctx.beginPath(); 
 
    ctx.arc(150,80,1,0,Math.PI*2,true); 
 
    ctx.closePath(); 
 
    ctx.fillStyle = "#FFFFFF"; 
 
    ctx.fill(); 
 

 
    ctx.beginPath(); 
 
    ctx.arc(224,155,0.5,0,Math.PI*2,true); 
 
    ctx.closePath(); 
 
    ctx.fillStyle = "#FFFFFF"; 
 
    ctx.fill(); 
 

 
    ctx.beginPath(); 
 
    ctx.arc(250,50,1,0,Math.PI*2,true); 
 
    ctx.closePath(); 
 
    ctx.fillStyle = "#FFFFFF"; 
 
    ctx.fill(); 
 

 
    ctx.beginPath(); 
 
    ctx.arc(290,100,0.5,0,Math.PI*2,true); 
 
    ctx.closePath(); 
 
    ctx.fillStyle = "#FFFFFF"; 
 
    ctx.fill(); 
 

 
    ctx.beginPath(); 
 
    ctx.arc(400,100,1,0,Math.PI*2,true); 
 
    ctx.closePath(); 
 
    ctx.fillStyle = "#FFFFFF"; 
 
    ctx.fill(); 
 

 
    ctx.beginPath(); 
 
    ctx.arc(430,111,1.2,0,Math.PI*2,true); 
 
    ctx.closePath(); 
 
    ctx.fillStyle = "#FFFFFF"; 
 
    ctx.fill(); 
 

 
    ctx.beginPath(); 
 
    ctx.arc(444,48,0.5,0,Math.PI*2,true); 
 
    ctx.closePath(); 
 
    ctx.fillStyle = "#FFFFFF"; 
 
    ctx.fill(); 
 

 
    ctx.beginPath(); 
 
    ctx.arc(450,155,0.6,0,Math.PI*2,true); 
 
    ctx.closePath(); 
 
    ctx.fillStyle = "#FFFFFF"; 
 
    ctx.fill(); 
 

 
    ctx.beginPath(); 
 
    ctx.arc(480,120,0.6,0,Math.PI*2,true); 
 
    ctx.closePath(); 
 
    ctx.fillStyle = "#FFFFFF"; 
 
    ctx.fill(); 
 
    ctx.restore(); 
 
} 
 
var canvas = document.getElementsByTagName("canvas")[0]; //get the canvas dom object 
 
var ctx = canvas.getContext("2d"); //get the context 
 
/* 
 
    Create objects a to g that make up the smoke. 
 
    Each object is placed off screen, and only their shadows 
 
    remain on the screen. 
 
*/ 
 
var a = { //create object a of the smoke 
 
    x:621, //x value 
 
    y:250, //y value 
 
    r:13 //radius 
 
} 
 
var b = { //create object b of the smoke 
 
    x:595, 
 
    y:190, 
 
    r:13 
 
} 
 
var c = { //create object c of the smoke 
 
    x:605, 
 
    y:180, 
 
    r:13 
 
} 
 
var d = { //create object d of the smoke 
 
    x:620, 
 
    y:210, 
 
    r:13 
 
} 
 
var e = { //create object e of the smoke 
 
    x:610, 
 
    y:170, 
 
    r:10 
 
} 
 
var f = { //create object f of the smoke 
 
    x:610, 
 
    y:250, 
 
    r:8 
 
} 
 
var g = { //create object g of the smoke 
 
    x:650, 
 
    y:200, 
 
    r:8 
 
} 
 
/* 
 
    Draws all components on the canvas. 
 
*/ 
 
function redraw(){ 
 
    drawSmoke(); 
 
    drawStars(); 
 
    drawFloor(); 
 
    drawFront(); 
 
    drawSide(); 
 
    drawChimney(); 
 
    drawRoof(); 
 
    drawDoor(); 
 
    drawWindow(); 
 
    drawTree(); 
 
    drawSnowman(); 
 
    drawSnow(); 
 
    drawCandy(); 
 
    requestAnimationFrame(redraw); 
 
} 
 
    
 
/* 
 
    Increases each smoke component in size and moves it up the canvas. 
 
    Returns each one to a specified position and size after it reaches 
 
    a specified point above the canvas. 
 
*/ 
 
function move(){ 
 
    a.y -= 8; // move circle up canvas 
 
    a.r += 2; // increase circle in size 
 
    if (a.y < -100) { 
 
     // if the circle reaches this position, it returns to specified position 
 
     // and size 
 
     a.y = 195; // returns to this position 
 
     a.r = 13; // returns to this size 
 
    } 
 
    b.y -= 8; 
 
    b.r += 2; 
 
    if (b.y < -200) { 
 
     b.y = 195; 
 
     b.r = 13; 
 
    } 
 
    c.y -= 8; 
 
    c.r += 2; 
 
    if (c.y < -300) { 
 
     c.y = 195; 
 
     c.r = 13; 
 
    } 
 
    d.y -= 8; 
 
    d.r += 2; 
 
    if (d.y < -250) { 
 
     d.y = 195; 
 
     d.r = 13; 
 
    } 
 
    e.y -= 8; 
 
    e.r += 2; 
 
    if (e.y < -200) { 
 
     e.y = 195; 
 
     e.r = 10; 
 
    } 
 
    f.y -= 8; 
 
    f.r += 2; 
 
    if (f.y < -220) { 
 
     f.y = 200; 
 
     f.r = 10; 
 
    } 
 
    g.y -= 8; 
 
    g.r += 2; 
 
    if (g.y < -250) { 
 
     g.y = 195; 
 
     g.r = 10; 
 
    } 
 

 
} 
 
redraw(); 
 
clearInterval(moveIntervalId); 
 
moveIntervalId = setInterval(move, 100); // initial animation before slider is used 
 
/* 
 
    Uses slider output to determine how often the animate is executed. 
 
    Reverses the number so that when user positions the slider to the right, 
 
    the code is executed more often (faster smoke); likewise, when it is 
 
    positioned to the left, it is executed less often (slower smoke). 
 
*/ 
 
function outputUpdate(counter) { 
 
    document.querySelector('#speed').value = counter; 
 
    clearInterval(moveIntervalId); 
 
    moveIntervalId = setInterval(move, (200-counter)); 
 
}
body { 
 
    padding-left: 2em; 
 
} 
 
canvas { 
 
    border: 1px solid grey; 
 
    background-color: #4A6485; 
 
    display: block; 
 
} 
 
#fakeLinks { 
 
    position: relative; 
 
    color: blue; 
 
    font-family: arial; 
 
    top: -10; 
 
    left: -25; 
 
} 
 
span { 
 
    color: black; 
 
} 
 
#icon { 
 
    position: relative; 
 
    top: 12; 
 
    left: -5; 
 
} 
 
#setSpeed { 
 
    position: relative; 
 
    top:0; 
 
    left:180; 
 
    right:0; 
 
    bottom:1000; 
 
} 
 
#speed { 
 
    color: white; 
 
} 
 
#info { 
 
    position: relative; 
 
    top:0; 
 
    left:0; 
 
    right:0; 
 
    bottom:0; 
 
}
<!-- stars or snow; separate function 
 
for smoke - does not work with range?; stars behind smoke; get rid of range # 
 
--> 
 
<html lang="en"> 
 
<head> 
 
    <title>Luong, Jessica | Qin, Ashley</title> 
 
    <div id="fakeLinks"> 
 
     <img id="icon" src="Images/houseicon.png" alt="houseicon">vancouver, BC 
 
     <span>></span> housing <span>></span> for rent</div> 
 
     <h2>Get out of the cold and stay at our winter vacation rental!</h2> 
 
     <div class="wrapper"> 
 
     <canvas id="canvas" width="500" height="500"></canvas> 
 
     <input id="setSpeed" type="range" min="0" max="200" value="100" 
 
      oninput="outputUpdate(value)" name="sliderInput"/> 
 
     <output for="setSpeed" id="speed" name="sliderOutput"></output> 
 
     </div> 
 
    <link rel="stylesheet" href="Style/house.css"> 
 
</head> 
 
<!--Commented out for use in snippet  <script src="house.js"></script> --> 
 
<body onLoad="drawSnow()"> 
 
    <div id ="info"> 
 
     <p>Everything is completed. We have a working fireplace and electricity.</p> 
 
     <p>There were no major challenges in the construction of this house.</p></br> 
 
     <p>For more information please contact: </p> 
 
     <p> </p> 
 
     <p></p> 
 
    </div> 
 
</body> 
 
</html>