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 相关文章推荐
用YUI做了个标签浏览效果
Feb 20 Javascript
JavaScript 数组循环引起的思考
Jan 01 Javascript
JavaScript高级程序设计(第3版)学习笔记2 js基础语法
Oct 11 Javascript
在服务端(Page.Write)调用自定义的JS方法详解
Aug 09 Javascript
js日期、星座的级联显示代码
Jan 23 Javascript
用jquery等比例控制图片宽高的具体实现
Jan 28 Javascript
基于node实现websocket协议
Apr 25 Javascript
js代码延迟一定时间后执行一个函数的实例
Feb 15 Javascript
几行js代码实现自适应
Feb 24 Javascript
JavaScript 高性能数组去重的方法
Sep 20 Javascript
VuePress 静态网站生成方法步骤
Feb 14 Javascript
微信小程序实现一个简单swiper代码实例
Dec 30 Javascript
Vue + iView实现Excel上传功能的完整代码
基于JavaScript实现年月日三级联动
Vue vee-validate插件的简单使用
Jun 22 #Vue.js
基于JavaScript实现省市联动效果
JavaScript实现简单计时器
React实现动效弹窗组件
关于React Native 无法链接模拟器的问题
You might like
php批量删除数据库下指定前缀的表以prefix_为例
2014/08/24 PHP
PHP中字符串长度的截取用法示例
2017/01/12 PHP
PHP输出XML格式数据的方法总结
2017/02/08 PHP
PHP实现15位身份证号转18位的方法分析
2019/10/16 PHP
Javascript中的常见排序算法
2007/03/27 Javascript
基于JQuery实现相同内容合并单元格的代码
2011/01/12 Javascript
Firefox/Chrome/Safari的中可直接使用$/$$函数进行调试
2012/02/13 Javascript
window.location.reload()方法刷新页面弹出要再次显示该网页对话框
2013/04/24 Javascript
禁止空格提交表单的js代码
2013/11/17 Javascript
jquery取子节点及当前节点属性值的方法
2014/09/09 Javascript
JavaScript返回0-1之间随机数的方法
2015/04/06 Javascript
jquery用ajax方式从后台获取json数据后如何将内容填充到下拉列表
2015/08/26 Javascript
BootStrap的JS插件之轮播效果案例详解
2016/05/16 Javascript
微信小程序  http请求封装详解及实例代码
2017/02/15 Javascript
vuejs手把手教你写一个完整的购物车实例代码
2017/07/06 Javascript
vue单页应用中如何使用jquery的方法示例
2017/07/27 jQuery
详解webpack编译多页面vue项目的配置问题
2017/12/11 Javascript
原生js实现ajax请求和JSONP跨域请求操作示例
2020/03/14 Javascript
JS array数组检测方式解析
2020/05/19 Javascript
微信小程序点击滚动到指定位置的实现
2020/05/22 Javascript
vue项目实现设置根据路由高亮对应的菜单项操作
2020/08/06 Javascript
[01:02:32]DOTA2-DPC中国联赛 正赛 iG vs PSG.LGD BO3 第二场 2月26日
2021/03/11 DOTA
python文件操作之目录遍历实例分析
2015/05/20 Python
Python实现带参数与不带参数的多重继承示例
2018/01/30 Python
python seaborn heatmap可视化相关性矩阵实例
2020/06/03 Python
FOREO斐珞尔官方旗舰店:LUNA露娜洁面仪
2018/03/11 全球购物
美国运动鞋和服装网上商店:YCMC
2018/09/15 全球购物
Love, Bonito国际官网:新加坡女装品牌
2021/03/13 全球购物
测试时代收集的软件测试面试题
2013/09/25 面试题
优秀中专生推荐信
2013/11/17 职场文书
医院护士见习期自我鉴定
2014/09/15 职场文书
高中生旷课检讨书
2014/10/08 职场文书
2014年优质护理服务工作总结
2014/11/14 职场文书
为Java项目添加Redis缓存的方法
2021/05/18 Redis
SQL实现LeetCode(176.第二高薪水)
2021/08/04 MySQL
css 边框添加四个角的实现代码
2021/10/16 HTML / CSS