Question

我试图在按钮点击时将正文背景颜色更改为随机颜色。

<script>
$( document ).ready(function() {
    $('.SpecButton').click(function() {
        $('body').css('background-color',"<?php 
            $rand = array('0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'a', 'b', 'c', 'd', 'e', 'f');
            $color = '#'.$rand[rand(0,15)].$rand[rand(0,15)].$rand[rand(0,15)].$rand[rand(0,15)].$rand[rand(0,15)].$rand[rand(0,15)];
            echo $color;
                ?>");
            });
        });     
</script>

问题是第一次点击更改背景颜色，但第二次尝试不更改。

Answer 1

你应该在javascript中进行随机数生成。由于PHP代码是服务器端，它只会设置一次随机数，而使用javascript，每次单击按钮时都可以获得新的随机数。

$( document ).ready(function() {
    $('.SpecButton').click(function() {
        var color = '#'+Math.floor(Math.random()*16777215).toString(16);
        $('body').css('background-color', color );
    });
});

在这里小提琴：http://jsfiddle.net/TQ3hV/

或者如果您对RGB颜色没问题，这种方法可能最简单，最清晰：

var color = 'rgb(' + Math.floor(Math.random() * 255) + ',' 
                   + Math.floor(Math.random() * 255) + ','
                   + Math.floor(Math.random() * 255) + ')';

在这里小提琴：http://jsfiddle.net/TQ3hV/1/

随机颜色生成器的来源：http://www.paulirish.com/2009/random-hex-color-code-snippets/

Answer 2

我在尝试代码时遇到了同样的问题。我不喜欢那里的PHP，所以我找到了一些Javascript给你。假设您在脚本之前加载jquery，我会跳过内联php并使用以下内容：

$( document ).ready(function() {
    $('.SpecButton').click(function() {
        var x = Math.round(0xffffff * Math.random()).toString(16);
        var y = (6-x.length);
        var z = '000000';
        var z1 = z.substring(0,y);
        var color = '#' + z1 + x;
        console.log(color);  // just in case you like the color, here's the number
        $('body').css('background-color', color );
    });
});

我在本页的评论部分找到了它：

http://css-tricks.com/snippets/javascript/random-hex-color/

随机背景颜色变化

2 个答案: