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

【问题标题】：Using Javascript to Show HTML elements based on Days of the week, and Time of the day使用 Javascript 根据星期几和一天中的时间显示 HTML 元素
【发布时间】：2016-05-23 03:55:44
【问题描述】：

我已经搜索了一段时间，并尝试了许多脚本以使以下规则在我的网站上起作用：

周日 12 - 24 日，周一，周二，周三显示：

“今天下单，周五发货”

周四 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 时间范围，但我不知道如何添加它。

任何帮助/指导将不胜感激:)

【问题讨论】：

.toggle() 将显示/隐藏匹配的元素。我想你不需要那个..getDay() 将返回值 从 0 到 6
谢谢 Rayon，你会推荐使用 .show() 代替吗？
我建议在这里使用一个 div，因为您很可能希望结构在所有情况下都完全相同。您可以使用$('.order-eta').html(myText); 进行更改。

标签： javascript jquery html

【解决方案1】：

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

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

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

【讨论】：

感谢@nitha，您的解决方案在这里效果很好，但我只是想在我的网站上实现它，但还没有运气——我会继续尝试，因为我可能在某个地方犯了一个简单的错误。
嗨@Nitha，我尝试实施此解决方案，但没有尝试过。我有一个我认为应该可行的实现的屏幕截图。你能提供什么建议吗？ i64.tinypic.com/2hztop2.png
在$( document ).ready(function() { // 在此处添加脚本}) 中添加脚本

【解决方案2】：

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

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

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

您可以添加任何需要覆盖的案例#del_tom

【讨论】：

【解决方案3】：

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>

【讨论】：

感谢@rayon，这对于显示正确日期的消息非常有效:) 我将为Now.getHours() 添加一个新变量，并在星期四 (3) 和星期日 ( 6) 天。
乐于助人！请accept and up-vote解决目的的最佳解决方案:) 编码愉快！

【解决方案4】：

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

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

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

【讨论】：

感谢您的意见@Mohammed - 感谢您的宝贵时间

【解决方案5】：

检查这个工作的sn-p。您可以动态更改内部 html。

 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;

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

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

【讨论】：