用一个if语句更改两个值

change two values with one if statement

本文关键字：两个 if 一个 语句      更新时间：2023-09-26

我刚刚开始学习javascript，所以这可能是一个非常简单的问题。我试着寻找答案，但我想我只是知道得不够，不能说，‘哦，这看起来不一样，但也回答了我的问题。’

我想做的是根据一天中的时间更改页面的背景色，也根据一天的时间更改图像。我有一个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…语句来更改图像和背景颜色？我在脑子里试过这样的东西：

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颜色和图像），要么我只是把图像代码搞砸了。

您的第三个（非工作）代码位的问题是，您试图更改脚本运行时不存在的元素的源属性。一般来说，浏览器从上到下解析页面的HTML，当它遇到一个块时，它会运行代码，然后继续浏览HTML。因此，在本例中，您使用的JavaScript代码会更改HTML中元素后面的图像源，这就是它工作的原因。在损坏的代码中，您在head部分调用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等的规则

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

document.body.style.backgroundcolor = color;

是的，您可以使用

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

使用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>
相关文章：