Fatal编程技术网
  • javascript/
  • 点击一个按钮就无限地调用javascript函数？

点击一个按钮就无限地调用javascript函数？

javascript html

点击一个按钮就无限地调用javascript函数？,javascript,html,Javascript,Html,好吧，这是一个有点奇怪的要求。因此，我已经编写了使用JavaScript生成瓷砖的程序（在stack overflow的帮助下），现在我想让它在点击一个按钮时，我的ChangeColor函数被调用一组次数，以便瓷砖的颜色在你眼前随机变化。我有一个按钮，每次你点击它的颜色变化，但我怎么能使它如此，点击他们不断变化？我尝试过使用JavaScript函数set Interval（函数，时间），但似乎无法让它正常工作。以防万一，我也会通知你，我正在把一个按钮，也将停止随机的颜色变化。。这是密码。任何帮助

好吧，这是一个有点奇怪的要求。因此，我已经编写了使用JavaScript生成瓷砖的程序（在stack overflow的帮助下），现在我想让它在点击一个按钮时，我的ChangeColor函数被调用一组次数，以便瓷砖的颜色在你眼前随机变化。我有一个按钮，每次你点击它的颜色变化，但我怎么能使它如此，点击他们不断变化？我尝试过使用JavaScript函数set Interval（函数，时间），但似乎无法让它正常工作。以防万一，我也会通知你，我正在把一个按钮，也将停止随机的颜色变化。。这是密码。任何帮助都会很好

<!doctype html>
<html>
<style>
.cell {
  width: 100px;
  height: 100px;
  display: inline-block;
  margin: 1px;
  padding:4px;
}
button{
float:left;
padding:4px;
}
</style>


<title></title>
<head><script type="text/javascript">
function generateGrid(){
  for (i = 0; i < 5; i++) {
    for (b = 0; b < 5; b++) { 
      div = document.createElement("div");
      div.id = "box" + i +""+ b;
      div.className = "cell";
      document.body.appendChild(div);
    }
    document.body.appendChild(document.createElement("br"));
  }
}
function changeColors(){
for(i =0;i < 5; i++){
    for (b=0;b<5;b++){
        var holder=document.createElement("div");
        holder=document.getElementById("box" + i +""+ b);
        holder.style.backgroundColor = getRandomColor();

    }
}

}
function getRandomColor() {
    var letters = '0123456789ABCDEF';
    var color = '#';
    for (var i = 0; i < 6; i++ ) {
        color += letters[Math.floor(Math.random() * 16)];
    }
    return color;
}
</script>
</head>


<body>
<script>

generateGrid();

changeColors();


</script>
<button onclick="changeColors();">Click me to change colors</button>
<button onclick="window.setInterval(changeColors(),2000);">Click me to start cycle</button>
</body>





</html>


.细胞{
宽度：100px；
高度：100px；
显示：内联块；
保证金：1px；
填充：4px；
}
钮扣{
浮动：左；
填充：4px；
}
函数generateGrid（）{
对于（i=0；i<5；i++）{
对于（b=0；b<5；b++）{
div=document.createElement（“div”）；
div.id=“box”+i+”+b；
div.className=“单元格”；
文件.正文.附件（div）；
}
document.body.appendChild（document.createElement（“br”））；
}
}
函数changeColors（）{
对于（i=0；i<5；i++）{

对于（b=0；b您的setTimeoutFunction不完全正确



var-stop=false；
函数generateGrid（）{
对于（i=0；i<5；i++）{
对于（b=0；b<5；b++）{
div=document.createElement（“div”）；
div.id=“box”+i+”+b；
div.className=“单元格”；
文件.正文.附件（div）；
}
document.body.appendChild（document.createElement（“br”））；
}
}
函数changeColors（）{
对于（i=0；i<5；i++）{
对于（b=0；b您的
changecorders（）
应该是
changecorders
for
window.setInterval

我清理了您的代码并添加了停止/开始按钮。通过创建一个元素数组，它省去了每次迭代都必须定位每个元素的ChangeColor函数。最后，我更改了generateGrid函数以接受宽度和高度。有点过火，但我被冲昏头脑了：）

HTML


单击我以更改颜色
启动周期
停止循环






JavaScript


var elements = [];
function generateGrid(width, height) {
    for (var y = 0; y < height; y++) {
        for (var x = 0; x < width; x++) {
            var div = document.createElement("div");
            div.id = "box" + y + "" + x;
            div.className = "cell";
            document.body.appendChild(div);
            elements.push(div);
        }
        document.body.appendChild(document.createElement("br"));
    }
}

function changeColors() {
    for (e in elements) {
        elements[e].style.backgroundColor = getRandomColor();
    }
}

function getRandomColor() {
    var letters = '0123456789ABCDEF';
    var color = '#';
    for (var i = 0; i < 6; i++) {
        color += letters[Math.floor(Math.random() * 16)];
    }
    return color;
}

var interval = null;
function startCycle() {
    if (interval) return;
    interval = window.setInterval(changeColors, 500);
}

function stopCycle() {
    clearInterval(interval);
    interval = null;
}

generateGrid(3, 5);
changeColors();



var元素=[]；
函数生成器ID（宽度、高度）{
对于（变量y=0；y


简单只需单击按钮即可添加一个功能尝试以下操作：




.细胞{
宽度：100px；
高度：100px；
显示：内联块；
保证金：1px；
填充：4px；
}
钮扣{
浮动：左；
填充：4px；
}
函数generateGrid（）{
对于（i=0；i<5；i++）{
对于（b=0；b<5；b++）{
div=document.createElement（“div”）；
div.id=“box”+i+”+b；
div.className=“单元格”；
文件.正文.附件（div）；
}
document.body.appendChild（document.createElement（“br”））；
}
}
函数changeColors（）{
对于（i=0；i<5；i++）{

对于（b=0；b这正是我想要的..但是没有jQuery有没有办法做到这一点呢？从技术上讲，我不应该使用它，否则我会这么做..但是如果没有jQuery的办法我可以做到的话：没有jQuery我也可以。如果答案对你有效，请接受它作为问题的答案当你点击
startCyc时会很有趣le
很多次了！这太棒了，谢谢你的帮助。你为我添加了一点额外的停止按钮，但没关系；）我很高兴能帮上忙。别忘了投票/接受答案关于代码的快速问题，你能给我解释一下你是如何编程开始/停止循环的吗？我对整个间隔的事情感到困惑。我只是想更好地理解它的原理。首先我们声明一个
间隔
变量。然后当我们调用
设置间隔
时，我们会将函数
changeColors
setInterval
的引用传递给它，返回一个我们分配给
interval
的id。对于
stopCycle
，我们将
interval
（id）传递给
clearInterval
。最后，我们将
interval
重置为
null
。

var elements = [];
function generateGrid(width, height) {
    for (var y = 0; y < height; y++) {
        for (var x = 0; x < width; x++) {
            var div = document.createElement("div");
            div.id = "box" + y + "" + x;
            div.className = "cell";
            document.body.appendChild(div);
            elements.push(div);
        }
        document.body.appendChild(document.createElement("br"));
    }
}

function changeColors() {
    for (e in elements) {
        elements[e].style.backgroundColor = getRandomColor();
    }
}

function getRandomColor() {
    var letters = '0123456789ABCDEF';
    var color = '#';
    for (var i = 0; i < 6; i++) {
        color += letters[Math.floor(Math.random() * 16)];
    }
    return color;
}

var interval = null;
function startCycle() {
    if (interval) return;
    interval = window.setInterval(changeColors, 500);
}

function stopCycle() {
    clearInterval(interval);
    interval = null;
}

generateGrid(3, 5);
changeColors();