Question

我正在开发一个简单的项目，每次点击它时都会改变网页的背景。我成功了，测试了几次，保存，再次测试，然后离开。

我回家加载它......它不再有效。我正在使用相同的浏览器，我不知道有什么可以改变的。我一定搞砸了几乎几乎不可能的感觉......但是，唉，我坐在这里愚蠢的......

有人可以看看我的简单程序并告诉我出了什么问题吗？（同样，程序的目的是在您点击页面时将网页的背景颜色更改为随机颜色。）

以下是代码：

<!DOCTYPE HTML PUBLIC>
<html>

<head>
    <title>Random Colors</title>
<script language="javascript">
    function randomColor() {
        var h0 = Math.floor(Math.random()*99);
        var h1 = Math.floor(Math.random()*99);
        var h2 = Math.floor(Math.random()*99);
        var h3 = Math.floor(Math.random()*99);
        var h4 = Math.floor(Math.random()*99);
        var h5 = Math.floor(Math.random()*99);
    return '#'.toString(16)+h0.toString(16)+h1.toString(16)+h2.toString(16);+h3.toString(16)+h4.toString(16)+h5.toString(16);
    }
</script>
</head>

<body onclick="document.bgColor=randomColor();">
</body>
</html>

如果有人可以提供帮助，请提前致谢。

Answer 1

让'#'.toString(16)没有意义，字符串'#'无法转换为十六进制形式的字符串...

h2.toString(16)之后你有一个额外的分号。

return '#'+h0.toString(16)+h1.toString(16)+h2.toString(16)+h3.toString(16)+h4.toString(16)+h5.toString(16);

我认为您希望将每个数字保持在0-15而不是0-98：

var h0 = Math.floor(Math.random()*16);

Answer 2

试一试。以@Guffa所做的为基础

function randomColor() {
    var h0 = Math.floor(Math.random()*16);
    var h1 = Math.floor(Math.random()*16);
    var h2 = Math.floor(Math.random()*16);
    var h3 = Math.floor(Math.random()*16);
    var h4 = Math.floor(Math.random()*16);
    var h5 = Math.floor(Math.random()*16);
    return '#' + h0.toString(16) + h1.toString(16) + h2.toString(16) + h3.toString(16) + h4.toString(16) + h5.toString(16);
}

这是小提琴 - ＆gt; http://jsfiddle.net/Jh5ms/1/

Answer 3

您有多少次使用Math.random吗？

function pad6(s) {
    s = '' + s;
    return '000000'.slice(s.length) + s;
}
function randomColor() {
    var rand = Math.floor(Math.random() * 0x1000000);
    return '#' + pad6(rand.toString(16)).toUpperCase();
}
randomColor(); // "#7EE83D"
randomColor(); // "#19E771"

Answer 4

添加到Guffa修复Math.random()*99问题，我会把所有这些放在这样的循环中：

var theColor = "#";

for (var i = 0; i < 6; i++) {
    theColor += Math.floor(Math.random() * 16).toString(16);
}

return theColor;

这是 jsFiddle

Answer 5

正如Guffa所指出的，您的第一个错误是尝试将“＃”转换为十六进制表示。

这应该可以解决问题：

function randomColor() {
    var ret = Math.floor(Math.random() * (0xFFFFFF + 1)).toString(16);
    return ('#' + new Array((6 - ret.length) + 1).join('0') + ret);
}

window.onload = function() {
    document.querySelector('button').onclick = function() {
        document.querySelector('body').style.backgroundColor = randomColor();
    };
};

Here是一个示范。

Here是另一个演示，展示了如何将其实现到当前页面中。我也冒昧地改变你的事件处理程序是不引人注目的。

Answer 6

您的格式中的另一个答案 - 将此传递给您想要更改背景颜色的任何内容 http://jsfiddle.net/FpLKW/2/

<div onclick="test(this);">

        </div>

          function test (ele) {
                var h0 = Math.floor(Math.random()*10);
                var h1 = Math.floor(Math.random()*10);
                var h2 = Math.floor(Math.random()*10);
                var h3 = Math.floor(Math.random()*10);
                var h4 = Math.floor(Math.random()*10);
                var h5 = Math.floor(Math.random()*10);

            var x =  '#' + h0.toString(16) + h1.toString(16) + h2.toString(16) + h3.toString(16) + h4.toString(16) + h5.toString(16);
            ele.style.backgroundColor=x;
         }

生成随机颜色不起作用

6 个答案: