JavaScript实现登录窗体


Posted in Javascript onJune 22, 2021

本文实例为大家分享了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">
    <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>&nbsp
                <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 相关文章推荐
让页面上两个div中的滚动条(滑块)同步运动示例
Aug 07 Javascript
JS控制弹出新页面窗口位置和大小的方法
Mar 02 Javascript
JS实现鼠标滑过折叠与展开菜单效果代码
Sep 06 Javascript
JavaScript encodeURI 和encodeURIComponent
Dec 04 Javascript
jquery分页插件jquery.pagination.js实现无刷新分页
Apr 01 Javascript
JavaScript页面实时显示当前时间实例代码
Oct 23 Javascript
JS声明对象时属性名加引号与不加引号的问题及解决方法
Feb 16 Javascript
vue-cli脚手架引入图片的几种方法总结
Mar 13 Javascript
在vue中安装使用vux的教程详解
Sep 16 Javascript
js异步上传多张图片插件的使用方法
Oct 22 Javascript
JS实现倒序输出的几种常用方法示例
Apr 13 Javascript
JavaScript实现弹出窗口效果
Dec 09 Javascript
Vue + iView实现Excel上传功能的完整代码
基于JavaScript实现年月日三级联动
Vue vee-validate插件的简单使用
Jun 22 #Vue.js
基于JavaScript实现省市联动效果
JavaScript实现简单计时器
React实现动效弹窗组件
关于React Native 无法链接模拟器的问题
You might like
Smarty+QUICKFORM小小演示
2007/02/25 PHP
安装apache2.2.22配置php5.4(具体操作步骤)
2013/06/26 PHP
destoon设置自定义搜索的方法
2014/06/21 PHP
ThinkPHP中redirect用法分析
2014/12/05 PHP
thinkPHP中create方法与令牌验证实例浅析
2015/12/08 PHP
微信支付开发维权通知实例
2016/07/12 PHP
PHP实现实时生成并下载超大数据量的EXCEL文件详解
2017/10/23 PHP
使用js声明数组,对象在jsp页面中(获得ajax得到json数据)
2013/11/05 Javascript
node.js中的querystring.unescape方法使用说明
2014/12/10 Javascript
Javascript中With语句用法实例
2015/05/14 Javascript
Vue.js每天必学之过滤器与自定义过滤器
2016/09/07 Javascript
AngularJS中的Promise详细介绍及实例代码
2016/12/13 Javascript
Vue分页组件实例代码
2017/04/17 Javascript
angular-ngSanitize模块-$sanitize服务详解
2017/06/13 Javascript
jQuery使用动画队列自定义动画操作示例
2018/06/16 jQuery
微信小程序上传图片到php服务器的方法
2019/05/23 Javascript
微信小程序实现时间进度条功能
2020/11/17 Javascript
JS数组降维的实现Array.prototype.concat.apply([], arr)
2020/04/28 Javascript
[01:03:00]DOTA2上海特级锦标赛A组败者赛 EHOME VS CDEC第一局
2016/02/25 DOTA
几种实用的pythonic语法实例代码
2018/02/24 Python
Python检测网络延迟的代码
2018/05/15 Python
Tensorflow中使用tfrecord方式读取数据的方法
2018/06/19 Python
tensorflow 用矩阵运算替换for循环 用tf.tile而不写for的方法
2018/07/27 Python
Python求解正态分布置信区间教程
2019/11/20 Python
法国综合购物网站:RueDuCommerce
2016/09/12 全球购物
加拿大奢华时装品牌:Mackage
2018/01/10 全球购物
最畅销的视频游戏享受高达90%的折扣:CDKeys
2020/02/10 全球购物
为数据库创建索引都需要注意些什么
2012/07/17 面试题
技术人员面试提纲
2013/11/28 职场文书
大学生自我鉴定范文
2013/12/28 职场文书
小学生读书活动总结
2014/06/30 职场文书
无子女夫妻离婚协议书(4篇)
2014/10/20 职场文书
2014年话务员工作总结
2014/11/19 职场文书
2015年乡镇纪检工作总结
2015/04/22 职场文书
教师节倡议书2015
2015/04/27 职场文书
JAVA API 实用类 String详解
2021/10/05 Java/Android