使用JavaScript的背景图片有问题

Question

我希望此JavaScript代码能够根据当前时间更改背景图像。 如果我将代码放在简单的html文件中，问题就什么都没有显示出来。

该代码虽然在这里实时启动： http : //jsbin.com/femem/1/edit

这是代码：

HTML：

    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8">
      <title>JS Bin</title>

        <script src="js/bg.js"></script>

    </head>
    <body>
    <h1>
        some text
    </h1>
    </body>
    </html>

代码JavaScript：

     var d = new Date(),
        h = d.getHours(),
        i;

    if (h < 6) {
        i = "http://placehold.it/450x150";
    } else if (h < 10) {
        i = "http://placehold.it/250x150";
    } else if (h < 18) {
        i = "http://placehold.it/350x150";
    } else if (h < 23) {
        i = "bgbody.jpg";
    } else {
        i = "http://placehold.it/450x150";
    }

    document.body.style.background = "url(" + i + ")";

Answer 1

在运行脚本时，尚未到达<body> ，因此未定义document.body （因为在控制台中收到的错误应该告诉您）。

要解决此问题，只需将脚本移动到<body> -如果需要，它可以位于顶部。

或者，使用基本的PHP：

<body style="background-image:url(<?php
    $h = date("H");
    if( $h < 6) echo "http://placehold.it/450x150";
    elseif( $h < 10) echo "http://placehold.it/250x150";
    elseif( $h < 18) echo "http://placehold.it/350x150";
    elseif( $h < 23) echo "bgbody.jpg";
    else echo "http://placehold.it/450x150";
?>)">

这样可以避免出现“未样式化内容闪烁”（FOUC）

使用JavaScript的背景图片有问题

问题描述

1 个解决方案

解决方案1
1 已采纳 2014-03-08 22:58:46

使用JavaScript的背景图片有问题

问题描述

1 个解决方案

解决方案1 1 已采纳 2014-03-08 22:58:46

解决方案1
1 已采纳 2014-03-08 22:58:46