<!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. [转]让程序在崩溃时体面的退出之SEH+Dump文件

    原文地址:http://blog.csdn.net/starlee/article/details/6649605 在我上篇文章<让程序在崩溃时体面的退出之SEH>中讲解了SEH中try/ ...

  2. asp 数组

    定义简单数组 有两种方法在asp中定义和初始化数组,让我们看看每种的例子: 方法一:MyArray = Array("Jan","Feb","Mar& ...

  3. Import larger wordpress xml file

    The maximum size is controlled by two PHP settings: upload_max_filesize, and post_max_size. These ar ...

  4. [cocos2dx 3.0 + xcode]疑难点记录

    1: 新项目创建 1.下载最新Python,安装 2.解压引擎包 3.运行终端,切换到引擎目录(直接cd拖动文件夹到光标即可得到路径) 4.按照文档例子: $ cd cocos2d-x $ ./set ...

  5. TCP协议状态简介

    原文出自:Vimer的程序世界 1.建立连接协议(三次握手)(1)客户端发送一个带SYN标志的TCP报文到服务器.这是三次握手过程中的报文1.(2) 服务器端回应客户端的,这是三次握手中的第2个报文, ...

  6. Java GC专家系列4：Apache的MaxClients设置及其对Tomcat Full GC的影响

    本文是GC专家系列中的第四篇.在第一篇理解Java垃圾回收中我们学习了几种不同的GC算法的处理过程,GC的工作方式,新生代与老年代的区别.所以,你应该已经了解了JDK 7中的5种GC类型,以及每种GC ...

  7. java 微信公众服务平台 下发 模板消息

    java 微信公众服务平台 下发 模板消息 (一).部分截图 (二).部分代码 (一).部分截图: (二).部分代码: //此处 给用户微信发消息... Map<String,String> ...

  8. 微信公众平台--网页授权获取用户基本信息（snsapi_base方式）

    关于snsapi_base网页授权的说明 以snsapi_base为scope发起的网页授权,是用来获取进入页面的用户的openid的,并且是静默授权并自动跳转到回调页的.用户感知的就是直接进入了回调 ...

  9. Windows Live Writer的Markdown插件MarkdownInLiveWriter支持语法高亮了

    我前几天开发的Windows Live Writer的Markdown的插件MarkdownInLiveWriter支持语法高亮了.参见下图: 基本上就是把我的另一个插件CodeInLiveWrite ...

  10. Access中出现改变字段“自己主动编号”类型，不能再改回来！（已解决）

    Access中出现改变字段"自己主动编号"类型,不能再改回来! (已解决) 一次把access中的自增字段改成了数值,再改回自增时,提示:在表中输入了数据之后,则不能将不论什么字段 ...