使用JS更改背景颜色
[英]Use JS to change background colour
问题描述
I am an absolute beginner, and thought that I'd see if i could copy this seemingly basic project ( http://jenniferdewalt.com/random_background.html ). 
我是一个绝对的初学者，我想我是否可以复制这个看似基本的项目（ http://jenniferdewalt.com/random_background.html ）。 Rather than just copy the code, I want to figure out why I can't get it to work. 我不仅要复制代码，还想弄清楚为什么我无法使它正常工作。 I really have no idea how JS interacts with HTML. 我真的不知道JS如何与HTML交互。 Here's what i've got: 这是我所拥有的：
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: JS：
function randomColor() {
return '#' + Math.random().toString(16).slice(2, 8);
};
var backgroundColor = randomColor()
This is all probably a million miles off the mark, so if anyone can point me to a resource that will help me out at all, it'd be much appreciated. 这大概距离目标有100万英里，因此，如果有人可以将我指向可以完全帮助我的资源，将不胜感激。 It's so frustrating not being able to figure this out! 无法解决这个问题真令人沮丧！
4 个解决方案
解决方案1
3 2013-12-18 01:23:03
Use this function to generate a random color! 使用此功能生成随机颜色！
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;
}
And in your html, the period before class is not needed. 并且在您的html中，不需要class前的时间。
Then, set the body of the page with: 然后，使用以下命令设置页面的正文：
document.body.style.backgroundColor = get_random_color(); //or stick with randomColor();
It's also better practice not to use inline javascript, try setting the onclick event like this (removing it from the html) 最好不要使用内联javascript，尝试像这样设置onclick事件（将其从html中删除）
var button = document.getElementById("button");
button.onclick = function() {
//set body style here
}
Oh, one more thing: you're trying to use a link tag to reference a javascript file -- this will not work. 哦，还有一件事：您正在尝试使用link标记来引用javascript文件-这将无法工作。 That's for CSS! 那是针对CSS的！
解决方案2
1 2013-12-18 01:19:58
公式为Element.style.backgroundColor = '#000000;'
解决方案3
1 2013-12-18 01:21:49
You are only storing the background color in a temporary variable, you need to store it into the backgroundColor css property of the body 您仅将背景色存储在一个临时变量中，您需要将其存储到主体的backgroundColor css属性中
so you need 所以你需要
document.body.style.backgroundColor = randomColor()
where you want to change the background color. 您要在其中更改背景颜色的位置。
For examlple you could put this directly in the onClick handler, or call function that does this. 例如，您可以将其直接放在onClick处理程序中，或调用执行此操作的函数。
解决方案4
0 2013-12-18 01:31:15
The best way to do this is this.... very easy. 做到这一点的最好方法是...。非常简单。
a. 一种。 first define a function that return random values so less writing. 首先定义一个返回随机值的函数，从而减少编写工作。
b. b。 input those into rgba ... 输入这些到RGBA ...
c. C。 you have what you want. 你有你想要的。
function rand(x){return Math.round(Math.random()*x);}
document.body.style.backgroundColor='rgba('+rand(255)+','+rand(255)+','+rand(255)+','+rand(10)/10+')';
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.