JavaScript實現登錄窗體
更新時間：2021年06月22日 09:52:21 作者：妄癡夢中
這篇文章主要為大家詳細介紹了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">
<h2 align="center">登錄窗口</h2>
<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：規(guī)定應用過渡效果的 CSS 屬性的名稱。
// 參二：transitionDuration：規(guī)定完成過渡效果需要多少秒或毫秒。
// 參三：transitionTimingFunction：規(guī)定過渡效果的速度曲線。
// 參四：transitionDelay：定義過渡效果何時開始。
loginDivObj.style.transition="top 600ms linear 500ms";
}
function close() {
//獲得登錄對象
let loginDivObj = document.getElementById("loginDiv");
loginDivObj.style.top="-300px";
}
</script>
</body>
</html>
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
相關文章
這篇文章主要介紹了JS中使用gulp實現壓縮文件及瀏覽器熱加載功能,需要的朋友可以參考下2017-07-07
這篇文章主要介紹了探究JavaScript原型數據共享與方法共享實現,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2021-05-05
遮罩層實現浮層DIV登錄的效果，想必很多的朋友都有遇到過吧，實現起來也是很簡單的，下面有個不錯的實現，大家可以感受下2014-02-02
JavaScript中while循環(huán)的基礎使用教程
這篇文章主要給大家介紹了關于JavaScript中while循環(huán)的基礎使用教程，文中通過示例代碼介紹的非常詳細，對大家學習或者使用JavaScript具有一定的參考學習價值，需要的朋友們下面來一起學習學習吧2020-08-08
這篇文章介紹了js猜數字小游戲的簡單實現代碼，很好玩的游戲哦，可以看看你的智商 是否驚人額2013-07-07
注冊網站的輸入框就有默認提示值，當獲取鼠標焦點的時候，默認值被刪除，當用戶沒輸入東西焦點離開的時候，又恢復默認提示值2014-03-03
本文主要對實現一個簡單的js加載器的步驟進行介紹--主要可以分為解析路徑、下載模塊、解析模塊依賴、解析模塊四個步驟。需要的朋友來看下吧2016-12-12
這篇文章主要介紹了JavaScript獲取URL參數的方法分享，主要包括字符串?split?方法、?URLSearchParams?方法、正則匹配方法等，具有一定的參考價值需要的小伙伴可以參考一下2022-04-04
Javascript aop(面向切面編程)之around(環(huán)繞)分析
這篇文章主要介紹了Javascript aop(面向切面編程)之around(環(huán)繞) ,需要的朋友可以參考下2015-05-05
本文介紹一個簡單可行的辦法，來做基于gulp構建的中小型項目中的seajs合并壓縮，感興趣的朋友一起看看詳情吧2016-06-06