Question

为了好玩，我想让我的网站有一个动态背景颜色，它是一个基于当前时间的rgb值。我做了一些谷歌搜索并想出了以下内容，但它没有用。

的index.html

<!DOCTYPE html>
<html>
<head>
    <title>Site</title>
    <link rel="stylesheet" type="text/css" href="style.css">
    <link type="text/javascript" src="date.js">
    <style>
        p{
        font-size: 150%;
        }
    </style>
</head>
<body>
</body>
</html>

date.js

$(document).ready(function() {
setInterval(function(){currentTime("#idTimeField")}, 500);
});
function currentTime(field) {
var now = new Date();
now = (now.getHours() * 10) + ', ' + (now.getMinutes() * 4) + ', ' + (now.getSeconds() * 4);
$(field).val(now);
}

document.getElementsByName("html").style.backgroundColor = "rgb(" + now + ")";

任何人都可以帮助我解决我做错的事情，或者替代/更好的方法吗？如果我做了一些愚蠢的事情，我很抱歉，我非常喜欢javascript noob

提前致谢

Answer 1

你的最后一行无法使用。并且document.getElementByName不适用于html代码，您应该使用document.getElementByTagName。

总之使用这个

$(document).ready(function() {
  setInterval(function(){currentTime("#idTimeField")}, 500);
});


function currentTime(field) {
  var now = new Date();
  now = (now.getHours() * 10) + ', ' + (now.getMinutes() * 4) + ', ' + (now.getSeconds() * 4);
  $(field).val(now);
  $('body').css('background-color', "rgb(" + now + ")");

}

Answer 2

下面。所有jQuery。修改代码以便工作。

＆＃13;

$(document).ready(function() {
  setInterval(function(){currentTime("#idTimeField")}, 500);
});
function currentTime(field) {
  var now = new Date();
  now = (now.getHours() * 10) + ', ' + (now.getMinutes() * 4) + ', ' + (now.getSeconds() * 4);
  $(field).val(now);
  $('html,body').css({'background-color':'rgb('+now+')'});
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
    <title>Site</title>
    <link rel="stylesheet" type="text/css" href="style.css">
    <link type="text/javascript" src="date.js">
    <style>
        p{
        font-size: 150%;
        }
    </style>
</head>
<body>
  <div id="idTimeField">20:10:34</div>
</body>
</html>

＆＃13;

Answer 3

这样的事情怎么样：

$(document).ready(function() {
setInterval(function(){currentTime("#idTimeField")}, 500);
});
function currentTime() {
var now = new Date();
var R = (now.getHours() * 10) ;
var G = (now.getMinutes() * 4) ;
var B = (now.getSeconds() * 4);
document.body.style.backgroundColor = 'rgb(' + [R,G,B].join(',') + ')';
}

使用时间作为css背景颜色

3 个答案: