JavaScript實(shí)現(xiàn)登錄窗體
本文實(shí)例為大家分享了JavaScript實(shí)現(xiàn)登錄窗體的具體代碼，供大家參考，具體內(nèi)容如下
思路：就是把登陸窗放在界面之外，然后通過(guò)script內(nèi)的函數(shù)改變到界面之內(nèi)！
<!DOCTYPE html><html lang='en'><head> <meta charset='UTF-8'> <title>我的登錄窗體</title> <style>.loginDiv{ /*設(shè)置登錄框的外觀*/ border: solid red 3px; border-radius: 10px; width: 350px; height: 250px; background-color: skyblue; /*設(shè)置登錄框的位置*/ position: absolute; top: -300px;}button{ /*設(shè)置button的樣式*/ border-radius: 3px;}#closeDiv{ /*設(shè)置關(guān)閉按鈕位置*/ position: relative; top: -160px; left: 305px;} </style></head><body><a href='javaScript:login()' >登錄窗</a><div 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()' >[關(guān)閉]</a></div></div><script> function login() {//獲得登錄對(duì)象let loginDivObj = document.getElementById('loginDiv');loginDivObj.style.top='100px';//設(shè)置過(guò)渡屬性，參一：transitionProperty：規(guī)定應(yīng)用過(guò)渡效果的 CSS 屬性的名稱。// 參二：transitionDuration：規(guī)定完成過(guò)渡效果需要多少秒或毫秒。// 參三：transitionTimingFunction：規(guī)定過(guò)渡效果的速度曲線。// 參四：transitionDelay：定義過(guò)渡效果何時(shí)開(kāi)始。loginDivObj.style.transition='top 600ms linear 500ms'; } function close() {//獲得登錄對(duì)象let loginDivObj = document.getElementById('loginDiv');loginDivObj.style.top='-300px'; }</script></body></html>
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持好吧啦網(wǎng)。
相關(guān)文章：
1. 詳解JSP 內(nèi)置對(duì)象request常見(jiàn)用法2. ASP.NET MVC實(shí)現(xiàn)下拉框多選3. ASP.NET MVC增加一條記錄同時(shí)添加N條集合屬性所對(duì)應(yīng)的個(gè)體4. .NET Framework各版本(.NET2.0 3.0 3.5 4.0)區(qū)別5. 解決request.getParameter取值后的if判斷為NULL的問(wèn)題6. JSP中param動(dòng)作的實(shí)例詳解7. ASP.NET MVC實(shí)現(xiàn)本地化和全球化8. .Net反向代理組件Yarp用法詳解9. JS中的常見(jiàn)數(shù)組遍歷案例詳解(forEach, map, filter, sort, reduce, every)10. .NET中的MassTransit分布式應(yīng)用框架詳解
網(wǎng)公網(wǎng)安備