CSS解决W3C和IE BOX MODEL不兼容问题

css代码:

[cce_html]
.box-sizing {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -o-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
  }
[/cce_html]

1、W3C的标准Box Model:
/*外盒尺寸计算(元素空间尺寸)*/
Element空间高度 = content height + padding + border + margin
Element 空间宽度 = content width + padding + border + margin
/*内盒尺寸计算(元素大小)*/
Element Height = content height + padding + border (Height为内容高度)
Element Width = content width + padding + border (Width为内容宽度)

2、IE)传统下Box Model(IE6以下,不含IE6版本或“QuirksMode下IE5.5+”):
/*外盒尺寸计算(元素空间尺寸)*/
Element空间高度 = content Height + margin (Height包含了元素内容宽度,边框宽度,内距宽度)
Element空间宽度 = content Width + margin (Width包含了元素内容宽度、边框宽度、内距宽度)
/*内盒尺寸计算(元素大小)*/
Element Height = content Height(Height包含了元素内容宽度,边框宽度,内距宽度)
Element Width = content Width(Width包含了元素内容宽度、边框宽度、内距宽度)

语法:
box-sizing : content-box || border-box || inherit

取值说明

1、content-box:此值为其默认值,其让元素维持W3C的标准Box Model,也就是说元素的宽度/高度(width/height)等于元素边框宽度(border)加上元素内边距(padding)加上元素内容宽度/高度(content width/height)即:Element Width/Height = border+padding+content width/height。

2、border-box:此值让元素维持IE传统的Box Model(IE6以下版本),也就是说元素的宽度/高度等于元素内容的宽度/高度。(从上面Box Model介绍可知,我们这里的content width/height包含了元素的border,padding,内容的width/height【此处的内容宽度/高度=width/height-border-padding】)。

 

box-sizing现代浏览器都支持,但IE家族只有IE8版本以上才支持,虽然现代浏览器支持box-sizing,但有些浏览器还是需要加上自己的前缀,Mozilla需要加上-moz-,Webkit内核需要加上-webkit-,Presto内核-o-,IE8-ms-,所以box-sizing兼容浏览器时需要加上各自的前缀.

kof

97一共27个人物
光头2个
帽子3个
几个女的。7个
女队多人一个队。
飞行道具9个,选A
第一代KOF 1994年
罗伯特和dna互黑
1P选择2P,选第三项
夕阳于月 八神广播剧
八杰高杰之电热毯
暴走八神ac 左右左右
小表情C

暴风雪小说,选 A 阿加沙
第一枚邮票英国A
第一座武汉大桥,第一座自行建造南京大桥
大珠小珠:琵琶
东方瑞士 大理
早上吃苹果最好
孔雀舞是傣族民间舞
白令海峡 美洲和亚洲
100米记录 9.58秒
1588年 英国打败西班牙
亨利八世发布至尊法案
奥运会 京 字
不是SNK的是暗夜黎民
德国 第51届
衡山在南方
2010西班牙magnet:?xt=urn:btih:
宋朝 指南针用于宋朝航海
德国 鸟蛋博物馆
宋徽宗赵佶
诗圣杜甫
马赛曲 法国
重力加速度9.8
行尸走肉,安得利亚和艾米是姐妹
股票上涨25%
秦国统一后 韩非子变法
齐白石画虾
细胞能装27分之一
东方朔,元宵节
D元首 不是春节的别称
唐朝寒食节和清明二合一

鸡兔同笼,18个头,48只腿,鸡12只,兔6只
21头 兔子15只

javascript 网页拖动实例

HTML代码:

[cce_html]
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <title>拖动</title>
    <link href="css/main.css" rel="stylesheet" />
    <script src="js/drag1.js"></script>
</head>

<body>
    <div class="loginPanel" id="loginPanel">
        <div style="position: relative; z-index: 1;">
            <div class="ui_boxyClose" id="ui_boxyClose"></div>
        </div>
        <div class="login_logo_webqq"></div>
        <div class="inputs">
            <div class="sign-input"><span>帐 号:</span><span><input autocomplete="on" name="u" id="u" type="text" style="ime-mode: disabled" class="input01" tabindex="1" value="QQ号码或Email帐号" onFocus="if (value =='QQ号码或Email帐号'){value =''}" onBlur="if (value ==''){value='QQ号码或Email帐号';}" /></span></div>
            <div class="sign-input"><span>密 码:</span><span><input name="p" id="p" maxlength="16" type="password" class="input01" tabindex="2" /></span></div>
        </div>
        <div class="bottomDiv">
            <div class="btn" style="float: left"></div>
            <div>
                <div id="loginState" class="login-state-trigger login-state-trigger2 login-state" title="选择在线状态">
                    <div id="loginStateShow" class="login-state-show online">状态</div>
                    <div class="login-state-down">下</div>
                    <div class="login-state-txt" id="login2qq_state_txt">在线</div>
                    <ul id="loginStatePanel" class="statePanel login-state" style="display: none">
                        <li id="online" class="statePanel_li">
                            <div class="stateSelect_icon online"></div>
                            <div class="stateSelect_text">我在线上</div>
                        </li>
                        <li id="callme" class="statePanel_li">
                            <div class="stateSelect_icon callme"></div>
                            <div class="stateSelect_text">Q我吧</div>
                        </li>
                        <li id="away" class="statePanel_li">
                            <div class="stateSelect_icon away"></div>
                            <div class="stateSelect_text">离开</div>
                        </li>
                        <li id="busy" class="statePanel_li">
                            <div class="stateSelect_icon busy"></div>
                            <div class="stateSelect_text">忙碌</div>
                        </li>
                        <li id="silent" class="statePanel_li">
                            <div class="stateSelect_icon silent"></div>
                            <div class="stateSelect_text">请勿打扰</div>
                        </li>
                        <li id="hidden" class="statePanel_li">
                            <div class="stateSelect_icon hidden"></div>
                            <div class="stateSelect_text">隐身</div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</body>

</html>

[/cce_html]

javascript代码:

[cce_js]
[cce]
//取class函数
function getByClass(clsName, parent) {
    var oParent = parent ? document.getElementById(parent) : document,
        eles = [],
        elements = oParent.getElementsByTagName('*');
    for (var i = 0; i < elements.length; i++) {
        if (elements[i].className == clsName) {
            eles.push(elements[i]);
        }
    }
    return eles;
}
//面板操作
window.onload = dray;

function dray() {
    var oTitle = getByClass("login_logo_webqq", "loginPanel")[0];
    //拖动
    oTitle.onmousedown = fnDown;
    //关闭
    var oClose = document.getElementById('ui_boxyClose');
    oClose.onclick = function() {
        var oBox = document.getElementById('loginPanel');
        oBox.style.display = 'none';
    }
}
//面板按下
function fnDown(event) {
    event = event || window.event;
    var oDrag = document.getElementById('loginPanel');
    // 光标和面板之间的距离
    disX = event.clientX - oDrag.offsetLeft;
    disY = event.clientY - oDrag.offsetTop;
    // 光标移动时执行
    document.onmousemove = function(event) {
        fnMove(event, disX, disY);
    };
    // 光标停止时执行
    document.onmouseup = function() {
        document.onmousemove = null;
        document.onmouseup = null;
    }
}
// 光标移动
function fnMove(e, posX, posY) {
    var oDrag = document.getElementById('loginPanel'),
        // 移动后盒子需要显示的准确位置
        l = e.clientX - posX,
        t = e.clientY - posY,
        // 窗口显示的高和宽
        winW = document.documentElement.clientWidth || document.body.clientWidth,
        winH = document.documentElement.clientHeight || document.body.clientHeight,
        // 显示的最大高的宽
        maxW = winW - oDrag.offsetWidth,
        maxH = winH - oDrag.offsetHeight;
    // 判断显示的边界
    if (l < 0) {
        l = 10;
    } else if (l > maxW) {
        l = maxW - 10;
    }
    if (t < 10) {
        t = 10;
    } else if (t > maxH) {
        t = maxH;
    }
    // 设置盒子显示的位置
    oDrag.style.left = l + 'px';
    oDrag.style.top = t + 'px';

}

[/cce]
[/cce_js]

显示效果:

jdfw

javascript常用定位坐标或大小或距离

元素定位:

event.clientX 相对文档的水平座标
event.clientY 相对文档的垂直座标
event.offsetX 相对容器的水平坐标
event.offsetY 相对容器的垂直坐标

元素窗口相对距离:

offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度
offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置
offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置

窗口有滚动条时:

scrollHeight: 获取对象的滚动高度。
scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离
scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离
scrollWidth:获取对象的滚动宽度

窗口的大小:

网页可见区域宽: document.body.clientWidth;
网页可见区域高: document.body.clientHeight;
网页可见区域宽: document.body.offsetWidth   (包含边线的宽);
网页可见区域高: document.body.offsetHeight (包含边线的宽);
网页正文全文宽: document.body.scrollWidth;
网页正文全文高: document.body.scrollHeight;
网页被卷去的高: document.body.scrollTop;
网页被卷去的左: document.body.scrollLeft;

 

javascript 常用鼠标和键盘事件:

鼠标:

1.onmousedown 在用户按下任何鼠标按键触发(左,中,右都会触发)

2.clientX 和 clientY 鼠标事件发生时,鼠标指针所在的位置坐标,不包括页面滚动的距离,在event下使用,在position中,clientX相当于left,clientY相当于top;

3.onmousemove 当鼠标指针在元素内移动时触发。

4.ommouseup 当放开鼠标时触发

键盘:

1.onkeyDown 当用户按下键盘上的任意键时触发,而且如果按住不放的话会重复触发此事件

2.onkeyPress 当用户按下键盘上的字符键时触发,而且如果按住不放的话,会重复触发此事件。

3.onkeyUp 用户释放键盘上的键时触发。

4.keyCode 在event中有这个方法可以得到键盘键的键码。用来判断按下的是什么键

查看键码源码:

[cce_html]

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>
    <div style="width: 500px;height: 200px;background-color: cyan;" id="showZone"></div>
    <script>
    window.onload = function() {

        document.onkeydown = function(event) {
            var event = event || window.event;
            document.getElementById("showZone").innerHTML = event.keyCode;
        };
    }
    </script>
</body>

</html>

[/cce_html]

 

 

 

javascript 解决浏览器兼容常用封装获取class的方法

函数代码:

[cce_js]
function getbyClass (clsname,parent){//需要两个参数:类名(必选),父元素ID(可选),
	var oParent = parent?document.getElementById(parent):document,//获得父元素对象
		eles = [],//定义存放class空数组
		elements = oParent.getElementsByTagName('*');//获得父元素下所有元素
		for (var i = 0,l = element.length; i < l; i++) {//遍历数组elements
			if (element[i].className == clsname) {
				eles.push(element[i]);//相同类名添加到class数组中
			}
		}
	return eles;//返回class数组
}
[/cce_js]

使用里需要注意:

return 的结果是一个数组,默认第一个数组元素就是需要找的class,所以在使用时需要在调用后加入下标[0]

 

也可以直接封装在一个方法里使用:

getclass.js代码内容

[cce_js]
var getClass = {
	getC: function(className,parent) {
		 var oParent=document.getElementById(parent)||document;
		 	 eles = [];
		 	 elements = oParent.getElementsByTagName('*');
		 	 for (var i = 0,l=elements.length; i < l; i++) {
		 	  	if (elements[i].className==className) {
		 	  		eles.push(elements[i]);
		 	  	}
		 	  	
		 	  }
		 	  return eles;

	}
};
[/cce_js]

javascript 用户登陆事件案例

代码:

[cce_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:blue;position:absolute;right:4px;top:6px;}
  </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){
           // 执行代码
           ele.addEventListener(type,hander);//增加事件,不支持IE8以下
        }
        // 显示登录层函数
        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"></span>
  </div>
</body>
</html>
[/cce_js]

效果:

jdfw

javacrpt 事件跨浏览器封装方法程序包:

封装方法的包:event.js

[cce_js]
 var zjsj = { //定义对象
     //定义增加事件方法
     addsj: function(element, type, func) {
         //判断是否是除IE6.7.8之外的浏览器
         if (element.addEventListener) {
             element.addEventListener(type, func, false);
         } else if (element.attachEvent) { //判断是否是IE浏览器
             element.attachEvent('on' + type, func);
         } else {
             element['on' + type] = func; //判断是否是其它浏览器
         }
     },
     //定义删除事件方法
     removesj: function(element, type, func) {
         //判断是否是除IE6.7.8之外的浏览器
         if (element.removeEventListener) {
             element.removeEventListener(type, func, false);
         } else if (element.detachEvent) { //判断是否是IE浏览器
             element.detachEvent('on' + type, func);
         } else {
             element['on' + type] = func; //判断是否是其它浏览器.element.使用element[]代替。
         }
     },
     //获取event
     hqevent: function(event) {
         return event ? event : window.event;
     },
     //获取对象类型
     hqtype: function(event) {
        return event.type;
     },
     //获取事件目标
     hqelement: function(event) {
      if (event.target) {
        return event.target;
      } else {
        return event.srcElement;//IE属性
      }
     },
     //阻止事件冒泡
     zzsj:function(event) {
      if (event.stopPropagation) {
        return event.stopPropagation();
      } else {
        return  event.cancelBubble('true');//IE属性
      }
     },
     //阻止默认行为
     zzmrsj: function(event) {
      if (event.preventDefault) {
        return event.preventDefault();
      } else {
        return event.returnValue('false');//IE属性
      }
     }
      

 };

[/cce_js]

调用案例:

[cce_js]
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="event.js"></script>
</head>

<body>
    <div id="box">
        <input type="button" id="btn" value="类型">
        <input type="button" id="btn2" value="目标">
        <input type="button" id="btn3" value="阻止冒泡">
    </div>
    <a href="test.html" id="go">跳转</a>
    <script>
    var btn = document.getElementById('btn'),
        box = document.getElementById('box'),
        go = document.getElementById('go'),
        event = zjsj.hqevent(event);
    //获取事件类似
    function showMsg(e) {
        alert(zjsj.hqtype(e));
    }
    //获取事件目标
    function showMb(e) {
        alert(zjsj.hqelement(e).nodeName);//获取事件的元素名
    }

    function showBox() {
        alert('我是box');
    }
    //阻止事件冒泡
    function showZz(e) {
        alert("阻止冒泡");
        zjsj.zzsj(e);
    }
    //阻默认行为
    function showGo(e) {
        zjsj.zzmrsj(e);//阻止A的行为
    }
    
    zjsj.addsj(btn, 'click', showMsg);
    zjsj.addsj(btn2, 'click', showMb);
    zjsj.addsj(box, 'click', showBox);
    zjsj.addsj(btn3, 'click', showZz);
    zjsj.addsj(go, 'click', showGo);
    </script>
</body>

</html>

[/cce_js]

 

javascript 事件对象

事件对象:

在触发DOM上的事件时都会产生一个对象,事件对象event可以用e或ev代替

1.DOM中事件对象

(1)获取对象类型.type属性

案例:

[cce_js]
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <input type="button" value="按钮" id="btn">
  <script>
  var btn = document.getElementById('btn');
  function showMes(event){
    alert(event.type);
  }
  btn.onclick = showMes;
  </script>
</body>
</html>
[/cce_js]

显示效果:event.type直接显示事件的类型

(2)target属性,获取事件目标

案例:

[cce_js]
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <input type="button" value="按钮" id="btn">
  <script>
  var btn = document.getElementById('btn');
  function showMes(event){
    alert(event.target);
  }
  btn.onclick = showMes;
  </script>
</body>
</html>
[/cce_js]

显示效果:

案例:使用.target.nodeName 显示节点名称

[cce_js]
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <input type="button" value="按钮" id="btn">
  <script>
  var btn = document.getElementById('btn');
  function showMes(event){
    alert(event.target.nodeName);
  }
  btn.onclick = showMes;
  </script>
</body>
</html>
[/cce_js]

显示效果:

(3)stopPropagation()方法,用于阻止事件冒泡

案例:

[cce_js]
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
<div id="box">
  <input type="button" value="按钮" id="btn">
</div>
  
  <script>
  var btn = document.getElementById('btn');
  var box = document.getElementById('box');
  function showMes(event){
    alert('我是btn');
    event.stopPropagation();//阻止事件冒泡
  }
  function showBox(){
    alert('我是box');
  }
  btn.onclick = showMes;
  box.onclick = showBox;
  </script>
</body>
</html>
[/cce_js]

显示效果:只显示btn的内容,不再显示box的内容

4)preventDefault()方法,阻止事件的默认行为

案例:

取消a的默认跳转,一般常用于app中让a在当前页跳转

[cce_js]
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
<div id="box">
  <a href="test.html" id="go">跳转</a>
</div>
  
  <script>
  var go = document.getElementById('go');
  function showMes(event){
    event.preventDefault();//阻止a的默认跳转行为
  }
  go.onclick = showMes;
  </script>
</body>
</html>
[/cce_js]

显示效果:a被点击之后不再跳转

2.IE中使用的事件对象

(1)type属性,获取事件的类型和dom中使用方法一样

(2)srcElement 属性,获取事件的目标

案例:

[cce_js]
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
<div id="box">
<input type="button" id="btn" value="按钮">
 
</div>
  
  <script>
    var btn = document.getElementById('btn');
    function showMsg(event){
      event= event || window.event; //window.event IE8以下调用方式
      alert(event.srcElement);//获取IE下的事件目标
    }
    btn.attachEvent('onclick',showMsg);//绑定IE事件

  </script>
</body>
</html>
[/cce_js]

显示效果:

(3)cancelBubble 属性,只用于阻止当前事件,并不阻止所有事件冒泡,设置为true为阻止,设置为false表示不阻止。

[cce_js]
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>
    <div id="wrap">
        <div id="box">
            <input type="button" id="btn" value="按钮">
        </div>
    </div>
    <script>
    var btn = document.getElementById('btn');
    var box = document.getElementById('box');
    var wrap = document.getElementById('wrap');

    function showMsg(event) {
        event = event || window.event; //window.event IE8以下调用方式
        event.cancelBubble('true'); //阻止当前事件执行
        alert('我是btn'); //获取IE下的事件目标
    }

    function showBox(event) {
        event = event || window.event; //window.event IE8以下调用方式
        alert('我是box'); //获取IE下的事件目标
    }

    function showWrap(event) {
        event = event || window.event; //window.event IE8以下调用方式
        alert('我是Wrap'); //获取IE下的事件目标
    }
    btn.attachEvent('onclick', showMsg); //绑定IE事件被阻止
    box.attachEvent('onclick', showBox); //绑定IE事件可执行
    wrap.attachEvent('onclick', showWrap); //绑定IE事件可执行
    </script>
</body>

</html>

[/cce_js]

显示效果:

jdfw

(4)returnValue属性,用于阻止事件的默认行为,设置为false表示阻止事件的默认行为

案例:

[cce_js]
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>
    <a href="test.html" id="go">跳转</a>
    <script>
    var go = document.getElementById('go'),
     

    function showGo(event) {
        event=event || window.event;
        event.returnValue('false');
    }

    go.attachEvent('onclick', showGo);
    // go.onclick=showGo;
    </script>
</body>

[/cce_js]

显示效果:

jdfw