Javascript 生成随机颜色不起作用_Javascript_Html

Javascript 生成随机颜色不起作用

javascript html

Javascript 生成随机颜色不起作用,javascript,html,Javascript,Html,我在做一个简单的项目，每次你点击一个网页，它的背景都会改变。我成功了，测试了几次，保存，再次测试，然后离开我回家装东西。。它不再有效了。我使用的是同一个浏览器，我不知道会有什么变化。。我一定是弄糟了一些几乎不可能的事情。。但是，唉，我坐在这里谁能看看我的简单程序，告诉我出了什么问题？（同样，该程序的目的是在单击网页时将网页的背景颜色更改为随机颜色。）代码如下： <!DOCTYPE HTML PUBLIC> <html> <head> <t

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

我回家装东西。。它不再有效了。我使用的是同一个浏览器，我不知道会有什么变化。。我一定是弄糟了一些几乎不可能的事情。。但是，唉，我坐在这里

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

代码如下：

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


随机颜色
函数randomColor（）{
var h0=数学地板（数学随机（）*99）；
var h1=Math.floor（Math.random（）*99）；
var h2=Math.floor（Math.random（）*99）；
var h3=数学地板（数学随机（）*99）；
var h4=数学地板（数学随机（）*99）；
var h5=数学地板（数学随机（）*99）；
返回'#'.toString（16）+h0.toString（16）+h1.toString（16）+h2.toString（16）；+h3.toString（16）+h4.toString（16）+h5.toString（16）；
}

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

拥有

'#'。toString（16）

毫无意义，字符串

'#'

无法转换为十六进制形式的字符串

在

h2.toString（16）

后面有一个额外的分号

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

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

再加上Guffa修复了

Math.random（）*99

问题，我会将所有这些放在一个循环中，如下所示：

var theColor = "#";

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

return theColor;

var theColor=“#”；
对于（变量i=0；i<6；i++）{
颜色+=Math.floor（Math.random（）*16）.toString（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);
}

这是小提琴-->

你为什么要用

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

这是一次示威

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

另一个以您的格式给出的答案-将此内容传递给您想要更改背景颜色的任何内容


功能测试（ele）{
var h0=数学地板（数学随机（）*10）；
var h1=Math.floor（Math.random（）*10）；
var h2=数学地板（数学随机（）*10）；
var h3=数学地板（数学随机（）*10）；
var h4=数学地板（数学随机（）*10）；
var h5=数学地板（数学随机（）*10）；
变量x='#'+h0.toString（16）+h1.toString（16）+h2.toString（16）+h3.toString（16）+h4.toString（16）+h5.toString（16）；
元素样式背景色=x；
}

请提供一把小提琴。

？有趣的数字选择。无论如何，现代化将是一个良好的开端

、

和

document.style.backgroundColor=randomColor（）。仅一个平头十六进制值在“#”符号后有6个值。您的函数有时返回5。提示：var r=function（）{return Math.random（）*256 | 0；}；返回“rgb（“+r（）+”、“+r（）+”、“+r（）+”）”
@vernak2539:h[0..5]
是6（虽然不一定是6位数，正如Guffa指出的那样）。你太棒了，非常感谢你，但它似乎仍然不起作用。伙计，这比我想象的要糟糕得多，哈哈。。抱歉。只是指出，虽然“#”.toString（16）
在dec->hex的上下文中没有意义，但在本例中，16
实际上将被忽略，并且您将得到“#”
返回给您。@PaulS:是的，它不会阻止代码工作，它只是毫无意义和误导。：？？为什么要投否决票？？这不管用吗？我认为它比其他选项精简得多。可能是因为你return
ed没有函数？（不是我投了否决票，其余的都没问题）querySelector
不像OP的代码建议的那样向后兼容预期环境，为什么不通过id或类似的引用？@PaulS。我使用了querySelector
，因为它只是一个实现示例-OP难以理解的主要问题是随机颜色的生成，我回答得很充分。@PaulS.：querySelector有IE8。OP的代码建议使用Netscape。这很合理。我不知道如果它在每次点击时都起作用，那么它是如何被否决的。所有随机生成的数字的上界都是一次过的，并且你没有留下填充结果的十六进制。@Spooky:有6个数字，不需要留下填充。他们更像是六个，但不一定（OP从未澄清）。@minitech参考资料留下空白：哦，是的，我的错。不，每个随机数都是一个。这不会导致最终输出为0x111111关闭吗？；）@幽灵：每个随机数都是六个。
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();
    };
};

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