Question

我目前在网站页面上工作，我想在定时器上传页面加载时随机改变页面文本的某个部分颜色。

现在我遇到了类似的东西，但它可以通过一个按钮工作，我已经尝试了很多次，让它在没有按钮的情况下工作，它只是一直在破坏，所以继承了代码我基于这一切：

var timerId;

    var ind = document.getElementById("indicator");
    var tit = document.getElementById("title");
    var color = ["red"]

    function startCycle() {
    timerId = setInterval(changeColor, 500);
    }

    function stopCycle() {
    clearInterval(timerId);
    timerId = null;
    }

    function changeColor() {
    if (ind.innerHTML == 'blue') {
        tit.style.color = 'green';
        ind.innerHTML = 'green';
    }

    else if (ind.innerHTML == "green") {
        tit.style.color = 'yellow';
        ind.innerHTML = "yellow";
    }

    else {
        tit.style.color = 'blue';
        ind.innerHTML = "blue";
    }
    }

    <button type="button" onclick="startCycle()">Start/Resume cycle</button>
    <button type="button" onclick="stopCycle()">Stop cycle</button>
    <div id="title">Colormatic!</div>
    It is currently
    <span id="indicator">blue</span>

非常感谢任何关于此事的帮助谢谢：D

Answer 1

您需要将该功能绑定到window.onload：https://jsfiddle.net/yak613/uauvtoow/

更新了（半）随机颜色。如果添加更多颜色，则会更随机。

var timerId;

var ind = document.getElementById("indicator");
var tit = document.getElementById("title");
var colors = ["red", "blue", "green", "yellow", "purple", "orange", "brown", "gray"];

window.onload = startCycle();

function startCycle() {
timerId = setInterval(changeColor, 500);
}

function stopCycle() {
clearInterval(timerId);
timerId = null;
}

function getColor(){
  return colors[Math.floor(Math.random() * colors.length)];
}
function changeColor() {
  let color = getColor();
  if(color == ind.innerHTML){
  	color = getColor();
  }
  
  ind.innerHTML = color;
  tit.style.color = color;
}

<button type="button" onclick="startCycle()">Start/Resume cycle</button>
<button type="button" onclick="stopCycle()">Stop cycle</button>
<div id="title">Colormatic!</div>
It is currently
<span id="indicator">blue</span>

Answer 2

只需调用函数

即可

... 
MyTwoArrays = np.empty((6000, 6000, 1))
MyArray = np.split(MyTwoArrays, [1], axis=2)[0]
...

在某个地方，例如，在您定义它之后直接在您的javascript中 - 这将起作用，因为javascript在其加载时运行

请参阅jsfiddle并粘贴代码副本

如果您希望其他事件触发行为，您可以使用事件侦听器，你会发现更多关于here

的信息

Answer 3

您可以使用window.onload：

来完成此操作

var timerId;

var ind = document.getElementById("indicator");
var tit = document.getElementById("title");
var color = ["red"];

window.onload = startCycle(); // When the site loads, call the function that starts the interval

function startCycle() {
timerId = setInterval(changeColor, 500);
}

function stopCycle() {
clearInterval(timerId);
timerId = null;
}

function changeColor() {
if (ind.innerHTML == 'blue') {
    tit.style.color = 'green';
    ind.innerHTML = 'green';
}

else if (ind.innerHTML == "green") {
    tit.style.color = 'yellow';
    ind.innerHTML = "yellow";
}

else {
    tit.style.color = 'blue';
    ind.innerHTML = "blue";
}
}

<button type="button" onclick="startCycle()">Start/Resume cycle</button>
<button type="button" onclick="stopCycle()">Stop cycle</button>
<div id="title">Colormatic!</div>
It is currently
<span id="indicator">blue</span>

或者您可以通过onload标记上的body属性执行此操作：

var timerId;

var ind = document.getElementById("indicator");
var tit = document.getElementById("title");
var color = ["red"];

function startCycle() {
  timerId = setInterval(changeColor, 500);
}

function stopCycle() {
  clearInterval(timerId);
  timerId = null;
}

function changeColor() {
  if (ind.innerHTML == 'blue') {
    tit.style.color = 'green';
    ind.innerHTML = 'green';
  } else if (ind.innerHTML == "green") {
    tit.style.color = 'yellow';
    ind.innerHTML = "yellow";
  } else {
    tit.style.color = 'blue';
    ind.innerHTML = "blue";
  }
}

<body onload="startCycle()">
  <button type="button" onclick="startCycle()">Start/Resume cycle</button>
  <button type="button" onclick="stopCycle()">Stop cycle</button>
  <div id="title">Colormatic!</div>
  It is currently
  <span id="indicator">blue</span>
</body>

或者最简单：只需调用startCycle()函数：

var timerId;

var ind = document.getElementById("indicator");
var tit = document.getElementById("title");
var color = ["red"];

startCycle(); // Call the function that starts the timer

function startCycle() {
  timerId = setInterval(changeColor, 500);
}

function stopCycle() {
  clearInterval(timerId);
  timerId = null;
}

function changeColor() {
  if (ind.innerHTML == 'blue') {
    tit.style.color = 'green';
    ind.innerHTML = 'green';
  } else if (ind.innerHTML == "green") {
    tit.style.color = 'yellow';
    ind.innerHTML = "yellow";
  } else {
    tit.style.color = 'blue';
    ind.innerHTML = "blue";
  }
}

<body>
  <button type="button" onclick="startCycle()">Start/Resume cycle</button>
  <button type="button" onclick="stopCycle()">Stop cycle</button>
  <div id="title">Colormatic!</div>
  It is currently
  <span id="indicator">blue</span>
</body>

Answer 4

这个问题的作者似乎最感兴趣的是一种自动启动和停止颜色变化的方法。将颜色“字符串”放入innerHTML并将其用作下一个颜色变化的数据是没有必要的。我添加了另一个（优化的）代码版本和评论。

<p id="p">Lorem ipsum dolor sit amet</p>

<!--attach listener inline just for test purposes-->
<button onclick="updateColor(0)">Start</button>
<button onclick="stopColorChange()">Stop</button>
<script type="text/javascript">
  var text = document.getElementById('p'),
      // put all required colors into an array to loop though them easily
      colors = ['red', 'green', 'blue', 'orange'],
      // specify the change duration
      changeTime = 600, //ms
      // global timerId
      timerId;

  /** 
   * Start color update. First Call should be with parameter 0 to use first 
   * color from a list
   */
  function updateColor(i) {
    // iterate thought the colors array until we reach the end of array and 
    // start loop again
    i = colors.length <= i ? 0 : i;
    text.style.color = colors[i];
    //update timerId each time to be able to stop it when 'stopColorChange' 
    //is called
    timerId = setTimeout(function() {
      updateColor(++i);
    }, changeTime);
  }

  /** 
   * Stop color update. Simply call this function when color change needs to 
   * stop
   */
  function stopColorChange() {
    clearTimeout(timerId);
  }

</script>

https://jsfiddle.net/selevko/a7sot620/

颜色更改文本JavaScript（随机定时器）

4 个答案: