Question

我刚刚开始学习javascript，所以这可能是一个非常简单的问题。我已经尝试过寻找答案了，但我想我不知道会不会这样，噢，这看起来不一样，但也回答了我的问题。＆＃39;

我希望能够根据一天中的时间更改页面的背景颜色，还可以根据一天中的时间更改图像。我有一个if ... else if语句用于放置在页面头部的背景颜色，以及一个单独的if ... else if语句影响正文中的图像。

更改bg颜色的头部脚本如下所示：

var d=new Date();  
var time=d.getHours();  

if (time>=0 && time<=5)  
{  
document.write ('&lt;body style="background-color: 296688">')  
}  
else if

...然后其他时间跟随，每个都有不同的颜色。

更改图像的正文脚本如下所示：

<img src="" name="sunMoon" id="sunMoon" />  
    <script type="text/javascript">  
    var d=new Date();  
    var time=d.getHours();  
    var elem = document.getElementById('sunMoon')  
if (time>=0 && time<=5)  
        {  
        elem.src = 'Images/sunMoon1.png'  
        }  
    else if

...然后其他时间跟随，每个都有不同的src。

是否可以使用头部中相同的if ... else if语句更改图像和bg颜色？我在头脑中试过这样的事情：

var d=new Date();
var time=d.getHours();
var elem=document.getElementById('sunMoon')

    if (time>=0 && time<=5)
    {
    document.write ('<body style="background-color: 2966B8">');
            elem.src="images/sunMoon1.png"
    }
else if...

但它没有用。

我认为对于第三个（非工作）示例，要么是不可能有单个if ...做两件事（更改bg颜色和图像），或者我只是搞乱了图像代码。

Answer 1

是的，你可以，你可以改变这样的身体风格：

document.body.style.backgroundcolor = color;

Answer 2

是的，你可以使用

var d=new Date();
var time=d.getHours();
var elem=document.getElementById('sunMoon')

if (time>=0 && time<=5)
{
 document.body.style.backgroundImage ="images/sunMoon1.png";
 document.body.style.backgroundColor = "#2966B8";
}

Answer 3

第三个（非工作）代码的问题在于您尝试更改运行脚本时不存在的元素的source属性。一般来说，浏览器从上到下解析页面的HTML，当它遇到一个块时，它运行代码然后继续通过HTML。因此，在示例中，您使用了改变图像源的JavaScript代码，它位于HTML中的元素之后，这就是它工作的原因。在破损的代码中，您在头部区域调用elem=document.getElementById('sunMoon')，因此尚未存在ID为“sunMoon”的元素。

通常，最好将脚本放在页面底部（就在结束标记之前），以便它们在其他所有内容都加载后运行，并且不会阻止页面的呈现。如果你这样做，你需要更改改变背景颜色的代码，因为你不能直接将其写入body标签。最佳实践解决方案是根据一天中的时间将不同的CSS类应用于正文，然后为CSS中的每个类设置样式规则。

例如：

<script type="text/javascript">

  var body = document.getElementsByTagName('body')[0];
  var elem = document.getElementById('sunMoon');

  if (time>=0 && time<5)  
  {  
    body.className = 'morning';
    elem.src = 'Images/sunMoon1.png';
  }  
  else if (time>=5 && time<10)  
  {  
    body.className = 'afternoon';
    elem.src = 'Images/sunMoon2.png';
  }

</script>

然后在您的CSS中，您需要.morning，.afternoon等

的规则

Answer 4

使用onload事件

<html> 
    <head>
        <script>

             function onBodyload(e){

                  var image = document.getElementById('sunMoon');

                  if(condition){
                      document.body.style.backgroundcolor =  ...
                      image.src = ...
                  }else if(condition){
                      document.body.style.backgroundcolor =  ...
                      image.src = ...
                  }else if...            

             }

        </script>
    </head>
    <body onload="onBodyload">
      ...
      ...
    </body>
</html>

使用一个if语句更改两个值

4 个答案: