js事件练习--登录界面演示。
<!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 />
密码：<input type="password" />
</div>
</body>
</html>
js事件练习--登录界面演示。的更多相关文章
- 基于easyUI实现登录界面
此文章是基于 EasyUI+Knockout实现经典表单的查看.编辑 一. 准备工作 1. 点击此下载相关文件,并把文件放到 ims 工程对应的文件夹下 二. 相关文件介绍 1. login.jsp: ...
- Axure实例演示—登录界面
实例演示 ——登录界面 ...
- 响应式的账号登录界面模板完整代码，内置form表单和js控件
响应式的账号登录界面模板,内置form表单和js控件 <!DOCTYPE html> <html lang="en"><head><met ...
- js脚本实现在该界面直接跳转到一个登录界面并且自动登录
1:首先说明的是自动登录也是需要密码的,这是前一个网页传输过去的 2:这里我使用的是post提交表单的形式 <------------------------------------------ ...
- Vue router拦截 如果用户并未登录直接跳转到登录界面（最简单的cookie演示）
router.beforeEach(function(to,from,next){ console.log('路由拦截') console.log(to.name) console.log(from. ...
- 记一次自启动的docker容器将宿主机的开机用户登录界面覆盖事件
宿主机的系统为CentOS7_7.7.1908,默认为GUI启动,安装了宝塔面板,docker-ce为最新版. 在启动了一个centos7的容器(镜像为centos官方镜像)后,将该容器重启策略设置为 ...
- EasyUi – 2.布局Layout + 3.登录界面
1.页面布局 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="index.a ...
- Web页面长时间无操作后再获取焦点时转到登录界面
今天开始讲新浪博客搬到博客园. 在工作中遇到的小问题,感觉有点意思,就记录下来吧! 该问题分为两种情况,一.Web页面长时间无操作后,在对其进行操作,比如点击“首页”.“设 ...
- (三)SSO之CAS框架单点退出,退出到CAS登录界面
应需求的改变.CAS自定义登录页面不安全,不再使用,于是我一下子回到了原点,在linux上部署上了没有加自定义登陆界面的CAS,接下来开始修改CAS自己默认的登录界面为我们的界面. 一下子修改成功是根 ...
随机推荐
- Front-End Engineer 技术栈
自己根据各种招聘网站上的技术要求做的,希望自己能成为这样的人.
- udev:renamed network interface eth0 to eth1
删除/etc/udev/rules.d/70-persistent-net.rules这个文件,重启
- Conversion between json and object
public static string ObjToJson<T>(T obj) { DataContractJsonSerializer serializer = new DataCon ...
- 三分钟读懂Oracle数据库容灾架之DataGuard
Oracle数据库目前依然处于商用数据库的霸主地位. 运行在Oracle数据库上的核心业务及核心数据的安全性尤为重要. 目前市场上针对Oracle数据库常见的容灾产品大致可以分为两大类. Oracle ...
- asp 验证
<% dim redirectUrl,checkState checkState=0 MyArray = Array("127","Feb"," ...
- VS2012 win7 修改TFS登陆账号的方法
.修改登陆账号: 在网上搜了好多,都没有找到解决方法,自己琢磨了一会找到了修改登陆TFS(Team Foundation Server)(团队资源管理器)的账号,和大家分享一下吧. 点击“开始”--“ ...
- Handler具体解释系列(四)——利用Handler在主线程与子线程之间互发消息
MainActivity例如以下: package cc.c; import android.app.Activity; import android.os.Bundle; import androi ...
- [RxJS] Combination operator: withLatestFrom
Operator combineLatest is not the only AND-style combinator. In this lesson we will explore withLate ...
- java web项目中的web.xml标签之context-param
WEB项目初始化过程: 在启动Web项目时,容器(比如Tomcat)会读web.xml配置文件中的两个节点<listener>和<contex-param>. 接着容器会创建一 ...
- linux下面安装和配置nginx
下载nginx-1.0.2.tar.gz wget nginx-1.0.2.tar.gz 解压 nginx-1.0.2.tar.gz tar -xzvf nginx-1.0.2.tar.gz 配置安装 ...