您好,登录后才能下订单哦!
密码登录
登录注册
点击 登录注册 即表示同意《亿速云用户服务条款》
这篇文章主要为大家展示了“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进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。