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自己默认的登录界面为我们的界面. 一下子修改成功是根 ...
随机推荐
- ADO数据库链接
一.数据库操作准备 // --------------------------------------------------------------------------------------- ...
- TCP连接建立的三次握手过程可以携带数据吗？
前几天实验室的群里扔出了这样一个问题:TCP连接建立的三次握手过程可以携带数据吗?突然发现自己还真不清楚这个问题,平日里用tcpdump或者Wireshark抓包时,从来没留意过第三次握手的ACK包有 ...
- com.microsoft.sqlserver.jdbc.SQLServerException: 通过端口 1433 连接到主机 127.0.0.1 的 TCP/IP 连接失败。错误:“Connection refused: connect。请验证连接属性。确保 SQL Server 的实例正在主机上运行，且在此端口接受 TCP/IP 连接，还要确保防火墙没有阻止到此端口的 TCP 连接。”
检查SQL Server Configuration Manager 确定实例名为"SKYSQLEXPRESS"下的TCP/IP已经开启了: sql2014配置(系统为Window ...
- C# 字符串常用操作 分类： C# 2014-08-22 15:07 238人阅读 评论(0) 收藏
string str1 = "C#操作字符串<几种常见方式>如下"; string str2 = "C#操作字符串"; //比较字符串 Co ...
- Http(1)
#http协议版本 http1.0:当前浏览器客户端与服务器端建立连接之后,只能发送一次请求,一次请求之后连接关闭. http1.1:当前浏览器客户端与服务器端建立连接之后,可以在一次连接中发送多次请 ...
- [转]Animation 动画详解（一）——alpha、scale、translate、rotate、set的xml属性及用法
转载:http://blog.csdn.net/harvic880925/article/details/39996643 前言:这几天做客户回访,感触很大,用户只要是留反馈信息,总是一种恨铁不成钢的 ...
- Node.js小Httpserver
须要说明两点: 1 程序文件hello.js需用记事本另存为utf-8格式的hello.js watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvamVhcGVk ...
- C开发之----#if、#ifdef、#if defined之间的区别
#if的使用说明 #if的后面接的是表达式 #if (MAX==10)||(MAX==20) code... #endif 它的作用是:如果(MAX==10)||(MAX==20)成立,那么编译器就会 ...
- [CodeForce]358D Dima and Hares
有N<3000只宠物要喂,每次只能喂一只,每喂一只宠物,宠物的满足度取决于: 1 紧靠的两个邻居都没喂,a[i] 2 邻居中有一个喂过了,b[i] 3 两个邻居都喂过了,c[i] 把所有宠物喂一 ...
- IOS-tableViewCell重用机制
IOS-tableViewCell重用机制 首先介绍tableViewCell原生cell的使用和重用机制 使用dequeueReusableCellWithIdentifier方法,这个方法会从缓存 ...