javascript基础 BOM 第41天

2012-11-17 10:28:06 category: 第二阶段php

DOM 在哪个事件源上面，通过什么事件，产生了什么样的执行代码。

找到对象，改变属性。

方法：

Alert弹出消息框

Close关闭窗体

Confirm带有询问的提示框，返回true或false

moveBy按照指定的单位来移动单前窗体

moveTo把当前窗体移动到指定位置

print打印

prompt弹出一个输入框

open打开一个新窗口

resizeBy每次缩小指定的大小，或者变大指定大小

resizeTo调整当前窗体大小到指定大小

scrollBy每次向x或y轴滚动指定向数

scrollTo一次移动x或y位置

clearTimeout 清除定时器

setTimeout 设置定时器

setInterval 周期性执行的定时期

clearInterval 清除周期性定时期

事件：

Oncontextmenu 鼠标右击事件

onclick

onmouseover 鼠标放到上面

onmouseout 鼠标离开

属性：

Closed判断是否关闭当前窗体，如果关闭返回true

defaultStatus

status都是在状态栏那儿加文本

规律：font-size fontSize

//for in 一下你就知道

var o=document.getElementById('one').style;

for(a in o){

document.write(a+' '+o[a]+'<br>');

}

bupiannimen.html

<html>

    <head>

    </head>

    <body>

        <script>

            var js=1;

            var dt=1;

            setInterval(function(){

                str='';

                for(i=0;i<=js;i++){

                    str=str+' '+js;

                }

                //负负得正

                //正负得负

                //js这个记数值在不停的上涨,你要控制它，不能让他无限的涨上去

                //

                //如果js大于40       dt=1*-1  于是乎下面的js就变为js-1

 

                //如果js小于0        dt=-1*-1  1  于是乎下面的js=js+1

                //40-1

                //39-1

                //38-1

                if(js>=40||js<=0){

                    dt=dt*-1;

                }

                js=js+dt;

                window.status=str+'php.xlxz.org';

            },100);

        </script>

    </body>

</html>

child.html

<html>

    <head>

 

    </head>

 

    <body>

 

php.xlxz.org,

 

        <div id="hello">php.xlxz.org</div>

    </body>

 

</html>

choujiang.html

<html>

    <head>

    </head>

    <body>

        <div id="dis"></div>

        <button onclick="show(this)">抽奖</button>

        <script>

            //标志位变量，确定用户有没有点show方法，或者有没有执行show方法

            var flag=true;

 

            //定义中奖的人员名单

            var cj=['php','www','xlxz','org','php-php.com','javascript','domain','host'];

            //定义下标数值的全局变量

            var num=null;

            //记时器全器变量

            var jsq=null;

            //定义一个函数show传入一个对象

            function show(obj){

                //如果标志没有开始

                if(flag){

                    flag=false;

                    //将button变为停止

                    obj.innerHTML='停止';

                    //开始记时器

                    jsq=setInterval(function(){

                         

                        //

                        num=Math.floor(Math.random()*cj.length);

                        if(typeof(cj[num])!='undefined'){   

                            var chao=document.getElementById('dis');

                            chao.innerHTML=cj[num];

                        }   

                         

                    },50);

 

                }else{

                    //标志位开始了

                    flag=true;

                    //获取到结果

                    var d=document.getElementById('result');

                    //显示中奖人员

                    d.innerHTML+=cj[num]+'<br />';

                    //删除中奖人员

                    delete cj[num];

                    //奖obj对象的内容改为抽奖

                    obj.innerHTML='抽奖';

                    //停止记时器

                    clearInterval(jsq);

                }

            }

        </script>

        <div id="result" style="background:pink"></div>

    </body>

</html>

closed.html

<html>

    <head>

    </head>

    <body>

        <button onclick="show()">打开一个新的子窗体</button>

        <button onclick="g()">关闭</button>

        <script>

            var t=null;

            function show(){

                t=window.open('child.html','yumingming','');

            }

            function g(){

                window.close();

                if(!t.closed){

                    t.close();  

                }

            }

        </script>

    </body>

</html>

jquery.html

<html>

    <head>

        <script src="jquery-1.4.2.js"></script>

        <script>

            $(function(){

                $('div').click(function(){

                    $(this).slideUp(5000);      

                })  

            })

         

        </script>

 

    </head>

 

    <body>

 

        <div style="width:200px;height:200px;background:red"></div>

        <div style="width:200px;height:200px;background:green"></div>

        <div style="width:200px;height:200px;background:blue"></div>

        <div style="width:200px;height:200px;background:pink"></div>

 

    </body>

</html>

open.html

<body oncontextmenu="return show()">

这是主窗体

 

 

<button onclick="red()">红</button>

<button onclick="green()">绿</button>

<button onclick="blue()">蓝</button>

<button onclick="yellow()">黄</button>

 

 

<button onclick="gaibian()">改变</button>

 

 

<button onclick="re()">别忽悠我</button>

 

 

<script>

    var t=null;

    function show(){

        t=window.open('child.html','a','width=200,height=200,location=yes,menubar=yes,resizable=yes,toolbar=yes,status=yes');

         

     

        return false;

    }

 

    function gaibian(){

 

        var sd=t.document.getElementById('hello');

         

        sd.innerHTML='this is php.xlxz.org';

 

    }

 

    function re(){

        t.resizeTo(400,400);

 

    }

 

    function red(){

 

        t.document.bgColor='red';

    }

    function green(){

 

        t.document.bgColor='green';

    }

    function blue(){

 

        t.document.bgColor='blue';

    }

    function yellow(){

 

        t.document.bgColor='orange';

    }

</script>

</body>

piao.html

<html>

     

    <head>

 

    </head>

 

    <body>

 

        <div style="position:absolute;top:0px;left:0px;width:120px;height:99px;" id="shou" onmouseover="stop()" onmouseout="start()"><img src="dfz.jpg" id='im'/></div>

 

        <script>      

        </script>

        <script>

            var ts=5;

            var ls=5;

            var jsq=null;

 

        function start(){

 

            jsq=setInterval(function(){

                var img=document.getElementById('shou');

                var t=parseInt(img.style.top);

                var l=parseInt(img.style.left);

                 

                t+=ts;

                l+=ls;

 

                var im=document.getElementById('im');

             

                if(t>=document.body.offsetHeight-im.height||t<=0){

                    ts*=-1;

                }

                if(l>=document.body.offsetWidth-im.width||l<=0){

                    ls*=-1;

                }

                 

 

                img.style.top=t+'px';

                img.style.left=l+'px';

         

            },50);

        }

        start();

            function stop(){

                clearInterval(jsq);

            }

        </script>

    </body>

</html>

print.html

<a href="javascript:window.print()">打印</a>

prompt.html

<html>

    <head>

    </head>

    <body>

        <script>

            var t=window.prompt('请输入下次开奖号码','');

            var i=0;

            while(true){

                var ra=Math.ceil(Math.random()*100);

                if(ra==t){

                    alert('你中奖了,买了'+i+'次');

                    break;  

                }

                i++;

            }

        </script>

    </body>

</html>

resize.html

<html>

    <head>

    </head>

    <body>

        <button onclick="re()">调整大小</button>

        <script>

            function re(){

                window.resizeBy(-100,-100); 

            }

        </script>

    </body>

</html>

resizeTo.html

<button onclick="re()">调整</button>

 

 

<script>

    function re(){

 

        window.resizeTo(200,200);

    }

</script>

scrollBy.html

<html>

    <body onclick="show()">

        <script>

            function show(){

                window.scrollBy(50,50);

            }

        </script>

        aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa？<br>

        xlxz？<br>

        xlxz？<br>

        xlxz？<br>

        xlxz？<br>

        xlxz？<br>

        xlxz？<br>

        xlxz？<br>

        xlxz？<br>

        xlxz？<br>

        xlxz？<br>

        xlxz？<br>

        xlxz？<br>

        xlxz？<br>

        xlxz？<br>

        xlxz？<br>

        xlxz？<br>

        xlxz？<br>

        xlxz？<br>

        xlxz？<br>

        xlxz？<br>

        xlxz？<br>

        xlxz？<br>

        xlxz？<br>

        xlxz？<br>

        xlxz？<br>

        xlxz？<br>

        xlxz？<br>

        xlxz？<br>

        xlxz？<br>

        xlxz？<br>

        xlxz？<br>

        xlxz？<br>

        xlxz？<br>

        xlxz？<br>

        xlxz？<br>

        xlxz？<br>

        xlxz？<br>

        xlxz？<br>

        xlxz？<br>

        xlxz？<br>

        xlxz？<br>

        xlxz？<br>

        xlxz？<br>

        xlxz？<br>

        xlxz？<br>

        xlxz？<br>

        xlxz？<br>

        xlxz？<br>

        xlxz？<br>

        xlxz？<br>

        xlxz？<br>

        xlxz？<br>

        xlxz？<br>

        xlxz？<br>

        xlxz？<br>

        xlxz？<br>

        xlxz？<br>

        xlxz？<br>

        xlxz？<br>

        xlxz？<br>

    </body>

</html>

scrollTo.html

<html>

    <head>

    </head>

    <body onclick="show()">

        <script>

            function show(){

                window.scrollTo(0,400);

            }

        </script>

        xlxz<br>

        xlxz<br>

        xlxz<br>

        xlxz<br>

        xlxz<br>

        xlxz<br>

        xlxz<br>

        xlxz<br>

        xlxz<br>

        xlxz<br>

        xlxz<br>

        xlxz<br>

        xlxz<br>

        xlxz<br>

        xlxz<br>

        xlxz<br>

        xlxz<br>

        xlxz<br>

        xlxz<br>

        xlxz<br>

        xlxz<br>

        xlxz<br>

        xlxz<br>

        xlxz<br>

        xlxz<br>

        xlxz<br>

        xlxz<br>

        xlxz<br>

        xlxz<br>

        xlxz<br>

        xlxz<br>

        xlxz<br>

        xlxz<br>

        xlxz<br>

        xlxz<br>

        xlxz<br>

        xlxz<br>

        xlxz<br>

        xlxz<br>

        xlxz<br>

        xlxz<br>

        xlxz<br>

        xlxz<br>

        xlxz<br>

        xlxz<br>

        xlxz<br>

        xlxz<br>

        xlxz<br>

        xlxz<br>

        xlxz<br>

        xlxz<br>

        xlxz<br>

        xlxz<br>

        xlxz<br>

        xlxz<br>

        xlxz<br>

        xlxz<br>

        xlxz<br>

        xlxz<br>

        xlxz<br>

        xlxz<br>

        xlxz<br>

        xlxz<br>

        xlxz<br>

        xlxz<br>

        xlxz<br>

        xlxz<br>

        xlxz<br>

        xlxz<br>

        xlxz<br>

        xlxz<br>

        xlxz<br>

        xlxz<br>

        xlxz<br>

        xlxz<br>

        xlxz<br>

        xlxz<br>

        xlxz<br>

        xlxz<br>

        xlxz<br>

        xlxz<br>

        xlxz<br>

        xlxz<br>

        xlxz<br>

        xlxz<br>

        xlxz<br>

        xlxz<br>

        xlxz<br>

        xlxz<br>

        xlxz<br>

        xlxz<br>

        xlxz<br>

        xlxz<br>

        xlxz<br>

        xlxz<br>

        xlxz<br>

    </body>

</html>

setInterval.html

<html>

    <head>

    </head>

    <body>

        <div id="one" onmouseover="start()" onmouseout="stop()">0</div>

        <script>

            var i=0;

            var dsq=null;

        function start(){

             dsq=setInterval(function(){

                i++;

                var o=document.getElementById('one');

                o.innerHTML=i;  

                o.style.fontSize='50px';

                o.style.color='red';

                o.style.textAlign='center';

            },1);

        }

        function stop(){

            clearInterval(dsq);

        }

        </script>

    </body>

</html>

setTimeout.html

<html>

 

    <body>

        <button onclick="qcone()">清除one</button>

        <button onclick="qctwo()">清除two</button>

        <button onclick="qcthree()">清除three</button>

        <button onclick="qcfour()">清除four</button>

        <button onclick="qcfive()">清除five</button>

 

 

 

        <script>

 

 

            var one=setTimeout(red,1000);

 

 

            var two=setTimeout(green,2000);

 

            var three=setTimeout(blue,4000);

 

            var four=setTimeout(pink,6000);

 

 

            var five=setTimeout(tz,7000);

 

 

            function qcone(){

 

                clearTimeout(one);

            }

            function qctwo(){

 

                clearTimeout(two);

            }

            function qcthree(){

 

                clearTimeout(three);

            }

            function qcfour(){

 

                clearTimeout(four);

            }

            function qcfive(){

 

                clearTimeout(five);

            }

 

 

            function red(){

 

                document.bgColor='red';

            }

 

            function green(){

 

                document.bgColor='green';

            }

 

            function blue(){

 

                document.bgColor='blue';

            }

 

            function pink(){

 

                document.bgColor='pink';

            }

            function tz(){

              window.location='http://php.xlxz.org';        

            }

        </script> 

    </body>

</html>

sq.html

<html>

 

    <head>

 

    </head>

 

    <body>

 

        <div style="width:200px;height:200px;background:red" onclick="show(this)"></div>

 

 

        <script>

 

            //因为this当前对象，需要在另外一个方法当中调用，跨方法调用对象，需要设为全局的。定义一个全局变量t

            var t=null;

            //记时器同理

            var jsq=null;

            //定义一个方法show方法

            function show(obj){

 

                //将obj赋值全局变量t

                t=obj;

                //初使化记时器对象

                jsq=setInterval(function(){

 

                    //获取高，并强制取整干掉后面的px

                    var h=parseInt(t.style.height);

 

                    //自减

                    h-=1;

 

                    //如果h过小的时候，停止掉记时器对象，并且由于兼容性问题，将当前的div隐藏

                    if(h==0){

                        clearInterval(jsq);

                        t.style.display='none'; 

                    }else{

                        //修改高后的值，赋值给原先的高，记住要加位哦亲，不然没效果

                t.style.height=h+'px';  

                    }

                },10)

            }

        </script>

    </body>

</html>

status.html

<script>

    //记事本！

    var js=0;

    ds=1;

    setInterval(function(){

        var space='';

        js=js+ds;

        if(js>40||js<0){

            ds=ds*-1;

        }

        for(i=0;i<js;i++){

            space+='-'+i;

        }

        window.status=space+'php.lalalala！';

         

    },50)

</script>

javascript基础 BOM 第41天

推荐文章

推荐文章

文章归档

category

friend links