溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要為大家展示了“JavaScript如何實現登錄窗體”，內容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領大家一起研究并學習一下“JavaScript如何實現登錄窗體”這篇文章吧。
具體內容如下
思路：就是把登陸窗放在界面之外，然后通過script內的函數改變到界面之內！
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>我的登錄窗體</title>
<style>
.loginDiv{
/*設置登錄框的外觀*/
border: solid red 3px;
border-radius: 10px;
width: 350px;
height: 250px;
background-color: skyblue;
/*設置登錄框的位置*/
position: absolute;
top: -300px;
}
button{
/*設置button的樣式*/
border-radius: 3px;
}
#closeDiv{
/*設置關閉按鈕位置*/
position: relative;
top: -160px;
left: 305px;
}
</style>
</head>
<body>
<a href="javaScript:login()" >登錄窗</a>
<div class="loginDiv" id="loginDiv">
<h3 align="center">登錄窗口</h3>
<table align="center">
<tr>
<th>用戶名:</th>
<th><input type="text"></th>
</tr>
<tr>
<th>密碼:</th>
<th><input type="password"></th>
</tr>
<tr>
<th colspan="2">
<button>登錄</button> 
<button type="reset">重置</button>
</th>
</tr>
</table>
<div id="closeDiv"><a href="javaScript:close()" >[關閉]</a></div>
</div>
<script>
function login() {
//獲得登錄對象
let loginDivObj = document.getElementById("loginDiv");
loginDivObj.style.top="100px";
//設置過渡屬性，參一：transitionProperty：規定應用過渡效果的 CSS 屬性的名稱。
// 參二：transitionDuration：規定完成過渡效果需要多少秒或毫秒。
// 參三：transitionTimingFunction：規定過渡效果的速度曲線。
// 參四：transitionDelay：定義過渡效果何時開始。
loginDivObj.style.transition="top 600ms linear 500ms";
}
function close() {
//獲得登錄對象
let loginDivObj = document.getElementById("loginDiv");
loginDivObj.style.top="-300px";
}
</script>
</body>
</html>以上是“JavaScript如何實現登錄窗體”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
