javascript登录转注册界面(JavaScript实现登录窗体)
类别:编程学习 浏览量:2545
时间:2021-10-24 10:19:01 javascript登录转注册界面
JavaScript实现登录窗体本文实例为大家分享了JavaScript实现登录窗体的具体代码,供大家参考,具体内容如下
思路:就是把登陆窗放在界面之外,然后通过script内的函数改变到界面之内!
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>我的登录窗体</title> <style> .loginli{ /*设置登录框的外观*/ border: solid red 3px; border-radius: 10px; width: 350px; height: 250px; background-color: skyblue; /*设置登录框的位置*/ position: absolute; top: -300px; } button{ /*设置button的样式*/ border-radius: 3px; } #closeli{ /*设置关闭按钮位置*/ position: relative; top: -160px; left: 305px; } </style> </head> <body> <a href="javaScript:login()" >登录窗</a> <li class="loginli" id="loginli"> <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> <li id="closeli"><a href="javaScript:close()" >[关闭]</a></li> </li> <script> function login() { //获得登录对象 let loginliObj = document.getElementById("loginli"); loginliObj.style.top="100px"; //设置过渡属性,参一:transitionProperty:规定应用过渡效果的 CSS 属性的名称。 // 参二:transitionDuration:规定完成过渡效果需要多少秒或毫秒。 // 参三:transitionTimingFunction:规定过渡效果的速度曲线。 // 参四:transitionDelay:定义过渡效果何时开始。 loginliObj.style.transition="top 600ms linear 500ms"; } function close() { //获得登录对象 let loginliObj = document.getElementById("loginli"); loginliObj.style.top="-300px"; } </script> </body> </html>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持开心学习网。
您可能感兴趣
- js网站前端效果(JS如何让你的移动端交互体验更加优秀)
- nodejs部署上传文件(node.js使用express-fileupload中间件实现文件上传)
- pandasjson格式(对pandas处理json数据的方法详解)
- js实现图片旋转
- Extjs中FieldSet的收缩和展开
- 火狐查看json数据
- js怎么做一个计时器(JavaScript实现简单计时器)
- js浮点数运算精度问题(JS超出精度数字问题的解决方法)
- Js如何判断浏览器类型和版本
- vue实现图片上传数据库(vue.js根据图片url进行图片下载)
- js隐藏显示tr
- js弹出框代码(js实现自动锁屏功能)
- vuejs图片缩放裁切(vue+js点击箭头实现图片切换)
- node.js express 上线(node+express实现分页效果)
- js中什么是宏任务(浅谈JavaScript宏任务和微任务执行顺序)
- html5长图拖动(html5 拖拽及用 js 实现拖拽功能的示例代码)
- 于正又推女性古装大剧 杨蓉乔欣演女配,两位女主成 重头戏(于正又推女性古装大剧)
- 乔欣古装女主戏获热度 作为女主,却没吃到红利(乔欣古装女主戏获热度)
- 爱情是什么(爱情是什么最经典的话)
- 乔欣 古装剧中的高颜值(古装剧中的高颜值)
- 怎么才可以财富自由(如何让自己实现财富自由)
- 为什么越来越多年轻人回农村(为什么越来越多年轻人回农村生活)
热门推荐
- html5div例子(html5 外链式实现加减乘除的代码)
- ubuntu ssh登录服务器(ubuntu开启SSH服务远程登录操作的实现)
- ftp服务器映射到外网(外网远程电脑访问内网的FTP的实现方法)
- tomcat服务出现乱码(解决Tomcat10 Catalina log乱码问题)
- .NET垃圾回收机制是什么
- mysql首次登录不上怎么办(Mysql匿名登录无法创建数据库问题解决方案)
- sql server高可用的实现方式(sql server 编译与重编译详解)
- mysql用户删除了如何设置(MySQL两种删除用户语句的区别delete user和drop user)
- 网页嵌入百度UEditor富文本编辑器
- navicat for mysql连接测试失败(Navicat Premiun远程连接MySQL报错10038解决方案)