JavaScript实现登录窗体
作者：妄痴梦中 时间：2024-11-19 17:43:29
本文实例为大家分享了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>
来源：https://blog.csdn.net/an_gentle_killer/article/details/117967700
标签：js,登录,窗体
0
投稿猜你喜欢
简述Python中的面向对象编程的概念
2021-11-08 07:53:11
python Dataframe 合并与去重详情
2022-08-17 02:18:54
最简便的备份MySQL数据库的方法
2008-12-25 13:16:00
pycharm配置pyqt5-tools开发环境的方法步骤
2022-01-05 08:31:00
ThinkPHP框架下微信支付功能总结踩坑笔记
2024-05-02 17:13:41
jquery ajax 局部刷新小案例
2024-05-02 17:05:01
php 生成随机验证码图片代码
2024-05-02 17:33:19
Angularjs实现搜索关键字高亮显示效果
2024-08-29 10:24:52
Python 实现文件读写、坐标寻址、查找替换功能
2021-06-02 07:36:42
Python中方法的缺省参数问题解读
2022-10-07 17:00:45
pycharm激活方法到2099年(激活流程)
2022-11-17 05:45:35
如何使用Iframe实现本页提交？
2010-06-05 12:36:00
用Dreamweaver MX制作文字特效
2011-06-14 09:49:47
pandas中DataFrame重置索引的几种方法
2023-06-10 00:26:45
python实现在cmd窗口显示彩色文字
2023-03-23 22:49:01
kafka监控获取指定topic的消息总量示例
2023-09-04 01:44:48
Go外部依赖包从vendor,$GOPATH和$GOPATH/pkg/mod查找顺序
2024-04-28 10:49:59
Golang汇编之控制流深入分析讲解
2024-05-08 10:15:11
python中快速进行多个字符替换的方法小结
2021-08-19 05:59:34
MySQL使用表锁和行锁的场景详解
2024-01-24 05:59:39
