js上的对象就是创建一个方法来实现的

<script>
function A()
{
    this.abc=12;  //定义对象A种属性abc
}
A.prototype.show=function()   //在对象之外定义方法
{
     alert(this.abc);
}

function B()
{
    A.call(this);  //继承A得属性
}

for(var i in A.prototype)  //继承A的方法
{
    B.prototype[i]=A.prototype[i];
}


B.prototype.fn=function()
{
    alert("abc");
}

var a=new A();
var b=new B();
b.fn();

</script>

Event对象

<script>
document.onkeydown=function(ev)
{
    var oEvent=ev||event;   //还有ctrlKey shiftKey altKey
     //alert(oEvent.keyCode); //测试你按键对象的keycode
     if(oEvent.keyCode==37)//方向键左
     {
        var div1=document.getElementById("s1");
        div1.style.left=div1.offsetLeft-10+"px";
     }
     if(oEvent.keyCode==39)//方向键右
     {
        var div1=document.getElementById("s1");
        div1.style.left=div1.offsetLeft+10+"px";
     }
}
</script>

Event对象的例子

div的拖拽

css代码

js代码

<script>
window.onload=function()
{
    var oDiv=document.getElementById("div1");
    var disX=0;
    var disY=0;
    oDiv.onmousedown=function(e){
        var oEvent=e||event;
        disX=oEvent.clientX-oDiv.offsetLeft;//鼠标点击出距离左边的距离减去div距离左边的额距离
        disY=oEvent.clientY-oDiv.offsetTop;

        var oBox=document.createElement("div");  //创建一个div但是只是显示边框
        oBox.className="box";
        oBox.style.width=oDiv.offsetWidth+"px";
        oBox.style.height=oDiv.offsetHeight+"px";

        oBox.style.left=oDiv.offsetLeft+"px";
        oBox.style.top=oDiv.offsetTop+"px";

        document.body.appendChild(oBox);

        document.onmousemove=function(e) //当鼠标拖动的时候
        {
            var oEvent=e||event;
            var l=oEvent.clientX-disX;  //div的距离就是点击处减去(此点到div左边框的距离)
            var t=oEvent.clientY-disY;

            oBox.style.left=l+"px";
            oBox.style.top=t+"px";
        }
        document.onmouseup=function(e)//当松开鼠标的时候
        {
            document.onmousemove=null;
            document.onmouseup=null;

            oDiv.style.left=oBox.offsetLeft+"px"; //移动之前的div,
            oDiv.style.top=oBox.offsetTop+"px";
            document.body.removeChild(oBox);
        }
        return false;

    }


}
</script>

html代码

<div id="div1" >

</div>
滑动调整开关

css代码

<style>
#parent{
width:600px;
height:20px;
background:#ccc;
position:relative;
margin:10px auto: ;}

#div1{
width:20px;
height:20px;
background:red; 
position:absolute;
left:0;top:0;}

#div2{
width:400px;
height:400px;
background:black;
filter:alpha(opacity:0);
opacity:0;
position:absolute;
top:100px;left:600px;}
#div3{width:0;height:0;background:red;position:absolute;top:100px;}

</style>

js代码

<script>
window.onload=function()
{
    var oDiv=document.getElementById("div1");   //拖动的小方块
    var par=document.getElementById("parent");  //长栏
    var oDiv2=document.getElementById("div2");  //变大变小的div
    var oDiv3=document.getElementById("div3");  //改变透明度的div
    var disX=0; 

    oDiv.onmousedown=function(e){  //按下小方块
        var oEvent=e||event;
        disX=oEvent.clientX-oDiv.offsetLeft; //点击小方块到小方块左边框的距离



        document.onmousemove=function(e) 
        {
            var oEvent=e||event;
            var l=oEvent.clientX-disX;  //鼠标点击点到浏览器左边框的距离
             if(l<0)  //不能超出长方框
             {
                l=0;
             }
             else if(l>par.offsetWidth-oDiv.offsetWidth) //不能超出长方框
             {
                l=par.offsetWidth-oDiv.offsetWidth;
             }

            oDiv.style.left=l+"px";  //拖动后小方块的距离

            var scale=l/(par.offsetWidth-oDiv.offsetWidth); //拖动小方块scale会适当变化,向左缩小,向右放大
            document.title=scale;

            oDiv3.style.width=400*scale+"px";
            oDiv3.style.height=400*scale+"px";

            oDiv2.style.filter='alpha(opacity:'+scale*100+')';
            oDiv2.style.opacity=scale;

        }
        document.onmouseup=function(e)
        {
            document.onmousemove=null;
            document.onmouseup=null;
        }
        return false;  //排除火狐的bug

    }


}
</script>
限制输入框输入英文和文字

js代码

window.onload=function()
{

    //input只能填写数字
    var oTxt=document.getElementById("txt1");

    oTxt.onkeydown=function(e)  //限制非数字输入到input中,keyCode=8是退格键
    {
        var oEvent =e||event;
        if(oEvent.keyCode!=8 && (oEvent.keyCode<48 || oEvent.keyCode>57))
            {
                return false;
            }
    }
}
自定义右键浏览器空白处选项卡
<script>
document.oncontextmenu=function(e)//当点击鼠标右键出现div
{
    var oEvent=e||event;
    var oDiv=document.getElementById("div1");

    oDiv.style.display="block";
    oDiv.style.left=oEvent.clientX+"px";
    oDiv.style.top=oEvent.clientY+"px";
    return false;   //不让默认的选项卡出现
}
document.onclick=function()  //当点击空白处div消失
{
    var oDiv=document.getElementById("div1");
    oDiv.style.display="none";
}
</script>