如何使按钮在单击时闪烁不同的背景颜色/

，您可以创建一个toggleColors函数来每x次更改一次颜色。

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/中的工作方式。

已更新：我制作了一个代码笔用于head标签：http://codepen.io/anon/pen/LpbDE

<script>
    function changecolor(color) {
        document.body.style.background = color
    }
</script>
<input type="button" value="Red" onClick="changecolor('#FF0000')" />

或直接 js

<input type="button" id="redbutton" value="red" />
<script>
    function changecolor(color) {
        document.body.style.background = color
    }
    document.getElementById('redbutton').onclick = changecolor('#FF0000');
</script>

如果您采用直接的 js 路线，请确保在所有输入之后将脚本放在 body 标签的底部。 这样可以确保在执行脚本之前成功加载 DOM，还有其他更好的方法来完成同样的事情，但如果您只是想学习，那么我建议您将脚本标签放在正文底部作为一种很好的做法。

示例 http://jsfiddle.net/bex1gr7L/

这将从值中获取正确的颜色，而不是将其放在每个 html 上。与@rich相同，请确保脚本在正文末尾运行

http://jsfiddle.net/b0e4gb4h/1/

<input type="button" value="black" onclick="changeColor(this)"/>
function changeColor(x) {
    color = x.value;
    document.body.style.background = color;
}

你应该从一开始就养成不把javascript和CSS内联的习惯。随着您的页面变得越来越复杂，您会发现这是一种更好的方法。

有很多方法可以实现您所描述的内容。这种方式使用数据属性来存储颜色值，并请求动画帧来循环自动和美国的颜色。

http://jsfiddle.net/michaelburtonray/yqxbfyvc/

.HTML

<form id="color-form">
    <input type="button" value="Red" data-color="red">
    <input type="button" value="White" data-color="white">
    <input type="button" value="Blue" data-color="blue">
    <input type="button" value="Green" data-color="#008000'">
    <input type="button" value="USA" data-color="red,white,blue">
    <input type="button" value="Off" data-color="black">
    <input type="button" value="Auto" data-color="red, white, blue, orange, black">
</form>

.JS

(function(){
    var color_form, colors_array, animation_frame_request;
    function init() {
        var color_form = document.querySelector('#color-form');
        color_form.addEventListener('click', changeBackground, true);
    }

    function changeBackground(event) {
        event.preventDefault();
        // Stop the loop
        cancelAnimationFrame(animation_frame_request);
        console.log(event.target.dataset.color.split(',').length);
        var colors = event.target.dataset.color.split(',');
        if(colors.length > 1) {
            colors_array = colors;
            cycle_background_colors();
        } else {
            document.bgColor = colors[0];
        }

    }
    function cycle_background_colors() {
        animation_frame_request = requestAnimationFrame(cycle_background_colors);
        var color = colors_array.shift();
        console.log(typeof color, color);
        document.bgColor = color;
        colors_array.push(color);
    }
    document.addEventListener('DOMContentLoaded', init);    
}).call();

这将有助于美国和关闭按钮，并让您对汽车有所了解。

var nIntervId;
 function changeColor() {
     nIntervId = setInterval(flashUSA, 500);
 }
 function flashUSA() {
     var oElem = document.body;
     switch (oElem.style.backgroundColor) {
         case 'red':
             oElem.style.backgroundColor = 'blue';
             break;
         case 'blue':
             oElem.style.backgroundColor = 'white';
             break;
         case 'white':
             oElem.style.backgroundColor = 'red';
             break;
         default:
             oElem.style.backgroundColor = 'red';
             break;
     }
 }
 function stopChangeColor() {
     clearInterval(nIntervId);
 }

在 HTML 上，您需要在输入按钮元素的"onClick"属性上调用该函数。

<input type="button" value="USA" onClick="changeColor();">  
<input type="button" value="Off" onClick="stopChangeColor();">