Question

我是超级菜鸟。我用一堆按钮创建了以下内容。其中两个按钮是Auto和USA。我想让自动按钮闪烁每种颜色（即红色，白色，蓝色，绿色，黑色以及我决定添加为按钮的任何其他颜色）onClick。我希望美国按钮仅闪烁红色，白色和蓝色，点击。此外，虽然下面没有CSS我也想把按钮放在我想要的位置。我在这个网站上尝试了几个建议定位（即浮动，绝对，相对），但不知道如何编写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>

Answer 1

<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>

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

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

Answer 2

这将从值中获得颜色，而不是将其放在每个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;
}

Answer 3

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

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

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();

Answer 4

非常简单，您可以创建一个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代码中使用了CodePen：http://codepen.io/anon/pen/LpbDE

Answer 5

这将有助于美国和关闭按钮，并会给你一个关于自动的想法。

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();">

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

5 个答案: