1

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

我回家加载它..它不再起作用了。我使用的是同一个浏览器，我不知道会有什么改变。。我一定搞砸了一些几乎不可能的方式。但是，唉，我坐在这里傻眼了。。

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

这是代码：

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

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

4

6 回答 6

3

没有'#'.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);
于 2013-10-11T00:41:09.627 回答
1

你使用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"
于 2013-10-11T01:01:04.093 回答
1

试试这个。建立在@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);
}

这是小提琴-> http://jsfiddle.net/Jh5ms/1/

于 2013-10-11T00:55:29.433 回答
0

正如 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();
    };
};

这是一个演示。

这是另一个演示，展示了如何在当前页面中实现它。我还冒昧地将您的事件处理程序更改为不引人注目。

于 2013-10-11T01:05:30.903 回答
0

除了解决问题的 Guffa 之外Math.random()*99，我会将所有这些放在一个循环中，如下所示：

var theColor = "#";

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

return theColor;

这是一个jsFiddle

于 2013-10-11T00:51:30.900 回答
-2

您格式中的另一个答案 - 将其传递给您想要更改背景颜色的任何内容 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;
         }
于 2013-10-11T01:21:49.993 回答