0

これのバリエーションは以前にも見たことがありますが、頭痛の原因となる障害に遭遇し続けています。

私がやりたいことは、JavaScript を使用して、自分の地域 (太平洋標準時) の時刻までに自分の Web ページのバナー画像を変更することです。私は関数のためにしなければならない主な考えを理解していますが、画像をインポートする方法や、以前に存在しなかった画像を Web ページに追加する方法について混乱しています。

    function timeOfDayImage() {
    var now = new Date;
    var timeNow = now.getHours();

       if(timeNow < 8 || timeNow > 10){
            code
       }
       else {
          code
       }

何か助けはありますか？

4

3 に答える 3

1

body 要素にクラスを指定します。

function timeOfDayImage() {
    var now = new Date();
    var timeNow = now.getHours();

    if (timeNow < 8 || timeNow > 10) {
        body.classList.add('it-is-time');
    }
}

CSS で要素を変更します。

body #banner {
    background-image: url('images/one.png');
}

body.it-is-time #banner {
    background-image: url('images/two.png');
}
于 2013-03-29T01:37:08.550 に答える
0

Web ページに画像をインポートする必要はありません。srcバナー画像の属性を新しい画像の URL に設定すると、ブラウザがそれをロードします。

function timeOfDayImage() {
   var now = new Date;
   var timeNow = now.getHours();
   if(timeNow < 8 || timeNow > 10){
      document.getElementById('image').src='http://www.images.com/banner1.jpg';
   }
   else {
      document.getElementById('image').src='http://www.images.com/banner2.jpg';
   }
}
于 2013-03-29T01:40:37.980 に答える
0

次のように、バナー画像で ID を使用します。

<img id="banner" alt="Something appropriate" />

を使用getElementByIdして、 から参照を選択しますDoM。選択した要素の変数参照でソース ( src) 属性を変更します。必要に応じて、alt属性を変更して、変更された画像がスクリーン リーダーにとってわかりやすいものになるようにすることもできます。

function timeOfDayImage() {
    var now = new Date;
    var timeNow = now.getHours();
    var img = document.getElementById("banner");
    if (timeNow < 8 || timeNow > 10) {
        img.src="someimage.png";
        img.alt="Something equally appropriate";
    } else {
        img.src="someimage.png";
        img.alt="Something appropriate here too";
    }
}

timeOfDayImage();

存在しない画像をいじる（概念実証）

于 2013-03-29T01:47:19.780 に答える