生成随机颜色不起作用

Generating a random color not working

本文关键字：不起作用 生成随机颜色      更新时间：2023-09-26

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

我回家装车。.它不再有效。我使用相同的浏览器，我不知道有什么可以改变的。我一定搞砸了几种几乎不可能的方式，感觉就像..但是，唉，我坐在这里傻眼了。

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

这是代码：

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

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

'#'.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);

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

你使用

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"

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

这是一个演示。

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

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

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

这是一个jsFiddle

您的格式的另一个答案 - 将其传递给您想要更改背景颜色的任何内容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;
         }
相关文章：