Question

我写了一些代码，当用户点击开始按钮时，允许播放音频文件，并在div元素中弹出图像。最重要的是，蓝色圆圈在图像顶部的透明画布上反弹。我希望能够准确地＆＃34;准确地说＃34;每50毫秒在最后一个图像的顶部显示图像。可悲的是setInterval(function, 50)是相当不准确的，我试图通过编写自己的脚本来改进它：

function interval(var f, var w){

    var start = (new Date).getTime();
    var func = f;
    var times = t;
    while(on){
        while(true){
            if(w <=(((new Date).getTime()) - start)){
                func();
                break;
            }
        }
    }
}

在我的代码中没有此脚本，程序运行正常但不准确。当我添加代码时，即使我离开setIntervals并且不调用interval方法，音频文件也不会播放并且图像不会循环播放。当我运行它时，它会向控制台显示Uncaught ReferenceError: start is not definedonclick @ dreamFlashes.html:138。关于如何在间隔函数替换setInervals函数时播放音频文件和循环图像的所有想法将非常有用！感谢您的时间和帮助！

这是工作代码但没有间隔方法：

<html>
<head>

<title>flashing page</title>

<style>
#imgZone{
 position: fixed;
z-index:1;
height:500px;
width:600px;
top: 50px;
left:300px;
}

#myCanvas{
 position: fixed;
 z-index:500000;
 left:300px;
 top:50px;
}

#bt{
position:fixed;
left:45%;
top:600px;
}


</style>

<script>
 var i = 0;
 var p = 0;
 first = 0;
 var rounds;
 imgArray = ["http://files.sharenator.com/finger_monkey07-s400x266-235097.jpg", "https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQqbBlJBsnTumbHkaKpYiA4GQjPvnyL9DLpeBuRGgJhKSqtEOhxhA", "http://www.zastavki.com/pictures/originals/2014/Animals___Monkeys_____The_little_monkey_sitting_on_a_branch_075382_.jpg", "http://www.factrange.com/wp-content/uploads/2013/05/finger-monkey-factrange.jpg", "http://i0.wp.com/www.thisblogrules.com/wp-content/uploads/2010/12/finger-monkey-11.jpg", "https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQjwea3xDfNQtEPTr8lk6EVNdGWYi5IIZYHmwddhupPqq9YnD8GLw"]
function imageInZone(){
    document.getElementById("imgZone").src = imgArray[i];
    i++;
    p++;
    if(i == imgArray.length){
        i=0;
    }

    if(p >= imgArray.length*2){
        clearInterval(rounds);
    }


}



 function start(){
       var audio = document.getElementById("audio");
       audio.play();
       if(first == 0){
            setTimeout(startImages, 5000);
       }
       else{
            rounds = setInterval(imageInZone, 1000);
       }


}



function stop(){
var audio = document.getElementById("audio");
       audio.pause();
       clearInterval(rounds);
}

function startImages(){
       first = 1;
       rounds = setInterval(imageInZone, 1000);
}
</script>

</head>


<script>
var context;
var x=100;
var y=200;
var dx=5;
var dy=5;

function init()
{
  context= myCanvas.getContext('2d');
  setInterval(draw,20);
}

function draw()
{
  context.clearRect(0,0, 600,500);
  context.beginPath();
  context.fillStyle="#0000ff";
  // Draws a circle of radius 20 at the coordinates 100,100 on the canvas
  context.arc(x,y,20,0,Math.PI*2,true);
  context.closePath();
  context.fill();
  // Boundary Logic
if( x<0 || x>600) dx=-dx; 
if( y<0 || y>500) dy=-dy; 
x+=dx; 
y+=dy;
}

</script>


<body onLoad="init();">
  <canvas id="myCanvas" width="600" height="500" >
  </canvas>


<audio id="audio" src="audio.mp3" ></audio>
<div id = "bt">
<input type="button" value="START"  onclick="start()"/>
<input type="button" value="STOP"  onclick="stop()"/>
</div>
<div id = "flashZone">
<img id = "imgZone" src = ""/>
</div>
<div 




</body>

</html>

以下是使用区间方法的非功能代码：

<html>
<head>

<title>flashing page</title>

<style>
#imgZone{
 position: fixed;
z-index:1;
height:500px;
width:600px;
top: 50px;
left:300px;
}

#myCanvas{
 position: fixed;
 z-index:500000;
 left:300px;
 top:50px;
}

#bt{
position:fixed;
left:45%;
top:600px;
}


</style>

<script>
 var i = 0;
 var p = 0;
 first = 0;
 var rounds;
 var on = true;
 imgArray = ["http://files.sharenator.com/finger_monkey07-s400x266-235097.jpg", "https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQqbBlJBsnTumbHkaKpYiA4GQjPvnyL9DLpeBuRGgJhKSqtEOhxhA", "http://www.zastavki.com/pictures/originals/2014/Animals___Monkeys_____The_little_monkey_sitting_on_a_branch_075382_.jpg", "http://www.factrange.com/wp-content/uploads/2013/05/finger-monkey-factrange.jpg", "http://i0.wp.com/www.thisblogrules.com/wp-content/uploads/2010/12/finger-monkey-11.jpg", "https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQjwea3xDfNQtEPTr8lk6EVNdGWYi5IIZYHmwddhupPqq9YnD8GLw"]
function imageInZone(){
    document.getElementById("imgZone").src = imgArray[i];
    i++;
    p++;
    if(i == imgArray.length){
        i=0;
    }

    if(p >= imgArray.length*2){
        on = false;
    }


}

function interval(var f, var w){

    var start = (new Date).getTime();
    var func = f;
    var times = t;
    while(on){
        while(true){
            if(w <=(((new Date).getTime()) - start)){
                func();
                break;
            }
        }
    }
}


 function start(){
       var audio = document.getElementById("audio");
       audio.play();
       if(first == 0){
            setTimeout(startImages, 5000);
       }
       else{
            interval(imageInZone, 1000);
       }


}



function stop(){
var audio = document.getElementById("audio");
       audio.pause();
       clearInterval(rounds);
}

function startImages(){
       first = 1;
       intervals(imageInZone, 1000);
}
</script>

</head>


<script>
var context;
var x=100;
var y=200;
var dx=5;
var dy=5;

function init()
{
  context= myCanvas.getContext('2d');
  setInterval(draw,20);
}

function draw()
{
  context.clearRect(0,0, 600,500);
  context.beginPath();
  context.fillStyle="#0000ff";
  // Draws a circle of radius 20 at the coordinates 100,100 on the canvas
  context.arc(x,y,20,0,Math.PI*2,true);
  context.closePath();
  context.fill();
  // Boundary Logic
if( x<0 || x>600) dx=-dx; 
if( y<0 || y>500) dy=-dy; 
x+=dx; 
y+=dy;
}

</script>


<body onLoad="init();">
  <canvas id="myCanvas" width="600" height="500" >
  </canvas>


<audio id="audio" src="audio.mp3" ></audio>
<div id = "bt">
<input type="button" value="START"  onclick="start()"/>
<input type="button" value="STOP"  onclick="stop()"/>
</div>
<div id = "flashZone">
<img id = "imgZone" src = ""/>
</div>
<div 




</body>

</html>

改进setInterval（）的函数可防止音频文件播放

0 个答案: