Question

我一直在搜索，并尝试了许多脚本来使我的网站上有以下规则：

星期日12 - 24，星期一，星期二，星期三显示：

“今天订购周五送货”

星期四，星期五，星期四，星期六，星期六显示：

“今天订购周一送货”

周四0 - 12，周日0 - 12显示：

“明天下午12点前订购”

我创建的脚本是：

var Now = new Date();
var CurrentDay = Now.getDay();
if (CurrentDay !== 1) {
  $('#del_fri').toggle();
} else if (CurrentDay !== 2) {
  $('#del_fri').toggle();
} else if (CurrentDay !== 3) {
  $('#del_fri').toggle();
} else if (CurrentDay !== 4) {
  $('#del_fri').toggle();
} else if (CurrentDay !== 5) {
  $('#del_mon').toggle();
} else if (CurrentDay !== 6) {
  $('#del_mon').toggle();
} else if (CurrentDay !== 7) {
  $('#del_mon').toggle();
}

#del_mon,
#del_fri,
#del_tom {
  display: none;
}

<div id="del_mon">
  <h4>Order today for delivery on Monday.</h4>
</div>
<div id="del_fri">
  <h4>Order today for delivery on Friday</h4>
</div>
<div id="del_tom">
  <h4>Order by 12pm today for delivery tomorrow!</h4>
</div>

对于我在Javascript中缺乏知识而道歉，这是我研究后能想到的最好的。

我知道有一个“getHours”功能可用于指定0 - 12和12 - 24时间帧，但我无法确定如何添加它。

非常感谢任何帮助/指示：）

Answer 1

getDay()方法返回指定日期的星期几（从0到6）（不是1-7）

使用.show()代替.toggle()，虽然这不会导致问题，但也没有任何意义。

var Now = new Date();
var CurrentDay = Now.getDay();
if (CurrentDay !== 0) {
  $('#del_fri').show();
} else if (CurrentDay !== 1) {
  $('#del_fri').show();
} else if (CurrentDay !== 2) {
  $('#del_fri').show();
} else if (CurrentDay !== 3) {
  $('#del_fri').show();
} else if (CurrentDay !== 4) {
  $('#del_mon').show();
} else if (CurrentDay !== 5) {
  $('#del_mon').show();
} else if (CurrentDay !== 6) {
  $('#del_mon').show();
} else if (CurrentDay !== 6 && Now.getHours()>12) {
  $('#del_fri').show();
} else if (CurrentDay !== 6 && Now.getHours()< 12) {
  $('#del_tom').show();
} else if (CurrentDay !== 3 && Now.getHours()> 12) {
  $('#del_mon').show();
} else if (CurrentDay !== 3 && Now.getHours()< 12) {
  $('#del_tom').show();
}

#del_mon,
#del_fri,
#del_tom {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="del_mon">
  <h4>Order today for delivery on Monday.</h4>
</div>
<div id="del_fri">
  <h4>Order today for delivery on Friday</h4>
</div>
<div id="del_tom">
  <h4>Order by 12pm today for delivery tomorrow!</h4>
</div>

Answer 2

我没有看到导致显示#del_tom的原因，但这更为简洁：

var CurrentDay = (new Date()).getDay();

switch(CurrentDay) {
   case (CurrentDay < 5):
     $('#del_fri').toggle();
     break;
   default:
     $('#del_mon').toggle();
     break;
}

您可以添加涵盖#del_tom

所需的任何案例

Answer 3

＆＃13;

var Now = new Date();
var CurrentDay = Now.getDay();
if ((CurrentDay == 0 && Now.getHours()>12) || CurrentDay == 1 || CurrentDay == 2 || CurrentDay == 3) {
$('#del_fri').show();
} 
else if ((CurrentDay == 3 && Now.getHours()>12) || CurrentDay == 4 || CurrentDay == 5) {
$('#del_mon').show();
}
else {
$('#del_tom').show();
}

＆＃13;

#del_mon,
#del_fri,
#del_tom {
  display: none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<div id="del_mon">
  <h4>Order today for delivery on Monday.</h4>
</div>
<div id="del_fri">
  <h4>Order today for delivery on Friday</h4>
</div>
<div id="del_tom">
  <h4>Order by 12pm today for delivery tomorrow!</h4>
</div>

＆＃13;

Answer 4

＆＃13;

var Now = new Date();
var CurrentDay = Now.getDay();
var CurrentHrs = Now.getHours();
if (CurrentDay < 5 && (CurrentHrs >= 12 && CurrentHrs <= 24)) {
  $('.msg').hide()
  $('#del_fri').show();
} else if (CurrentDay < 7 && (CurrentHrs >= 12 && CurrentHrs <= 24)) {  
  $('.msg').hide()
  $('#del_mon').show();
} else if((CurrentDay == 4 || CurrentDay == 7) && (CurrentHrs >= 0 && CurrentHrs < 12)){   
  $('.msg').hide()
  $('#del_tom').show();
}else{
  $('.msg').hide()
  $('#no_del').show();  
}

＆＃13;

.msg {
  display: none;
}
.show{
  display: block;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="del_mon" class="msg">
  <h4>Order today for delivery on Monday.</h4>
</div>
<div id="del_fri" class="msg">
  <h4>Order today for delivery on Friday</h4>
</div>
<div id="del_tom" class="msg">
  <h4>Order by 12pm today for delivery tomorrow!</h4>
</div>
<div id="no_del" class="msg">
  <h4>You can not order now!</h4>
</div>

＆＃13;

Answer 5

检查此工作代码段。您可以动态更改内部html。

＆＃13;

 var date = new Date(); //get current date

 var day = date.getDay(); // getDay returns 0 to 6; 0 = sun, 1 = mon and so on.
 var hour= date.getHours(); // gethhours returns the hour (0-23)


//On Sunday 12 - 24, Monday, Tuesday, Wednesday
// Check day between 0 to 3 & time  between  (12-24 )

  
  if ( (day <= 3) && (hour >= 12) ) { 
       
   var result = "Order today for delivery on Friday";
    } 


//On Thursday 12 - 24, Friday, Saturday
else if ( (day >= 4) && (hour >= 12) ){
 
        var result = "Order today for delivery on Monday";
    }

//On Thursday 0 - 12, Sunday 0 - 12 (means between 24 hours and 12 hours)

else if ( (day == 4 || day == 0) && (hour == 0 || hour >= 12) ) { 
         
        var result = "Order by 12pm for delivery tomorrow";
   }
   
else{
         var result = "No details available";
}


//outut the result to div
  document.getElementById("order").innerHTML = result;

＆＃13;

#order{
  background:red;
  color:yellow;
  padding:10px;
  }

＆＃13;

<div id="order">
 </div>

＆＃13;

使用Javascript根据星期几和一天中的时间显示HTML元素

5 个答案: