在if语句中使用getMonth（）的值

时间：2017-07-22 00:00:10

标签： javascript

我试图创建一个简单的日历，我想知道是否可以在if语句中使用getMonth（）函数的值来检查要隐藏的月份和要显示的月份。

使用Javascript：

var d = new Date();
var n = d.getMonth();

if n = 0 {
    document.getElementById("January").style.display = "block";
    document.getElementById("February").style.display = "none";
    document.getElementById("March").style.display = "none";
    document.getElementById("April").style.display = "none";
    document.getElementById("May").style.display = "none";
    document.getElementById("June").style.display = "none";
    document.getElementById("July").style.display = "none";
    document.getElementById("August").style.display = "none";
    document.getElementById("September").style.display = "none";
    document.getElementById("October").style.display = "none";
    document.getElementById("November").style.display = "none";
    document.getElementById("December").style.display = "none";
}
if n = 1 {
    document.getElementById("January").style.display = "none";
    document.getElementById("February").style.display = "block";
    document.getElementById("March").style.display = "none";
    document.getElementById("April").style.display = "none";
    document.getElementById("May").style.display = "none";
    document.getElementById("June").style.display = "none";
    document.getElementById("July").style.display = "none";
    document.getElementById("August").style.display = "none";
    document.getElementById("September").style.display = "none";
    document.getElementById("October").style.display = "none";
    document.getElementById("November").style.display = "none";
    document.getElementById("December").style.display = "none";
}
if n = 2 {
    document.getElementById("January").style.display = "none";
    document.getElementById("February").style.display = "none";
    document.getElementById("March").style.display = "block";
    document.getElementById("April").style.display = "none";
    document.getElementById("May").style.display = "none";
    document.getElementById("June").style.display = "none";
    document.getElementById("July").style.display = "none";
    document.getElementById("August").style.display = "none";
    document.getElementById("September").style.display = "none";
    document.getElementById("October").style.display = "none";
    document.getElementById("November").style.display = "none";
    document.getElementById("December").style.display = "none";
}
if n = 3 {
    document.getElementById("January").style.display = "none";
    document.getElementById("February").style.display = "none";
    document.getElementById("March").style.display = "none";
    document.getElementById("April").style.display = "block";
    document.getElementById("May").style.display = "none";
    document.getElementById("June").style.display = "none";
    document.getElementById("July").style.display = "none";
    document.getElementById("August").style.display = "none";
    document.getElementById("September").style.display = "none";
    document.getElementById("October").style.display = "none";
    document.getElementById("November").style.display = "none";
    document.getElementById("December").style.display = "none";
}
if n = 4 {
    document.getElementById("January").style.display = "none";
    document.getElementById("February").style.display = "none";
    document.getElementById("March").style.display = "none";
    document.getElementById("April").style.display = "none";
    document.getElementById("May").style.display = "block";
    document.getElementById("June").style.display = "none";
    document.getElementById("July").style.display = "none";
    document.getElementById("August").style.display = "none";
    document.getElementById("September").style.display = "none";
    document.getElementById("October").style.display = "none";
    document.getElementById("November").style.display = "none";
    document.getElementById("December").style.display = "none";
}
if n = 5 {
    document.getElementById("January").style.display = "none";
    document.getElementById("February").style.display = "none";
    document.getElementById("March").style.display = "none";
    document.getElementById("April").style.display = "none";
    document.getElementById("May").style.display = "none";
    document.getElementById("June").style.display = "block";
    document.getElementById("July").style.display = "none";
    document.getElementById("August").style.display = "none";
    document.getElementById("September").style.display = "none";
    document.getElementById("October").style.display = "none";
    document.getElementById("November").style.display = "none";
    document.getElementById("December").style.display = "none";
}
if n = 6 {
    document.getElementById("January").style.display = "none";
    document.getElementById("February").style.display = "none";
    document.getElementById("March").style.display = "none";
    document.getElementById("April").style.display = "none";
    document.getElementById("May").style.display = "none";
    document.getElementById("June").style.display = "none";
    document.getElementById("July").style.display = "block";
    document.getElementById("August").style.display = "none";
    document.getElementById("September").style.display = "none";
    document.getElementById("October").style.display = "none";
    document.getElementById("November").style.display = "none";
    document.getElementById("December").style.display = "none";
}
if n = 7 {
    document.getElementById("January").style.display = "none";
    document.getElementById("February").style.display = "none";
    document.getElementById("March").style.display = "none";
    document.getElementById("April").style.display = "none";
    document.getElementById("May").style.display = "none";
    document.getElementById("June").style.display = "none";
    document.getElementById("July").style.display = "none";
    document.getElementById("August").style.display = "block";
    document.getElementById("September").style.display = "none";
    document.getElementById("October").style.display = "none";
    document.getElementById("November").style.display = "none";
    document.getElementById("December").style.display = "none";
}
if n = 8 {
    document.getElementById("January").style.display = "none";
    document.getElementById("February").style.display = "none";
    document.getElementById("March").style.display = "none";
    document.getElementById("April").style.display = "none";
    document.getElementById("May").style.display = "none";
    document.getElementById("June").style.display = "none";
    document.getElementById("July").style.display = "none";
    document.getElementById("August").style.display = "none";
    document.getElementById("September").style.display = "block";
    document.getElementById("October").style.display = "none";
    document.getElementById("November").style.display = "none";
    document.getElementById("December").style.display = "none";
}
if n = 9 {
    document.getElementById("January").style.display = "none";
    document.getElementById("February").style.display = "none";
    document.getElementById("March").style.display = "none";
    document.getElementById("April").style.display = "none";
    document.getElementById("May").style.display = "none";
    document.getElementById("June").style.display = "none";
    document.getElementById("July").style.display = "none";
    document.getElementById("August").style.display = "none";
    document.getElementById("September").style.display = "none";
    document.getElementById("October").style.display = "block";
    document.getElementById("November").style.display = "none";
    document.getElementById("December").style.display = "none";
}
if n = 10 {
    document.getElementById("January").style.display = "none";
    document.getElementById("February").style.display = "none";
    document.getElementById("March").style.display = "none";
    document.getElementById("April").style.display = "none";
    document.getElementById("May").style.display = "none";
    document.getElementById("June").style.display = "none";
    document.getElementById("July").style.display = "none";
    document.getElementById("August").style.display = "none";
    document.getElementById("September").style.display = "none";
    document.getElementById("October").style.display = "none";
    document.getElementById("November").style.display = "block";
    document.getElementById("December").style.display = "none";
}
if n = 11 {
    document.getElementById("January").style.display = "none";
    document.getElementById("February").style.display = "none";
    document.getElementById("March").style.display = "none";
    document.getElementById("April").style.display = "none";
    document.getElementById("May").style.display = "none";
    document.getElementById("June").style.display = "none";
    document.getElementById("July").style.display = "none";
    document.getElementById("August").style.display = "none";
    document.getElementById("September").style.display = "none";
    document.getElementById("October").style.display = "none";
    document.getElementById("November").style.display = "none";
    document.getElementById("December").style.display = "block";
}

HTML：

<div class="container">
    <div id="January">January</div>
    <div id="February">February</div>
    <div id="March">March</div>
    <div id="April">April</div>
    <div id="May">May</div>
    <div id="June">June</div>
    <div id="July">July</div>
    <div id="August">August</div>
    <div id="September">September</div>
    <div id="October">October</div>
    <div id="November">November</div>
    <div id="December">December</div>
</div>

6 个答案:

答案 0 :(得分：2)

这似乎是显示当月的许多不必要的代码

var d = new Date();
var n = d.toLocaleString("en-us", { month: "long" });
document.querySelector('.container').innerHTML = '<div class="'+n+'">'+n+'</div>'
<div class="container"></div>

现在所有主流浏览器都支持

Date.toLocaleString()，并从任何有效日期对象返回您指定语言的月份名称​​（long全名）。

答案 1 :(得分：1)

您需要重写代码。我会给你一个小例子，因为我今天很好;）

var i = -1;
var d = new Date();
var months = ['January', 'Febuary', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']

while (months[++i]) { // basically means : while there is something in months. months[0] = "January", months[1] = "Febuary"..., months[11] = "December"
 if (d.getMonth() == i) //i = 0, 1, 2, 3..., 11. Used to detect current month
  document.getElementById(months[i]).style.display = "block"; // Display the month
 else
  document.getElementById(months[i]).style.display = "none"; // hide the month
}

瞧。没试过，但我很确定它有效。 这很简单，但是当你进行更重的操作时，你应该使用web workers，以便在你构建日历时不阻止你的用户界面（我想这就是什么你正在编码）。

PS：对不起那些贬低你的人。我会投票给你，因为我认为你的问题可以帮助初级开发人员。有时候，开发人员忘记了他们一开始就是新手。祝你学习顺利;）

编辑：这是一个片段。

＆＃13;
＆＃13; 
var i = -1;
var d = new Date();
var months = ['January', 'Febuary', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']

// Hide / Show the current month
while (months[++i]) { // basically means : while there is something in months. months[0] = "January", months[1] = "Febuary"..., months[11] = "December"
 if (d.getMonth() == i) //i = 0, 1, 2, 3..., 11. Used to detect current month
  document.getElementById(months[i]).style.display = "block"; // Display the month
 else
  document.getElementById(months[i]).style.display = "none"; // hide the month
}
＆＃13; 
.month {
  height:100px;
  width:100px;
  
  border:1px solid black;
  background-color:#F0F0F0;
  
  float:left;
  margin:10px;
  
  text-align:center;
  line-height:100px;
}
＆＃13; 
<div id="January" class="month">
  January
</div>
<div id="Febuary" class="month">
  Febuary
</div>
<div id="March" class="month">
  March
</div>
<div id="April" class="month">
  April
</div>
<div id="May" class="month">
  May
</div>
<div id="June" class="month">
  June
</div>
<div id="July" class="month">
  July
</div>
<div id="August" class="month">
  August
</div>
<div id="September" class="month">
  September
</div>
<div id="October" class="month">
  October
</div>
<div id="November" class="month">
  November
</div>
<div id="December" class="month">
  December
</div>
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：1)

根本不需要使用月份名称。月份可以是DOM顺序，其中包含＆＃34; calendarMonth＆＃34;默认情况下是隐藏的。然后，您可以只应用样式来显示所需的样式，并在需要隐藏时将其删除。

以下生成一些DOM元素，然后 showMonth 使用基于月份数的简单方法来计算要显示的月份。它与实际月份名称无关，使用主机的默认语言来设置月份名称。

如果 toLocaleString 的选项不受支持，您可能需要提供一组默认的月份名称。

＆＃13;
＆＃13; 
// Add funciton to show selected month
(function() {
  // Date to generate month names in host default language
  var d = new Date(2017,0,1);
  var monthNames = new Array(12).fill('');
  monthNames.forEach(function(x, i, arr) {
    d.setMonth(i);
    arr[i] = d.toLocaleString(undefined, {month:'long'});
  })
  var body = document.body;
  // Keep array of month divs
  var monthDivs = [];
 
  // Add a select to select a month. Mimics getMonth
  // Add divs for months
  var sel = body.appendChild(document.createElement('select'));
  monthNames.forEach(function(month, i){
    sel.appendChild(new Option(month, month));
    var div = body.appendChild(document.createElement('div'));
    div.className = 'calendarMonth';
    div.appendChild(document.createTextNode(month));
    if (i == 0) div.className += ' visible';
    monthDivs.push(div);
  });
 
  sel.addEventListener('change', showMonth, false);

  // Hide all shown months and show selected month
  function showMonth() {
    [].forEach.call(document.querySelectorAll('div.visible'), function (div) {
      div.classList.remove('visible');
    });
    // This could be date.getMonth() of some date object
    var monthNum = this.selectedIndex;
    if (monthNum > -1) {
      monthDivs[monthNum].classList.add('visible');
    };
  }
}());
＆＃13; 
.calendarMonth {
  border: 1px solid red;
  display: none;
  padding: 5px;
}

.visible {
  display: inline-block;
}
＆＃13;
＆＃13;
＆＃13;

答案 3 :(得分：0)

是的，有可能，您需要使用正确的语法if(...)并使用比较运算符===而不是赋值=，您可以大量缩短代码，如下所示：< / p> 

    document.getElementById("January").style.display = "none";
    document.getElementById("February").style.display = "none";
    document.getElementById("March").style.display = "none";
    document.getElementById("April").style.display = "none";
    document.getElementById("May").style.display = "none";
    document.getElementById("June").style.display = "none";
    document.getElementById("July").style.display = "none";
    document.getElementById("August").style.display = "none";
    document.getElementById("September").style.display = "none";
    document.getElementById("October").style.display = "none";
    document.getElementById("November").style.display = "none";
    document.getElementById("December").style.display = "none";


if (n === 0) {
    document.getElementById("January").style.display = "block";
}
if (n === 1) {
    document.getElementById("February").style.display = "block";
}
if (n === 2) {
    document.getElementById("March").style.display = "block";
}
if (n === 3) {
    document.getElementById("April").style.display = "block";
}
if (n === 4) {
    document.getElementById("May").style.display = "block";
}
if (n === 5) {
    document.getElementById("June").style.display = "block";
}
if (n === 6) {
    document.getElementById("July").style.display = "block";
}
if (n === 7) {
    document.getElementById("August").style.display = "block";
}
if (n === 8) {
    document.getElementById("September").style.display = "block";
}
if (n === 9) {
    document.getElementById("October").style.display = "block";
}
if (n === 10) {
    document.getElementById("November").style.display = "block";
}
if (n === 11) {
    document.getElementById("December").style.display = "block";
}

答案 4 :(得分：0)

使用switch-case代替if-else更好 在您的代码中，开始检查所有if以查看条件是否匹配。

使用switch-case更多的效率代码。

switch( n ){
   case 0:
   ... 
   break;
case 1:
   ... 
   break;
}

答案 5 :(得分：-1)

我相信这将是一个更优雅的解决方案，同时仍然使用vanilla Javascript：

<html>
<head>
</head>
<body>
  <div class="container" id="month-container">
  </div>
</body>
<script type="text/javascript">
  var months = new Object();
  months[0] = "January";
  months[1] = "February";
  months[2] = "March";
  months[3] = "April";
  months[4] = "May";
  months[5] = "June";
  months[6] = "July";
  months[7] = "August";
  months[8] = "September";
  months[9] = "October";
  months[10] = "November";
  months[11] = "December";

  var d = new Date();
  var n = d.getMonth();

  container = document.getElementById("month-container");
  container.innerHTML = months[n];
</script>
</html>
相关问题
最新问题