最近在学习李炎恢老师的javascript,边学边记录学习过程中的代码笔记。
下面是实现弹出登陆窗口的效果图:
接下来贴出代码笔记:
base.js自定义封装库:
/**
博客前端+封装库
*/
/********************自定义封装***************************/
function $(_this){
return new Base(_this);//每次创建一个Base对象,防止页面共用同一个Base对象
}
//基础库
function Base(_this){
this.elements=[];//创建一个临时数组。存放元素节点对象
if(_this!=undefined){//undefined这里是一个对象,区别与tyoeof带单引号有区别
this.elements[0]=_this;
}
}
//通过id获取节点
Base.prototype.getById=function(id){
this.elements.push(document.getElementById(id));
return this;
};
//通过元素名称获取节点
Base.prototype.getByTagName=function(tag){
var tags=document.getElementsByTagName(tag);
for(var i=0;i<tags.length;i++){
this.elements.push(tags[i]);
}
return this;
};
//获取class节点数组
Base.prototype.getClass=function(className,idName){
var node=null;
if(arguments.length==2){//指定区域div中的所有class集合
node=document.getElementById(idName);
}else{
node=document;
}
var all=node.getElementsByTagName('*');
for(var i=0;i<all.length;i++){
if(all[i].className==className){
this.elements.push(all[i]);
}
}
return this;
}
//获取class节点集合中的某一个节点
Base.prototype.getElement=function(num){
var element=this.elements[num];
this.elements=[];//清空原来的节点集合
this.elements[0]=element;
return this;
}
//添加class
Base.prototype.addClass=function(className){
for(var i=0;i<this.elements.length;i++){
if(!hasClass(this.elements[i], className)){//避免重复相同的class
this.elements[i].className+=" "+className;
}
}
return this;
}
//移除class
Base.prototype.removeClass=function(className){
for(var i=0;i<this.elements.length;i++){
if(!hasClass(this.elements[i], className)){//避免重复相同的class
this.elements[i].className= this.elements[i].className.replace(new RegExp("\\s|^"+className+'(\\s|$)'));
}
}
return this;
}
//添加link或style的CSS规则
Base.prototype.addRule = function (num, selectorText, cssText, position) {
var sheet = document.styleSheets[num];
insertRule(sheet, selectorText, cssText, position);
return this;
}
//移除link或style的CSS规则
Base.prototype.removeRule = function (num, index) {
var sheet = document.styleSheets[num];
deleteRule(sheet, index);
return this;
}
//设置css样式
Base.prototype.css=function(attr,value){
for(var i=0;i<this.elements.length;i++){
if(arguments.length==1){
return getStyle(this.elements[i], attr);
//return this.elements[i].style[attr];//获取css属性内容
}
this.elements[i].style[attr]=value;
}
return this;
}
//设置节点内容
Base.prototype.html=function(text){
for(var i=0;i<this.elements.length;i++){
if(arguments.length==0){
return this.elements[i].innerHTML;//获取节点内容
}
this.elements[i].innerHTML=text;
}
return this;
}
//设置hover的onmouseover和onmouseout事件
Base.prototype.hover=function(over,out){
for(var i=0;i<this.elements.length;i++){
//this.elements[i].onmouseover=over;
//this.elements[i].onmouseout=out;
addEvent(this.elements[i], 'mouseover', over);
addEvent(this.elements[i], 'mouseout', out);
}
return this;
};
//显示ul
Base.prototype.show=function(){
for(var i=0;i<this.elements.length;i++){
this.elements[i].style.display="block";
}
return this;
};
//隐藏ul
Base.prototype.hide=function(){
for(var i=0;i<this.elements.length;i++){
this.elements[i].style.display="none";
}
return this;
};
//居中显示登陆框事件
Base.prototype.center=function(width,height){
var left=(document.documentElement.clientWidth-width)/2;
var top=(document.documentElement.clientHeight-height)/2;
for(var i=0;i<this.elements.length;i++){
this.elements[i].style.top=top+"px";
this.elements[i].style.left=left+"px";
}
return this;
}
//增加锁频功能
Base.prototype.lock=function(){
for(var i=0;i<this.elements.length;i++){
this.elements[i].style.height=getInner().height+"px";
this.elements[i].style.width=getInner().width+"px";
this.elements[i].style.display="block";
document.documentElement.style.overflow = 'hidden';//隐藏滚动条
/*
addEvent(this.elements[i], 'mousedown', function (e) {
e.preventDefault();
addEvent(document, 'mousemove', function (e) {
e.preventDefault();
});
});
*/
addEvent(window, 'scroll', scrollTop);
}
return this;
}
//增加取消锁屏功能
Base.prototype.unlock=function(){
for(var i=0;i<this.elements.length;i++){
this.elements[i].style.display="none";
document.documentElement.style.overflow = 'auto';//显示滚动条
removeEvent(window, 'scroll', scrollTop);
}
return this;
}
//设置点击事件
Base.prototype.click=function(fn){
for(var i=0;i<this.elements.length;i++){
this.elements[i].onclick=fn;
}
return this;
}
//设置浏览器窗口大小改变事件
Base.prototype.resize=function(fn){
for (var i = 0; i < this.elements.length; i ++) {
var element=this.elements[i];
/*window.onresize=function(){ //传统的事件
};*/
addEvent(window,'resize',function(){
fn();
if(element.offsetLeft >getInner().width-element.offsetWidth){
element.style.left=getInner().width-element.offsetWidth+"px";
}
if(element.offsetTop > getInner().height-element.offsetHeight){
element.style.top=getInner().height-element.offsetHeight+"px";
}
});
}
return this;
}
//自定义拖拽div功能
Base.prototype.drag=function(){
for (var i = 0; i < this.elements.length; i ++) {
addEvent(this.elements[i], 'mousedown', function (e) {
if (trim(this.innerHTML).length == 0) e.preventDefault();
var _this = this;//记住oDiv
//preDefault(e);//阻止浏览器的默认行为
//var e=getEvent(e);
var diffX = e.clientX - _this.offsetLeft;
var diffY = e.clientY - _this.offsetTop;
if (e.target.tagName == 'H2') {
addEvent(document, 'mousemove', move);
addEvent(document, 'mouseup', up);
} else {
removeEvent(document, 'mousemove', move);
removeEvent(document, 'mouseup', up);
}
function move(e) {
var left = e.clientX - diffX;
var top = e.clientY - diffY;
if (left < 0) {//判断往左边拖拽的时候不能超过当前的窗口
left = 0;
} else if (left > getInner().width - _this.offsetWidth) {//判断往右边拖拽的时候不能超过当前的窗口
left = getInner().width - _this.offsetWidth;
}
if (top < 0) {//判断往上边拖拽的时候不能超过当前的窗口
top = 0;
} else if (top > getInner().height - _this.offsetHeight) {//判断往下边拖拽的时候不能超过当前的窗口
top = getInner().height - _this.offsetHeight;
}
_this.style.left = left + 'px';
_this.style.top = top + 'px';
if (typeof _this.setCapture != 'undefined') {//防止IE浏览器在拖拽div到浏览器外时 ,当前事件不会作用到div上
_this.setCapture();
}
}
function up() {
removeEvent(document, 'mousemove', move);
removeEvent(document, 'mouseup', up);
if (typeof _this.releaseCapture != 'undefined') {//防止IE浏览器在拖拽div到浏览器外时 ,当前事件不会作用到div上
_this.releaseCapture();
}
}
});
//document.onmousemove=function(e){ }
/*this.elements[i].onmousedown=function(e){}
document.onmouseup=function(){
this.onmousemove=null;
this.onmouseup=null;
if (typeof _this.releaseCapture != 'undefined') {
_this.releaseCapture();
}
}*/
}
return this;
}
/****************************下面的可以封装到一个js文件中********************************************/
/*
//实现累加,并且清晰的指出是专给addEvent用的
//JS一切皆为对象,所以addEvent.ID语法正确,实际上是个全局变量
alert(addEvent.ID);
addEvent.ID++;
*/
//添加事件(obj:事件对象,type:事件类型(如:click,load等),fn:事件处理函数)
function addEvent(obj,type,fn){
if(typeof obj.addEventListener!="undefined"){//w3c
obj.addEventListener(type,fn,false);//false表示不捕获
}else{//IE
//创建一个存放事件的哈希表(散列表)
if (!obj.events) obj.events = {};
//第一次执行时执行
if (!obj.events[type]) {
//创建一个存放事件处理函数的数组
obj.events[type] = [];
//把第一次的事件处理函数先储存到第一个位置上
if (obj['on' + type]) obj.events[type][0] = fn;
} else {
//同一个注册函数进行屏蔽,不添加到计数器中
if (addEvent.equal(obj.events[type], fn)) return false;
}
//从第二次开始我们用事件计数器来存储
obj.events[type][addEvent.ID++] = fn;
//执行事件处理函数
obj['on' + type] = addEvent.exec;
}
}
//为每个事件分配一个计数器
addEvent.ID = 1;
//执行事件处理函数
addEvent.exec = function (event) {
var e = event || addEvent.fixEvent(window.event);
var es = this.events[e.type];
for (var i in es) {
es[i].call(this, e);
}
};
//同一个注册函数进行屏蔽
addEvent.equal = function (es, fn) {
for (var i in es) {
if (es[i] == fn) return true;
}
return false;
}
//把IE常用的Event对象配对到W3C中去
addEvent.fixEvent = function (event) {
event.preventDefault = addEvent.fixEvent.preventDefault;
event.stopPropagation = addEvent.fixEvent.stopPropagation;
return event;
};
//IE阻止默认行为
addEvent.fixEvent.preventDefault = function () {
this.returnValue = false;
};
//IE取消冒泡
addEvent.fixEvent.stopPropagation = function () {
this.cancelBubble = true;
};
//跨浏览器删除事件
function removeEvent(obj, type, fn) {
if (typeof obj.removeEventListener != 'undefined') {
obj.removeEventListener(type, fn, false);
} else {
for (var i in obj.events[type]) {
if (obj.events[type][i] == fn) {
delete obj.events[type][i];
}
}
}
}
//跨浏览器获取窗口的大小
function getInner(){
if(typeof window.innerWidth!="undefined"){
return {
width:window.innerWidth,
height:window.innerHeight
};
}else{
return {
width:document.documentElement.clientWidth,
height:document.documentElement.clientHeight
};
}
}
//跨浏览器获取Style
function getStyle(element, attr) {
//获取外部样式表的设置
if(typeof window.getComputedStyle!='undefined'){//W3C
return window.getComputedStyle(element,null)[attr];
}else if(typeof element.currentStyle !='undefined'){//IE
return element.currentStyle[attr];
}
}
//判断class是否存在
function hasClass(element, className) {
return element.className.match(new RegExp('(\\s|^)' +className +'(\\s|$)'));
}
//跨浏览器添加link规则
function insertRule(sheet, selectorText, cssText, position) {
if (typeof sheet.insertRule != 'undefined') {//W3C
sheet.insertRule(selectorText + '{' + cssText + '}', position);
} else if (typeof sheet.addRule != 'undefined') {//IE
sheet.addRule(selectorText, cssText, position);
}
}
//跨浏览器移出link规则
function deleteRule(sheet, index) {
if (typeof sheet.deleteRule != 'undefined') {//W3C
sheet.deleteRule(index);
} else if (typeof sheet.removeRule != 'undefined') {//IE
sheet.removeRule(index);
}
}
//获取Event对象
function getEvent(event) {
return event || window.event;
}
//由于在较低版本的火狐浏览其中存在点击事件的兼容性问题,阻止浏览器的默认行为
function preDefault(event){
if(event.preventDefault!="undefined"){//w3c
event.preventDefault();
}else{
event.returnValue=false;
}
}
//删除左后空格
function trim(str) {
return str.replace(/(^\s*)|(\s*$)/g, '');
}
//滚动条清零
function scrollTop() {
document.documentElement.scrollTop = 0;
document.body.scrollTop = 0;
}
style.css样式表:
#box{
color:#FFFF00;
font-size:25px;
}
body ul {
margin:0;padding:0;
font-size:15px;
}
#head{
width:100%;
height:30px;
background:url(images/CP_page.png) repeat-x;
}
#head .logo{
width:100px;
height:30px;
float:left;
}
#head .logo img{
display:block;
}
#head .member{
width:100px;
height:30px;
/*background:#FFDE96;*/
float:right;
text-align:center;
line-height:30px;
cursor:pointer;
/*position:relative;*/
}
#head .member ul{
position:absolute;
width:100px;
background:#FDFDFD;
list-style:none;
float:right;
top:35px;
border:1px solid #999;
display:none;
}
#head .member:hover{
background:#808000;
}
#head .member ul li{
height:25px;
line-height:25px;
/*display:inline; letter-spacing:1px;字体间距*/
}
}
#head .member ul a{
text-decoration:none;
color:#333;
display:block;
background:url(images/arrow_down.jpg) no-repeat 3px center;
}
#head .member ul a:hover{
background:#fc0;
display:block;
}
#head .login{
float:right;
margin-right:5px;
width:50px;
top:5px;
height:30px;
/*background:#FFDE96;*/
text-align:center;
cursor:pointer;
line-height:30px;
}
#screen{
position:absolute;
top:0;
left:0;
width:550px;
height:550px;
z-index:9998;
background:#000;
filter:alpha(opacity=30);/*对ie有效*/
opacity:0.3;/*对谷歌,火狐有效*/
display:none;
}
#login{
width:350px;
height:250px;
border:1px solid #999;
position:absolute;/*/设置之后才可以设置top,left'*/
background:#fff;
z-index:9999;
display:none;
}
#login h2{
margin:0px;
padding:0px;
text-align:center;
background: url(images/CP_page.png) repeat-x;
cursor:move;
}
#login h2 img{
float:right;
margin-top:8px;
margin-right:8px;
cursor:pointer;
position:relative;
}
#login div.user,#login div .pass{
font-size:15px;
color:#666;
text-align:center;
padding:20px 0;
}
#login input.text{
width:230px;
height:25px;
font-zise:15px;
border:1px solid #ccc;
background:#fff
}
#login input.submit{
width:105px;
height:45px;
background:url(images/button_user.png) no-repeat;
border:none;
color:#fff;
font-size:20px;
cursor:pointer;
}
#login .login_foot{
font:size:16px;
float:right;
margin-top:15px;
margin-right:15px;
color:#999;
}
demo3.js执行效果的javascript代码:
/***************连缀:链式编程*************************/
/*
Base.getById('box').css('colr','red').html('').click(function(){
alert('');
}));
Base.getById('box');//返回的divEelement
Base.getById('box').css('colr','red');//返回的是Base对象
*/
window.onload=function(){
//alert($().getById('box'));
//$().getById('box').css('color','red').css('backgroundColor','black');
//$().getByTagName('p').css('color','green').html('标题').click(function(){
//alert('测试');
//});
//$().getById('box').css('font-size','20px');
//获取外部样式表的属性值
//alert($().getById('box').css('font-size'));
//$().getClass('pclass').css('color','red');
//$().getClass('pclass').getElement(2).css('color','red');
//$().getClass('pclass','aaa').css('color','red');
$().getClass("member").hover(function(){
$().getByTagName("ul").show();
},function(){
$().getByTagName("ul").hide();
});
alert(document.documentElement.clientWidth+","+document.documentElement.clientHeight);
/***************下面是设置登陆框*******/
//把下面的代码封装到自定义库中
/*
var left=(document.documentElement.clientWidth-350)/2;
var top=(document.documentElement.clientHeight-250)/2;
$().getById("login").css("top",top+"px").css("left",left+"px");
window.onresize=function(){
var left=(document.documentElement.clientWidth-350)/2;
var top=(document.documentElement.clientHeight-250)/2;
$().getById("login").css("top",top+"px").css("left",left+"px");
}*/
var login=$().getById("login");
var screen=$().getById("screen");
//;
login.center(350,250).resize(function(){
//login.center(350,250)
//随着浏览器改变重置居中
if(login.css("display")=="block"){//执行动态锁频
screen.lock();
}
});
//设置点击按钮时显示登陆框
$().getClass("login").click(function(){
login.center(350, 250);
login.css("display","block");
screen.lock();
});
//点击取消按钮隐藏登陆框
$().getClass("close").click(function(){
login.css("display","none");
screen.unlock();
});
//拖拽流程:
//1.先点下去
//2.在点下的物体被选中,进行move移动
//3.抬起鼠标,停止移动
//点击某个物体,用oDiv即可,move和up是全局区域,也就是整个文档通用,应该用document
login.drag();
};
到这里就可实现上面的登陆窗口效果