Question

我目前正在为一家商店建立一个网站，其开放时间如下：

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

其他日子（否则）已关闭。

我有一张打开的图像（images/open.png & images/open@2x.png）和一张关闭的图像（images/closed.png & images/closed@2x.png）。

我希望将这些图像显示为具有以下样式的类（.open-closed）中的背景图像（CSS）：

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

是的，它不是很正确，因为宽度在像素方面更好，因为其中有一个图像，但我会在脚本完成后立即对其进行微调。

我对jQuery / Javascript知之甚少，几乎没有。但我搜索了一些碎片并编辑了一些部分。我做错了什么？

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

这可能是一个非常愚蠢的错误......

Answer 1

我会说你比较错误的日子。

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

这就是我要说的方法。

另外：尽量避免添加新的style标记。定义CSS类并决定应用哪一个。假设您有两个类：.open和.closed。在这些类中，定义每个背景图像。所以你需要做的就是决定使用哪一个。

Answer 2

一个更简单的解决方案是在不同的类中定义所需的所有不同类型的图像。每种不同日期类型的唯一类。

然后你要做的就是相应地检测日期/时间和change the class attribute。我想说这是比将额外的<style>标签写入文档更好的方法。只需提前准备好所有这些，然后决定使用哪一个。

Answer 3

请检查您用于日期错误的操作员

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

 if (day==monday)

动态编写css类不是好事，然后动态创建两个类分配它们。

Answer 4

为什么不使用对象文字存储数据，如下所示：

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。

在商店没有营业的日子里，我在开放和关闭时间都加了同一小时，就像我在我的例子中所做的那样。

Answer 5

要实际设置图像，这会更合适;根据日期添加一个打开和关闭的类，如下所示：

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

Answer 6

最好的方法是拥有两个类，.open和.closed，并通过代码设置其中一个。

例如：

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

根据时间更改图像

6 个答案: