0

我目前正在为一家商店建立一个网站，该商店的营业时间如下：

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>

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

4

6 回答 6

2

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

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

这就是我要说的方法。

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

于 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

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

然后您所要做的就是检测日期/时间并相应地更改类属性。我会说这比<style>在文档中实际写入附加标签更好。只需提前准备好所有这些，然后决定要使用哪一个。

于 2012-10-26T09:03:06.057 回答
0

最好有两个类，.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";
  }
}
于 2012-10-26T09:19:46.293 回答
0

请检查您使用的日期错误的运算符 

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

 if (day==monday)

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

于 2012-10-26T09:08:33.460 回答
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 回答