Question

<html>
<head>
<script type="text/javascript">

function nameofmonth(month)
 {  
 var monthname=new  Array("January","February","March","April","May","June","July","August","September","October","November","December")
  return monthname[month]
}  
 function monthdays(month,year)
 {
  var daysofmonth=new Array(31,28,31,30,31,30,31,31,30,31,30,31)
  if(year%4==0)
  daysofmonth[1]=29  
  return daysofmonth[month]   
  }
 function close(){

 document.getElementById("container").style.display='none'
 }

 function table()
  {
   var now=new Date()
   var hour=now.getHours()
   var minute=now.getMinutes()
   var second=now.getSeconds()
   var date=now.getDate()
   var month=now.getMonth() 
   var year=now.getFullYear()
   now.setFullYear(year,month,1)
   var firstday=now.getDay()
   var monthname=nameofmonth(month)
   var daysofmonth=monthdays(month,year)
    if(firstday>0)
      var k=-(firstday-1)
    else
      k=1
   var table="<table border=5 cellspacing=3cellpadding=8>"
   table +="<tr><th colspan=7>"+monthname + date+"th</th> <td  style='cursor:pointer' onclick='close()'>[close]</td></tr>"
   table +="<tr><th>sun</th><th>mon</th><th>tue</><th>wed</th><th>thu</th><th>fri</><th>sat</th></tr>"
   for(var i=0;i<5;i++)
    {
     table+="<tr>"
     for(var j=0;j<7;j++)
      {
        if(k<=daysofmonth && k>0)
          { if(k==date)
             table+='<td id="clock" bgcolor="aqua">'+k+'</td>'
          else
           table+='<td style="cursor:pointer">'+k+'</td>'
           k=parseInt(k)

         }
      else
         table+="<td></td>"
         k++
       }
  table+="</tr>"
  document.getElementById("calender").innerHTML=table  
}
}


</script>
</head>
<body>
<input type="text" onclick="table()"/>
<table id="container"><tr><td id="calender"></td></tr></table>

</body>
</html>

这是我在点击文本框后出现的日历代码。这是表格中的一个紧密单元格。当单击关闭时，将调用close（）函数并且日历将消失。但这不会发生。为什么？请帮帮我......提前谢谢..

Answer 1

使用JavaScript切换元素的七种方法有一些无限制的方法可以用JavaScript切换元素的显示。一些，比其他更有用。追溯到九十年代后期，切换可能是JavaScript开发中书中最古老的技巧。然而，直到今天，它仍然证明它本身很有用，因为隐藏/显示元素可以改善用户交互（当做得很有品味时）。无论如何，这是实现这一目标的七种方法。

底线

首先，这可能是最简单，最短的切换方式。

盯着短暂的方式

// showing
document.getElementById('element').style.display = '';
// hiding

document.getElementById（'element'）。style.display ='none'; 所以让我们把它变成一个能够快速完成工作的功能：

显示？还是隐藏？

function toggle(obj) {
    var el = document.getElementById(obj);
    if ( el.style.display != 'none' ) {
        el.style.display = 'none';
    }
    else {
        el.style.display = '';
    }
}

那很容易。但我们也可以采用三元风格。

TOGGLING TERNARY STYLE

function toggle(obj) {
    var el = document.getElementById(obj);
    el.style.display = (el.style.display != 'none' ? 'none' : '' );
}

冷却。嘿，有没有听说过美元功能？如果那个人坐在某个地方，让我们使用它！

与TERNARY DOLLAR共舞

// our dollar function
function $() {
    var elements = new Array();
    for (var i = 0; i < arguments.length; i++) {
        var element = arguments[i];
        if (typeof element == 'string')
            element = document.getElementById(element);
        if (arguments.length == 1)
            return element;
        elements.push(element);
    }
    return elements;
}

//现在我们改进了切换器！

function toggle(obj) {
    var el = $(obj);
    el.style.display = (el.style.display != 'none' ? 'none' : '' );
}

冷却。现在我们已经把这件东西变得美观和紧凑......我们不能做任何其他事情让它变得很酷吗？当然，为什么呢。让我们说，不要把它限制在一个对象，而是说“无限制。”

TOGGLING多个对象

function toggle() {
    for ( var i=0; i < arguments.length; i++ ) {
        $(arguments[i]).style.display = ($(arguments[i]).style.display != 'none' ? 'none' : '' );
    }
}

甜。现在看起来很漂亮和性感（非常个人，我认为这是sexi'est'）。但是让我们看看我们是否可以使用对象文字将这些中的任何一个提取为“显示”与“隐藏”。

分离显示和隐藏

var toggle = {
    show : function(obj) {
        document.getElementById(obj).style.display = '';
    },
    hide : function(obj) {
        document.getElementById(obj).style.display = 'none';
    }
};

好吧好吧，我可以挖掘它。但是使用我们的美元伙伴怎么了？当然，我们可以在混合中重新获得它。

分离显示和隐藏

var toggle = {
    show : function(obj) {
        $(obj).style.display = '';
    },
    hide : function(obj) {
        $(obj).style.display = 'none';
    }
};

好的，为什么不给它灵活性传递尽可能多的参数呢？好的，没问题。

分离显示和隐藏

var toggle = {
    show : function() {
        for ( i=0; i < arguments.length; i++ ) {
            $(arguments[i]).style.display = '';
        }
    },
    hide : function() {
        for ( i=0; i < arguments.length; i++ ) {
            $(arguments[i]).style.display = 'none';
        }
    }
};

冷却。这几乎涵盖了它。您可以查看多个切换器功能

Answer 2

这与分号无关。这些大多是可选的，在这个例子中不需要。函数close()是保留的，onclick无法调用。只需将close()重命名为closeCalendar()，就可以正常使用。

Answer 3

close是javascript Keyword您应该使用close以外的其他字词作为您的函数名称以获取更多信息，请查看JavaScript Reserved Words

Answer 4

以下是DEMO如何更优雅地工作

<input type="text" id="cal" onclick="table(this)"/>
<div id="container">
    <div id="calender"></div>
</div>

function nameofmonth(month)  {  
  return ["January","February","March","April","May","June","July","August","September","October","November","December"][month];
}  

function closeIt(){
  document.getElementById("container").style.display='none';
}

function table(cal) {
   var now=new Date(),
      hour=now.getHours(),
      minute=now.getMinutes(),
      second=now.getSeconds(),
      date=now.getDate(),
      month=now.getMonth(),
      year=now.getFullYear();
   now.setFullYear(year,month,1);
   var firstday=now.getDay(),
       monthname=nameofmonth(month);
   now.setFullYear(year,now.getMonth()+1,0); // last of this month
   var daysofmonth=now.getDate();
   var k=(firstday>0)?-(firstday-1):1;
   var table="<table border=5 cellspacing=3 cellpadding=8>"
   table +="<tr><th colspan=7>"+monthname + date+"th</th> <td  style='cursor:pointer' onclick='closeIt()'>[close]</td></tr>"
   table +="<tr><th>sun</th><th>mon</th><th>tue</><th>wed</th><th>thu</th><th>fri</><th>sat</th></tr>";
   for(var i=0;i<5;i++) {
     table+="<tr>";
     for (var j=0;j<7;j++) {
       if (k<=daysofmonth && k>0) {
         if (k==date) table+='<td id="clock" bgcolor="aqua">'+k+'</td>';
         else table+='<td style="cursor:pointer" onclick="document.getElementById(\''+cal.id+'\').value=\''+(month+1)+'/'+k+'/'+year+'\'">'+k+'</td>';
       }
       else table+="<td></td>";
       k++
     }
     table+="</tr>";
    }     
    document.getElementById("calender").innerHTML=table+"</table>";  

}

element.style.display ='none'不起作用

4 个答案: