<!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

     *{margin:0;padding:0;}

     .head{font-size:12px;padding:6px 0 0 10px;}

     #login_box{width:300px;height:150px;background:#eee;

     border:1px solid #ccc;position:absolute;left:50%;top:50%;margin-left:-150px;margin-top:-75px;display:none;}

     #login_box p{height:20px;border-bottom:1px solid #ccc;font-size:12px;padding:6px 0 0 5px;font-weight:bold;}

     #close{width:14px;height:14px;background:url(close.png) no-repeat;position:absolute;right:4px;top:6px; cursor: pointer;}

    </style>

    <script>

      window.onload=function(){

          var login_btn=document.getElementById('login'),

              login_box=document.getElementById('login_box'),

              close=document.getElementById('close');

          // 封装添加事件监听程序

        function addEvent(ele,type,hander){

           // 执行代码

           if (ele.addEventListener) {

            ele.addEventListener(type,hander,false);

           } else if(ele.attachEvent){

            ele.attachEvent(type,hander);

           }else{

            ele["on"+type] = hander;

           }

          }

        // 显示登录层函数

          function showLogin(){

              // 执行代码

          login_box.style.display = "block";

        }

        // 隐藏登录层函数

        function hideLogin(){

          // 执行代码

          login_box.style.display = "none";

        }

        //点击登录按钮显示登录层

        addEvent(login_btn,"click",showLogin);

        //点击关闭按钮隐藏登录层

        addEvent(close,"click",hideLogin);

      }

    </script>

</head>

<body>

    <div class="head">亲，您好！<input type="button" value="登 录" id="login"></div>

    <div id="login_box">

        <p>用户登录</p><span id="close">X</span>

    用户名：<input type="text"  /><br />

    &nbsp;密码：<input type="password"  />

    </div>

</body>

</html>

js事件练习--登录界面演示。的更多相关文章

  1. 基于easyUI实现登录界面

    此文章是基于 EasyUI+Knockout实现经典表单的查看.编辑 一. 准备工作 1. 点击此下载相关文件,并把文件放到 ims 工程对应的文件夹下 二. 相关文件介绍 1. login.jsp: ...

  2. Axure实例演示—登录界面

         实例演示 ——登录界面                                                                                    ...

  3. 响应式的账号登录界面模板完整代码，内置form表单和js控件

    响应式的账号登录界面模板,内置form表单和js控件 <!DOCTYPE html> <html lang="en"><head><met ...

  4. js脚本实现在该界面直接跳转到一个登录界面并且自动登录

    1:首先说明的是自动登录也是需要密码的,这是前一个网页传输过去的 2:这里我使用的是post提交表单的形式 <------------------------------------------ ...

  5. Vue router拦截 如果用户并未登录直接跳转到登录界面（最简单的cookie演示）

    router.beforeEach(function(to,from,next){ console.log('路由拦截') console.log(to.name) console.log(from. ...

  6. 记一次自启动的docker容器将宿主机的开机用户登录界面覆盖事件

    宿主机的系统为CentOS7_7.7.1908,默认为GUI启动,安装了宝塔面板,docker-ce为最新版. 在启动了一个centos7的容器(镜像为centos官方镜像)后,将该容器重启策略设置为 ...

  7. EasyUi – 2.布局Layout + 3.登录界面

    1.页面布局 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="index.a ...

  8. Web页面长时间无操作后再获取焦点时转到登录界面

    今天开始讲新浪博客搬到博客园.        在工作中遇到的小问题,感觉有点意思,就记录下来吧!        该问题分为两种情况,一.Web页面长时间无操作后,在对其进行操作,比如点击“首页”.“设 ...

  9. (三)SSO之CAS框架单点退出,退出到CAS登录界面

    应需求的改变.CAS自定义登录页面不安全,不再使用,于是我一下子回到了原点,在linux上部署上了没有加自定义登陆界面的CAS,接下来开始修改CAS自己默认的登录界面为我们的界面. 一下子修改成功是根 ...

随机推荐

  1. HDU 4716 A Computer Graphics Problem 2013年四川省赛题

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4716 题目大意不用解释了吧,看案例就能明白 #include<cstdio> #inclu ...

  2. [YUM]Public key for *.rpm is not installed

    解决办法: 此时要导入rpm的签名信息即可 以root登录,执行下面命令 # rpm --import /etc/pki/rpm-gpg/RPM-GPG-KEY-redhat-release

  3. poj 2752 Seek the Name, Seek the Fame【KMP算法分析记录】【求前后缀相同的子串的长度】

    Seek the Name, Seek the Fame Time Limit: 2000MS   Memory Limit: 65536K Total Submissions: 14106   Ac ...

  4. [置顶] [MATLAB技术贴]漫谈MATLAB矩阵转置

    矩阵转置是matlab最基本的操作了,但这个基本操作,也是很多初学者容易出现问题的地方.本帖通过几个实例演示matlab矩阵转置的操作. 方法一:'  运算符与  .'  运算符 >>a ...

  5. 【Android - 框架】之ButterKnife的使用

    ButterKnife可以省去控件findViewById的步骤,提高开发效率. 用法: 1.添加依赖: compile 'com.jakewharton:butterknife:5.1.1' 2.在 ...

  6. ExtractNewFolderPath

    unit Unit1; interface uses  Winapi.Windows, Winapi.Messages, System.SysUtils, System.Variants,  Syst ...

  7. Linux Resin 安装

    1 Resin 下载 Resin 官方下载网址. 最新版下载 resin-4.0.36.tar.gz(免费版) resin 安装须要提前配置好jdk.配置jdk请看上面文章 2 Resin 安装 (1 ...

  8. [AngularJS + Webpack] Requiring Templates

    With Angular, most of the time you're specifying a templateUrl for your directives and states/routes ...

  9. Android 举例说明自己的定义Camera图片和预览，以及前后摄像头切换

    如何调用本地图片,并调用系统拍摄的图像上一博文解释(http://blog.csdn.net/a123demi/article/details/40003695)的功能. 而本博文将通过实例实现自己定 ...

  10. android 03 TableLayout

    MainActivity.java(默认的,什么都没有) package com.sxt.day02_02; import android.os.Bundle; import android.app. ...