Hide/Disable HTML 中的文本 Javascript 日期 Object

Question

我试图在一年中的大部分时间里在我的网站上隐藏一个 header，并让它根据特定日期一次重新出现四个星期。

我有一些关于如何执行此操作的建议，但由于我是 Web 编程的真正初学者，所以一无所获。

我还想用 jsfiddle.net

之类的方式测试代码

非常感谢您的帮助。

例如：

节日特价
[如果今天是4月1日到4月29日显示文字]
[如果今天是 4 月 30 日隐藏文本]

Answer 1

javascript 日期格式可能令人不快。您通常必须使用多种方法才能将日期转换为可用格式。

使用另一个问题的 this 答案，我创建了以下 jsfiddle

https://jsfiddle.net/pkbnok8o/

$(document).ready(function() {
  dateMethod();
});

function dateMethod() {
  var today = new Date();
  var dd = today.getDate();
  var mm = today.getMonth() + 1; //January is 0!
  var yyyy = today.getFullYear(); //You won't need this for this question, but I kept it in for knowledge.

  if (dd < 10) { //Won't need this logic either.
    dd = '0' + dd
  }

  if (mm < 10) { //Also will not need this logic
    mm = '0' + mm
  }
  
  if (mm == 4 && dd >= 1 && dd <= 29){ //This will show the text any year between 4/1 and 4/29 (including both of those days)
   $("#txt").show(); //This uses jQuery
  } else{ //Otherwise, the text will be hidden
   $("#txt").hide(); //This is also jQuery
  }

  today = mm + '/' + dd + '/' + yyyy; //Probably don't need/want this
  $("#currentDate").text(today); //or this.
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Today is:
<label id="currentDate"></label>
<br />
<label id="txt">Test Text</label>

W3Schools 有一些关于 javascript 时间和日期的不同 get 方法的非常好的信息。向下滚动 link 到日期对象方法。

Answer 2

您可以使用 jQuery 效果 hide/show 信息

<!DOCTYPE html> 
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js">    </script>
<script>
$(document).ready(function(){
$("#hide").click(function(){
    $("p").hide();
});
$("#show").click(function(){
    $("p").show();
});
});
</script>
</head>
<body>

<p>If you click on the "Hide" button, I will disappear.</p>

<button id="hide">Hide</button> 
<button id="show">Show</button>

</body>
</html>

来源：http://www.w3schools.com/jquery/jquery_hide_show.asp

Answer 3

HTML

<div id='april_holiday_specials'>
  <h2>April Specials<h2>
</div>
<div id='other_specials'>
  <h2>Other Specials<h2>
</div>

JS

$(function() {
  var today = new Date();

if (today.getMonth() == 3 && today.getDate() > 0 && today.getDate() < 30) {

  $("#april_holiday_specials").show();
  $("#other_specials").hide();

} else {

  $("#april_holiday_specials").hide();
  $("#other_specials").show();
}
});

有关 js 日期的更多信息，请参阅 w3c 日期：http://www.w3schools.com/jsref/jsref_obj_date.asp

JSFiddle：https://jsfiddle.net/Lcb4tyxm/4/

Answer 4

可以默认隐藏元素并使用并在每次加载页面时使用脚本检查日期。

当当前日期在给定月份内时显示该元素。

// @param selector <String>
function showElement(selector) {
  document.querySelector(selector).style.display = "block"
}

/** 
  @param startDate <Integer> 
  @param startMonth <Integer>
**/
function isInFourWeekPeriod(startDate, startMonth) {
  var d = new Date()
  var currentDate = d.getDate()
  var currentMonth = d.getMonth() + 1

  if (currentMonth !== startMonth || currentMonth !== startMonth + 1)
    return false

  if ((currentDate < startDate) && (currentMonth === startMonth))
    return false

  if ((currentDate > startDate) && (currentMonth === startMonth + 1))
    return false

  return true
}

if (isInFourWeekPeriod())
  showElement("#my-banner-text")

// HTML file
<style>
  #my-banner-text {
    display: none;
  }  
</style>
<header>
  <div id="my-banner-text">
    my text
  </div>
</header>

Answer 5

请注意，客户端系统时钟可以设置为任何时间和时区，因此如果您关心欺诈或安全问题，则一定不要依赖客户端系统来做任何重要的事情。

否则，您可以直接比较 Date 对象，因此要查看日期是在特定日期之前、当日还是之后，请使用日期对象，例如

// Create Dates for specific local dates
var startDate = new Date(2016,3,1);
var endDate   = new Date(2016,3,30);

// Create a Date for the current local time
var now       = new Date();

// Do some comparisons
if (now > startDate) {
  show(now + ' is after ' + startDate);
}
if (now < endDate) {
  show(now + ' is before ' + endDate);
}
show('Today is ' + (now.setHours(0,0,0,0) == endDate? '' : 'not ') + 'the last day');
       

  
function show(s) {
  document.write('<br>' + s);
}

因此您可以发送开始日期和结束日期的参数，然后使用客户端系统生成当前时间的日期（注意上面的警告，这是不可靠).然后使用小于、大于和等于运算符比较日期。

Hide/Disable HTML 中的文本 Javascript 日期 Object

Hide/Disable Text in HTML with Javascript Date Object

html

javascript

jquery

date

show-hide