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弹出新窗口被拦截的解决方法
- vue切换图片效果(Vue.js实现图片切换功能)
- ExtJs常用代码片段
- mysql的json格式解析(mysql json格式数据查询操作)
- js原生tab栏切换(JavaScript实现简易tab栏切换案例)
- thinkphp返回json(thinkphp5框架实现数据库读取的数据转换成json格式示例)
- 常用JS验证函数
- js event对象
- js 图片编辑处理库(javascript input图片上传及预览,FileReader预览图片)
- vuejs filter过滤器的使用(Vue过滤器filter实现及应用场景详解)
- python pdf文件操作(Python常见读写文件操作实例总结文本、json、csv、pdf等)
- js setTimeout
- 用javascript解析json(JavaScript JSON.stringify的使用总结)
- javascript中还原append代码(JS实现jQuery的append功能)
- js判断是否为手机访问
- js浮点数运算精度问题(JS超出精度数字问题的解决方法)
- 今天要穿什么颜色(今天要穿什么颜色的衣服最吉利)
- 一道高中题-求杯子的高度(一道高中题-求杯子的高度)
- 网坛停摆三巨头亏损惨重,费德勒跌幅88 纳达少赚2400万(网坛停摆三巨头亏损惨重)
- Beyond 版本《无人深空》主线任务攻略 阿特拉斯之道(版本无人深空主线任务攻略)
- 全球科技界最有钱大佬TOP 15 你知道几位(全球科技界最有钱大佬TOP)
- 2主力后腰缺阵 泰山队奇兵有望获重用,赛季0出场,迎来中超首秀(泰山队奇兵有望获重用)
热门推荐
- 宝塔linux面板安装(宝塔Linux控制面板专业版破解步骤亲测可用)
- sql表更新关联语句(SQL update 多表关联更新的实现代码)
- html和js代码结合(JS、CSS和HTML实现注册页面)
- mysql事务特性和隔离级别(Mysql事务特性和级别原理解析)
- vue怎么更换自定义水印(Vue之全局水印的实现示例)
- mysql查看死锁记录(mysql查看死锁与去除死锁示例详解)
- scrapy框架爬取小说的正文内容(Scrapy框架爬取Boss直聘网Python职位信息的源码)
- dedecms编写模板(dedecms模板怎么修改)
- easyui中使用编辑器在IE下有时无法获取焦点
- mysql顺序排序(Mysql 中文排序规则说明)