JavaScript怎样实现一个简易的登录窗体？
发布时间：2022-02-22 13:11:18 所属栏目：语言 来源：互联网
导读：今天给大家分享的是JavaScript怎样实现一个简易的登录窗体的内容，小编觉得挺实用的，因此分享给大家做个参考，实现效果及代码如下，接下来跟随小编一起看看吧。 思路：就是把登陆窗放在界面之外，然后通过script内的函数改变到界面之内！ !DOCTYPE html htm
|
今天给大家分享的是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：规定应用过渡效果的 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> 以上就是JS实现简单的登录窗体的代码，有需要的朋友可以参考学习，希望对大家学习JavaScript有帮助，想要了解更多大家可以继续浏览群英网络其他相关的文章。 （编辑：张家口站长网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
