0

I'm currently building a website for a shop which has the following opening times:

Tuesday & Wednesday: 10.00 - 17.00
Thursday: 10.00 - 12.30

Other days (else) is closed.

I've got an image for open (images/open.png & images/open@2x.png) and one for closed (images/closed.png & images/closed@2x.png).

I want to display those images as a background image (CSS) in a class (.open-closed) which has the following styles:

.open-closed {
    width: 48%; 
    background-color: #b3b3b3;
    display: inline-block;
    margin-top: 3%;
    border: 5px solid white;
    min-height: 300px;
    float: left;
}

Yes, it's not very correct since the width is better in pixels since there is an image in it, but I will fine-tune this as soon as the script is done.

I don't know much about jQuery/Javascript, almost nothing. But I googled some pieces together and edited some parts. What am I doing wrong?

   <script language="JavaScript">

    day=new Date()     //..get the date

    x=day.getHours()    //..get the hour


    if(x>=10 && x<17) {

       document.write('<style type="text/css">.open-closed{background-image:       url(images/open.png); background-repeat:no-repeat; width:300px; height: 285px; background-size: 300px 285px;}</style>')

    } else

    if (x>=17 && x<24) {

       document.write('<style type="text/css">.open-closed{background: url(images/closed.png); background-repeat:no-repeat; width:300px; height: 285px; background-size: 300px 285px;}</style>')

    } else

    if (day=tuesday && x>=10 && x<12.30) {

   document.write('<style type="text/css">.open-closed{background: url(images/open.png); background-repeat:no-repeat; width:300px; height: 285px; background-size: 300px 285px;}</style>')

    } else

    if (day=monday) {

   document.write('<style type="text/css">.open-closed{background: url(images/closed.png); background-repeat:no-repeat; width:300px; height: 285px; background-size: 300px 285px;}</style>')

    } else

    if (day=friday) {

   document.write('<style type="text/css">.open-closed{background: url(images/closed.png); background-repeat:no-repeat; width:300px; height: 285px; background-size: 300px 285px;}</style>')

    } else

    if (day=saturday) {

   document.write('<style type="text/css">.open-closed{background: url(images/closed.png); background-repeat:no-repeat; width:300px; height: 285px; background-size: 300px 285px;}</style>')

    } else

    if (day=sunday) {

   document.write('<style type="text/css">.open-closed{background: url(images/closed.png); background-repeat:no-repeat; width:300px; height: 285px; background-size: 300px 285px;}</style>')

    }

   </script>

It's probably a very stupid mistake...

4

6 に答える 6

2

日を比較するのは間違っていると思います。

if(day.getDay() == 1) {
  // Now it's monday
}

それが私が言うだろうそれを行う方法です。

styleまた、新しいタグを追加しないようにしてください。CSS クラスを定義し、どれを適用するかを決定します。.open と .closed の 2 つのクラスがあるとします。これらのクラスでは、各背景画像が定義されています。したがって、どれを使用するかを決定するだけです。

于 2012-10-26T09:06:38.300 に答える
0

実際に画像を設定するには、これがより適切です。以下のように、曜日に応じてオープンとクローズのクラスを追加します。

if(day.getDay() == 1) {
  $("#divname").addClass("closed");
}
else if(day.getDay() == 2) {
  $("#divname").addClass("open");
}

次に、CSS：

.open{background: url(images/open.png); }
.closed{background: url(images/closed.png); }
于 2012-10-26T09:16:09.803 に答える
0

Please check operators you have used for date that is wrong 

 if (day=monday)-- this must be problem

 if (day==monday)

writing css class dynamically not good thing create two classes then dynamically assign them.

于 2012-10-26T09:08:33.460 に答える
0

最善の方法は、 2 つのクラス.openを.closed用意し、そのうちの 1 つをコードで設定することです。

元：

CSS:

.open{
  background: url(images/open.png)
}

.closed{
  background: url(images/closed.png)
}

.open, .closed{
  ...
}

JS:

function updateOpenClosed(){
  var now = new Date();
  var day = now.getDay();
  var hour = now.getHour()+now.getMinute()/60;
  var banner = document.getElementById("open-closed")

  switch(day){
    case 2:
    case 3:
      if(hour>=10 && hour<17){
        banner.class="open";
      }else{
        banner.class="closed";
      }
      break;
    case 4:
      if(hour>=10 && hour<12.5){
        banner.class="open";
      }else{
        banner.class="closed";
      }
      break;
    default:
      banner.class="closed";
  }
}
于 2012-10-26T09:19:46.293 に答える
0

次のようにオブジェクト リテラルを使用してデータを保存してみませんか。

times = {
    "1": {
        "name": "Monday",
        "open": 10,
        "close": 17
    },
   "2": {
        "name": "Tuesday",
        "open": 10,
        "close": 17
    },
    // more days here
   "6": {
        "name": "Sunday",
        "open": 0,
        "close": 0 // assign same hour if not open at all
    }
}

以下のcssで

.open {
    background: url(images/open.png);
}
.closed {
    background: url(images/closed.png); 
}

次に、次のことができます

var day = new Date();
var d   = day.getDay();
var x   = day.getHours();

if( x >= times[ d ].open && x < times[ d ].close ) {

    $("#open-closed").addClass("open");
    $("#open-closed").removeClass("close");

} else {

    $("#open-closed").addClass("close");
    $("#open-closed").removeClass("open");

}

クラスを追加する方法は、jQuery を持っているかどうかによって異なりますが、JavaScript だけでそれを行いたい場合は、次の Change an element's class with JavaScript を試してください。

店が開いていない日については、私の例で行ったように、開店時間と閉店時間の両方に同じ時間を追加します。

于 2012-10-26T09:13:17.960 に答える
0

はるかに簡単な解決策は、異なるクラスで必要なすべての異なるタイプの画像を定義することです。異なるタイプの日付ごとに固有のクラス。

次に、日付/時刻を検出し、それに応じてクラス属性を変更するだけです。これは、実際に<style>ドキュメントに追加のタグを書き込むよりも優れた方法だと思います。事前にすべてを準備し、どれを使用するかを決めてください。

于 2012-10-26T09:03:06.057 に答える