尝试使用JS函数移动按钮

对于学校项目,当用户单击初始登录按钮时,它会被删除并显示一个新的按钮,然后下降100像素向下2秒钟。我敢肯定,这样做可能会更有效率,但目前还不太确定,我们将不胜感激。

function hideForm() {
  document.getElementById("loginForm").style.display = "none";
  document.getElementById("LoginButtonS").style.display = "none";
}


function moveLogin() {
  document.getElementById("login").style.display = "none";
  document.getElementById("register").style.display = "none"; /* Hides original Register as login ioption selected*/


  document.getElementById("LoginButtonS").style.display = "block"; /*Gets button that can actually complete an action sequence as the other will not work. */
  document.getElementById("LoginButtonS").translateY = (-100);
  document.getElementById("LoginButtonS").style.transitionDuration = "2s";

  //document.getElementById("loginForm").style.display = "block"; /*Shows the form after Login button has moved down*/


}
<html>

<title>Database Website Name</title>


<head>
  <link rel="stylesheet" type="text/css" href="stylesheet.css">
  <script type="text/javascript" src="jsscripts.js"></script>
</head>

<body onLoad="hideForm()">
  <div class="window">
    <!-- window is imaginary box around the two buttons -->

    <p class="windowtext">
      <!-- the first buttons -->
      <button id="login" onclick="moveLogin()" class="buttonl">Login</button><br>
      <button id="register" onclick="moveRegister(register)" class="buttonr">Register</button>
    </p>



    <form id="loginForm" class="loginForm">
      <!-- Text boxes and submit buttons -->

      <div class="windowtext">

        <input class="textbox" type="text" name="ID" placeholder="User ID"><br><br>
        <input class="textbox" type="text" name="Password" placeholder="Password">

        <button class="buttonl" id="LoginButtonS" type="submit">Login <!-- new login button -->
				</div>
			</form>
		</div>
	</body>
</html>

如果这是一个愚蠢的错误,我表示歉意

评论