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

Using Javascript to Show HTML elements based on Days of the week, and Time of the day

本文关键字：时间 显示 元素 HTML 一天 Javascript 使用      更新时间：2023-09-26

我一直在寻找一段时间，并尝试了许多脚本以使以下规则在我的网站上工作：

在周日 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 个时间范围，但我无法弄清楚如何添加它。

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

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>

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

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

您可以添加需要涵盖的任何情况#del_tom

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

使用.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>

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>

检查此工作片段。您可以动态更改内部 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>

相关文章：