<%@ page
 contentType="text/html;charset=GBK"
 errorPage="error.jsp"
 %>
 <%request.setCharacterEncoding("GBK"); %>
<html>
  <head>
<title></title>
<style type="text/css">
  .STYLE4 {
font-size: 13px;
font-family: "宋体";
color: #244ac6;
line-height: 16pt;
}
</style>
<script language="JavaScript">
function login() {
var login=document.getElementById("login");
login.style.display=(login.style.display=="none")? "block":"none";
var log=document.getElementById("log");
log.style.display=(log.style.display=="none")? "block":"none";
}
</script>
  </head>
  <body>
<form action="AlbumServlet" method="post" name="myform" id="myform">
<center><br><br><br><br>
<table>
<tr>
<td>
<div id="log" class="STYLE4" style="display:block">点击图片登陆您的相册.....
<br></div>
<img src="image/ge.jpg" onclick="JavaScript:login();"><br>
<div id="login" class="STYLE4" style="display:none">
<table>
<tr>
<td><font color="#30358D"><b>用户名:&nbsp;</td></b><td>
<input type="text"  name="username" id="username" style="width:120">
<br></font></td></tr>
<tr>
<td><font color="#30358D"><b>密&nbsp; 码:&nbsp;</td></b><td>
<input type="password"  name="password" id="password" style="width:120">
<br></font></td></tr>
<tr height="10"><td></td></tr>
<tr>
            <td>登录方式:</td>
            <td align="center">
              <input type="radio" size="25" name="gender" value="general" checked class="inputtext">普通用户
              &nbsp;
              <input type="radio" size="25" name="gender"  value="special" class="inputtext">管理员
            </td>
          </tr>
 <tr>
<td>
<input type="submit" value="登陆">
<input type="hidden" name="action" value="userLogin">
</td>
<td>
<input type="reset" value="重置">&nbsp;&nbsp;&nbsp;
<a href="AlbumServlet?action=userRegistry">注册</a>
</td>



</tr>

</table>
</div></td></tr></table></center></form>
</body>
</html>
给为什么一开始只有“点击图片登陆您的相册.....”和照片, 点击后出现“用户名” 和 “密码” 
我知道效果,但我更想知道的是 这个js 函数他到底是怎么工作的,参数怎么传,为什么一开始“用户名” “密码” 这些不解析出来,最好说明一步一步的js解释流程

解决方案 »

  1.   


    <div id="login" class="STYLE4" style="display:none">
    //看看这句,这个div包含了你刚开始看不到后来出现的那些标签,DIV样式display:none,表示不现实出来,你可以看看页面源代码还是存在的,只是不展示出来。   function login() {//点击图片调用这个js函数
                var login=document.getElementById("login");//找到上面说的那个div,
                login.style.display=(login.style.display=="none")? "block":"none";如过样式是none就设为block,就是显示了,否则反过来
                var log=document.getElementById("log");//这个是控制那个包含图片的div的,
                log.style.display=(log.style.display=="none")? "block":"none";//效果同上
            }
      

  2.   

    哦,错了,var log=document.getElementById("log");//这个是 <div id="log" class="STYLE4" style="display:block">点击图片登陆您的相册.....<br></div>,不是图片,刚没看清楚,
    效果就是你点一下出来,再点一下隐藏,循环
      

  3.   

    login.style.display=(login.style.display=="none")? "block":"none";这是JS三元运算
    如果login.style.display==none
    那么就赋值BLOCK
    反之login.style.display==block<div id="login" class="STYLE4" style="display:none">一开始的时候STYLE=display:none
    所以这一块不会出现