JavaScript实现登录窗体
作者：妄痴梦中 发布时间：2024-11-19 17:43:29
标签：js,登录,窗体
本文实例为大家分享了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
0
投稿猜你喜欢
一、前言最近新买了一台 LG Gram，电脑空荡荡的，啥都得重头装，记录一下 Git 的安装过程，温习温习。二、Git 的安装2.1 Git- 1 数据库连接a.数据库的连接（ACCESS和SQL）在APS脚本中可以通过3中方式访问数据库： ∈IDC （Inte
- 调用jupyter notebook文件内的函数一种简单方法python开发环境jupyter notebook良好的交互式和模块化受到很多
- 1.open使用open打开文件后一定要记得调用文件对象的close()方法。比如可以用try/finally语句来确保最后能关闭文件。fi
- 引言 亚马逊网站相较于国内的购物网站，可以直接使用python的最基本的request
- 今天为大家介绍Python当中一个很好用也是很基础的工具库，叫做collections。collection在英文当中有容器的意思，所以顾名
- 就前面所讲，函数的基本内容已经完毕。但是，函数还有很多值得不断玩味的细节。这里进行阐述。参数的传递python中函数的参数通过赋值的方式来传
- MySQL中删除数据表是非常容易操作的， 但是你再进行删除表操作时要非常小心，因为执行删除命令后所有数据都会消失。语法以下为删除MySQL数
- 下面是一份在 HTML 4 Strict 和 XHTML 1.0 Strict 下必须遵守的标签嵌套规则，比如你不能在 <a>
- 一：最近，经常碰到有网友问，如何使vbscript和javascipt传递变量。不知道为什么要这么做。因为每一种脚本语言几乎都可以完成所需要
- 样例：1.创建vue项目，不再详述2.引入vant之前用过很多插件做这个功能，但是效果都不尽人意，出现各种问题，直到遇到vant这个插件，完
- 如何让用户也能修改密码？ 好了，照下面添加到你要添加的地方去：<％id = Request(&qu
- 如下图所示：单击Edit Code打开Code信息如下：经查Data at the root level is invalid是XML文件的
- 密钥密码'''如密钥短语密码为: university -> universty明文: abcdefghijk
- 之所以说”使用”而不是”实现”，是因为python的相关类库已经帮我们实现了具体算法，而我们只要学会使用就可以了。随着对技术的逐渐掌握及积累
- 前言pytest配置文件可以改变pytest的运行方式，它是一个固定的文件pytest.ini文件，读取配置信息，按指定的方式去运行非tes
- 滤波算子简介ndimage中提供了卷积算法，并且建立在卷积之上，提供了三种边缘检测的滤波方案：prewitt, sobel以及laplace
- 思路改进原博主文章(Python GUI–Tkinter简单实现个性签名设计)的代码,原先的代码是基于Python2的,我这份代码基于Pyt
- 就是在mysql命令行登录的时候加上： --pager=more 参数可以使用linux下的more来分页，很好用
- 前言：python在同一个线程中多次执行同一方法时，该方法执行耗时较长且每次执行过程及结果互不影响，如果只在主进程中执行，效率会很低，因此使
