javascript基础 BOM 第41天

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

找到对象,改变属性。

方法:

Alert弹出消息框

Close关闭窗体

Confirm带有询问的提示框,返回truefalse

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

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

print打印

prompt弹出一个输入框

open打开一个新窗口

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

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

scrollBy每次向xy轴滚动指定向数

scrollTo一次移动xy位置

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>