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自己默认的登录界面为我们的界面. 一下子修改成功是根 ...
随机推荐
- 游戏开发Camera之Cinematic Camera-深度
人的视觉系统是二维的,它通过生理和心理的暗示来感知图像的深度,在现实世界中视觉系统会自动用深度线索depth cue来确定对象之间的距离游戏画面也是二维的,用x,y轴来定义,画面深度用z轴来定义,可以 ...
- C_FORCE_ROOT linux环境变量设置
nano /etc/profile gedit 也可以 结尾追加 export C_FORCE_ROOT="true"
- poj 2631 Roads in the North【树的直径裸题】
Roads in the North Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 2359 Accepted: 115 ...
- HDU 4414 Finding crosses (DFS + BFS)
题意:在N*N的图中,找出孤立存在的十字架的个数.十字架要求为正十字,孤立表示组成十字架的‘#的周围的一格再无’#‘. dfs找出在中心的‘#’(周围四格也为‘#'),则缩小了搜索范围,再bfs找出是 ...
- 一个很cool的C#的高性能数学库
High Performance Math Library for C# and .NET是一个很cool的C#的高性能数学库,3D效果也很不错,下图是首页上的一个例子.他也有一个交互的网页,你可以自 ...
- NDK安装 eclipse 不出现NDK目录问题
android adt自带eclipse无法设置ndk路径 具体情况是 我在mac上搭建android环境 到android sdk官网下载r23版本的adt时自带的eclipse没有设置ndk路径的 ...
- WinForm中关于控件焦点的问题
方法一: 在打开一个窗体时,我们往往需要设置焦点让光标出现在我们希望它出现的位置上. 这时我们可以在窗体的Activated事件中设置焦点 例如我们希望光标在打开窗体的时候出现在textBox1上,我 ...
- 娓娓道来c指针 (3)指针和数组
(3)指针和数组 在c中指针和数组似乎有着千丝万缕的关系.事实上它们不是一回事:指针是指针,数组是数组.两者不同样. 说它们有关系,只是是由于常见这种代码: int main() { int arra ...
- admob广告开始个人资料网址
最近植入广告,数据收集,简单易学. ios http://www.rover12421.com/2013/05/08/ios-add-admob-ads-test-xcode-project-test ...
- linux 上查找pid，筛选出来
ps -ef | grep httpd find / -name "1000sql.txt" 查找命令