Question

我想在单击按钮时更改文本字段背景颜色，并且在一段时间后闪烁应该停止/

我尝试在其中使用setTimeout尝试setInterval，结果如下：

＆＃13;

var interval;
function myFunction2(){
	interval = setInterval(function(){myFunction()}, 500);
}
function myFunction() {
	var x = document.getElementById("blink");
	x.style.backgroundColor = x.style.backgroundColor == "white" ? "blue" : "white";
	setTimeout(function(){clearInterval(interval);}, 1500);
}

＆＃13;

<html>
	<head>
		<title>blink</title>
	</head>
	<body>
		<input type="text" id="blink" value="blinking!"  style="background: white;">
		<button type="button" id="blinkbtn" onclick="myFunction2();">click!</button>
	</body>
</html>

＆＃13;

此代码中有2个问题，但有时背景会卡在蓝色上，我不想这样。第二个问题是在第一次运行功能后（按下按钮时），您需要双击按钮再次运行功能。

Answer 1

使用css闪烁animation并使用javascript＆＃39; s setTimeout添加类.blink并在x秒后删除它：< / p>

＆＃13;

function myFunction2() {
  const x = document.getElementById("blink")
  x.classList.add('blink')
  
  setTimeout(function() {
    x.classList.remove('blink')
  }, 1000)
  
}

＆＃13;

.blink {
  animation: blink .1s linear infinite;
}

@keyframes blink {
  from {
    background: #fff;
  }
  to {
    background: blue;
  }
}

＆＃13;

<input type="text" id="blink" value="blinking!" style="background: white;">
<button type="button" id="blinkbtn" onclick="myFunction2();">click!</button>

＆＃13;

Answer 2

你设置超时3次（每次调用间隔函数）

此版本解决了您的问题：

var interval, timeout;
var x = document.getElementById("blink");
function clear(){
  if(interval){
    clearInterval(interval); 
    console.log("clear interval");
  }
  if(timeout){
    clearInterval(timeout); 
    console.log("clear timeout");
    x.style.backgroundColor = "white";
  }
}

function myFunction2(){
  clear();
	interval = setInterval(myFunction, 500);
  timeout = setTimeout(clear, 2050); //4x500 + a little delay to ensure the 4 times run
}
function myFunction() {
	x.style.backgroundColor = x.style.backgroundColor == "white" ? "blue" : "white";
}

<html>
	<head>
		<title>blink</title>
	</head>
	<body>
		<input type="text" id="blink" value="blinking!"  style="background: white;">
		<button type="button" id="blinkbtn" onclick="myFunction2();">click!</button>
	</body>
</html>

使用setInterval更改文本字段颜色;

2 个答案: