我是这方面的 super 菜鸟。我用一堆按钮创建了以下内容。其中两个按钮是自动和美国。我希望自动按钮在单击时闪烁每种颜色(即红色、白色、蓝色、绿色、黑色以及我决定添加为按钮的任何其他颜色)。我希望美国按钮在单击时仅闪烁红色、白色和蓝色。此外，虽然下面没有 CSS，但我也想将按钮放置在我想要的位置。我在这个网站上尝试了几种建议定位的方法(即 float 、绝对、相对)，但不知道如何为此编写 CSS(它是否介于样式标签之间？)。我们将不胜感激。
`<HTML>
<HEAD>
<script type = “JavaScript” >
function changecolor (code)
{
document.bgcolor = code
};
</script>
</HEAD>
<BODY>
<form action="">
<input type="button" value="Red" onClick="document.bgColor = '#FF0000';">
<input type="button" value="White" onClick="document.bgColor = '#FFFFFF';">
<input type="button" value="Blue" onClick="document.bgColor = '#0000FF';">
<input type="button" value="Green" onClick="document.bgColor = '#008000';">
<input type="button" value="USA" onClick="document.bgColor = '#99CCFF';">
<input type="button" value="Off" onClick="document.bgColor = '#000000';">
<input type="button" value="Auto" onClick="document.bgColor = '#FFF888';">
</form>
</BODY>
</HTML>
最佳答案
非常简单，您可以创建一个 toggleColors 函数来每次更改颜色。
JavaScript:
// Globar vars
var timer;
var miliseconds = 500;
/**
* Function to toggle bgColor
* @param array colors Array of colors to set
**/
function toggleColors( colors ){
clearTimeout(timer);
var counter = 0
var change = function(){
document.bgColor = colors[ counter%colors.length ];// Change the color
counter ++;
if( colors.length > 1 )
timer = setTimeout(change, miliseconds); // Call the changer
};
change();
}
HTML:
<input type="button" value="Red" onClick="toggleColors(['#F00'])">
<input type="button" value="White" onClick="toggleColors(['#FFF'])">
<input type="button" value="Blue" onClick="toggleColors(['#00F'])">
<input type="button" value="Green" onClick="toggleColors( ['#008000'])">
<input type="button" value="USA" onClick="toggleColors( ['#F00', '#FFF', '#00F'])">
<input type="button" value="Off" onClick="toggleColors( ['#000'])">
<input type="button" value="Auto" onClick="toggleColors( ['#F00', '#FFF', '#00F', '#0F0' ])">
您可以在 http://jsfiddle.net/91ahbkem/1/ 中查看工作原理.
更新:
我制作了一个 CodePen 用于 head 标签:http://codepen.io/anon/pen/LpbDE
关于javascript - 单击时如何使按钮闪烁不同的背景颜色/，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25314129/