<!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. Java---网络蜘蛛-网页邮箱抓取器~源码

    刚刚学完Socket,迫不及待的做了这个网页邮箱抓取~~~ 现在有越来越多的人热衷于做网络爬虫(网络蜘蛛),也有越来越多的地方需要网络爬虫,比如搜索引擎.资讯采集.舆情监测等等,诸如此类.网络爬虫涉及 ...

  2. C++Primer第5版学习笔记（三）

    C++Primer第5版学习笔记(三) 第四/五章的重难点内容           你可以点击这里回顾第三章内容       因为第五章的内容比较少,因此和第四章的笔记内容合并.       第四章是 ...

  3. 将证书写到jre中

    第一步: 取得要导入的证书. 第二步: 开启CMD,进入Java/jre6/lib/security 目录下. 第三步: 执行以下命令: keytool -import -alias cacerts ...

  4. Sublime Text 2/3如何支持中文GBK编码

    Sublime Text默认是只支持UTF8的编码,所以有些时候,当我们打开GBK文件时候,文件内会出先部分的乱码, 在菜单栏选择"Preferences"-->" ...

  5. 洛谷 P1004 方格取数

    题目描述 设有N*N的方格图(N<=9),我们将其中的某些方格中填入正整数,而其他的方格中则放 人数字0.如下图所示(见样例): A 0 0 0 0 0 0 0 0 0 0 13 0 0 6 0 ...

  6. 异步加载图片到GridView上，防止OOM

    图片资源: private int fore[]; private int back[]; fore = new int[]{R.drawable.a0, R.drawable.a1, R.drawa ...

  7. winform Execl数据 导入到数据库（SQL） 分类： WinForm C# 2014-05-09 20:52 191人阅读 评论(0) 收藏

    首先,看一下我的窗体设计: 要插入的Excel表: 编码 名称 联系人 电话 省市 备注 100 100线 张三 12345678910 北京 测试 101 101线 张三 12345678910 上 ...

  8. WebLogic SSRF 漏洞 (简要翻译）

    [Ref]http://blog.gdssecurity.com/labs/2015/3/30/weblogic-ssrf-and-xss-cve-2014-4241-cve-2014-4210-cv ...

  9. div页面居中(上下左右)

      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.or ...

  10. crontab 定时任务 每过多少分钟执行

    被下面的问题纠结了一会 记录一下以备提醒 每过5分钟执行 */ * * * * curl localhost/system/dns/dnns.php?ac=ToDNS 每小时的第五分钟执行 0 * * ...