Question

我是一个绝对的初学者，并且认为我会看到我是否可以复制这个看似基本的项目（http://jenniferdewalt.com/random_background.html）。而不是仅仅复制代码，我想弄清楚为什么我不能让它工作。我真的不知道JS如何与HTML交互。这就是我所拥有的：

HTML：

<link type="text/css" rel="stylesheet" href="../../CSS/randomcolor/randomcolour.css" />
<link type="text/javascript" src="../../JS/Random Colour/randomcolour.js">

<script type="text/javascript" src="../../JS/Random Colour/randomcolour.js"></script>

</head>
<body> 

<a href="javascript:void(0)" onclick="randomColor()";>
<div .class="button" id="button">
  <h2></h2>
</div>
</a>

JS：

function randomColor() {
return '#' + Math.random().toString(16).slice(2, 8);
};

var backgroundColor = randomColor()

这可能距离标记一百万英里，所以如果有人能指出我可以帮助我的资源，那就非常感激了。如果不能解决这个问题就太令人沮丧了！

Answer 1

使用此功能生成随机颜色！

function get_random_color() {
    var letters = '0123456789ABCDEF'.split('');
    var color = '#';
    for (var i = 0; i < 6; i++ ) {
        color += letters[Math.round(Math.random() * 15)];
    }
    return color;
}

在你的html中，不需要class之前的时间段。

然后，使用以下命令设置页面正文：

document.body.style.backgroundColor = get_random_color(); //or stick with randomColor();

最好不要使用内联javascript，尝试设置这样的onclick事件（从html中删除）

var button = document.getElementById("button");
button.onclick = function() {
    //set body style here
}

哦，还有一件事：您尝试使用link标记来引用javascript文件 - 这不起作用。那是CSS！

Answer 2

公式为Element.style.backgroundColor = '#000000;'

Answer 3

您只将背景颜色存储在临时变量中，您需要将其存储到正文的backgroundColor css属性中

所以你需要

document.body.style.backgroundColor = randomColor()

您想要更改背景颜色。

例如，您可以将它直接放在onClick处理程序中，或者调用执行此操作的函数。

Answer 4

这样做的最好方法是......非常容易。

一个。首先定义一个返回随机值的函数，以减少写入。

湾将它们输入rgba ...

℃。你有你想要的。

function rand(x){return Math.round(Math.random()*x);}
document.body.style.backgroundColor='rgba('+rand(255)+','+rand(255)+','+rand(255)+','+rand(10)/10+')';

使用JS更改背景颜色

4 个答案: