更改两个值如果语句

我刚刚开始学习JavaScript，因此这可能是一个非常简单的问题。我试着寻找答案，但我想我只是不知道如何，'哦，这看起来不同，但也回答我的问题。更改两个值如果语句

我希望能够做的是根据一天的时间来改变根据一天的时间网页的背景颜色，也改变图像。我使用if ... else if ...语句来处理放置在页面头部的背景色，以及单独的if ... else if ...语句影响正文中的图像。

头脚本，改变背景颜色的样子：

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...

但它没有工作。

我认为与第三个（非工作）的例子，要么不可能有一个如果......做两件事（改变颜色和图像），或者我只是搞乱图像代码。

来源

2012-03-09 mattjulian

的问题与你的第三个（非工作）的代码的一点是，您正尝试更改脚本运行时不存在的元素的源属性。一般来说，浏览器从上到下解析页面的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等

来源

2012-03-09 03:54:35 MartinAnsty

，完美的工作！谢谢！（另一个初学者问题：在var body = document.getElementsByTagName（'body'）[0]，这个零为什么？） – mattjulian 2012-03-09 14:07:15

getElementsByTagName（）返回元素数组（注意它是“元素”，复数），因为它返回所有来自页面的匹配元素。在这种情况下，只有一个元素会被返回，因为只有一个标签;但是如果您确实获得了ElementElementByTagname（'img'），它将返回多个元素。无论哪种情况，返回的元素都会返回到一个数组中。 [0]是你如何指定你想要数组的第一个项目（在这种情况下是唯一的项目）。如果你想了解更多查看JavaScript数组符号 – MartinAnsty 2012-03-09 15:46:57

Gotcha。再次感谢！ – mattjulian 2012-03-09 19:57:16

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

document.body.style.backgroundcolor = color;

来源

2012-03-09 03:47:31 Hanon

是的，你可以使用

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

来源

2012-03-09 03:50:40 PraveenVenu

使用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>

来源

2012-03-09 04:59:36 Diode

更改两个值如果语句

回答

相关问题