提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  其他

当前栏目

事件对象event和计时器

事件对象 Event 计时器
2023-09-14 08:58:30 时间 
事件对象：event
    属性：
        srcElement事件源对象
        keyCode 键盘按键Ascii码

window方法：
    定时器：
    1)setTimeout();//n毫秒后执行一次
    2)setInterval();//每隔n秒执行一次
    这两个方法都有个返回值,返回一个定时器id,可以定义一个变量接收
    清除定时器方法:
    setTimeout()对应的是 clearTimeout(id);
    setInterval()对应的是 clearInterval(id);
<html>
    <head>
    
    </head>
    
    <body>
        <div onclick="show1()">aaaa</div>
        <h2 onclick="show1()">bbb</h2>
        <p onclick="show1()">www</p>
    </body>
    
    <script>
        //弹出对应的内容
        function show(obj){
            alert(obj.innerText);
        }
        //我不希望使用this关键字，
        function show1(){
            alert(event.srcElement.innerText);
        }
    </script>
</html>
View Code
<html>
    <head>
    
    </head>
    
    <!--<body onkeypress="show()">-->
    <body onkeyup="show()">
        <input type="text" onkeyup="if(this.value!=this.value.toUpperCase())this.value=this.value.toUpperCase()"/>
    </body>
    <script>
        function show(){
            alert(event.keyCode);
            if(event.keyCode=="27"){
                window.close();
            }
        }
    </script>
</html>
View Code
<html>
    <head>
    <!--定时器Interval-->
    </head>
    <body>
        <div id="one" style="color:red;font-size:10cm;text-align:center">
        0
        </div>
        <input type="button" onclick="stop1()" value="stop"/>
        <input type="button" onclick="start1()" value="start1"/>
    </body>
    <script>
        var one=document.getElementById("one");
        var i=1;
        var dt="";
        function start1(){
            dt=setInterval(function(){
                one.innerText=i;
                i++;
            },"100");
        }
        
        function stop1(){
            clearInterval(dt);
        }
    </script>
</html>
定时器
<html>
    <head>
    <!-- 不做了，思路：
        按enter键停止，将xs，ys替换为0，再次按，判断xs和ys是否为0，是的话，讲根据fx给xsys赋值。
        实现鼠标点哪往哪里走：获取鼠标的坐标，和现在的左边，确定应该往x走多少，y走多少，根据x y的值调走的速度
    -->
    </head>
    <body onkeydown="opt()">
        <img border="0" id="ren" src="images/q_1.jpg" style="position:absolute;left:0px;top:0px;">
    </body>
    <script>
        var ren=document.getElementById("ren");
        var fx="q";
        function transStr(obj){
            //return obj.substring(obj.lastIndexOf("/")+1,obj.length);
            return obj.substr(obj.lastIndexOf("/")+1);
        }
        function changetu(){
            if(transStr(ren.src).charAt(2)=="1")
                ren.src="images/"+fx+"_2.jpg";
            else
                ren.src="images/"+fx+"_1.jpg";
        }
        
        
        function start1(){
            setInterval(function(){
                run();
                changetu();
            },400);
        }
        start1();
        function opt(){
            var code=event.keyCode;
            switch(code){
            case 37://左
                fx="z"
                ys=0;
                xs=-5;
                break;
            case 39://右
                fx="y";
                ys=0;
                xs=5;
                break;
            case 38://上
                fx="h";
                xs=0;
                ys=-5;
                break;
            case 40://下
                fx="q";
                xs=0;
                ys=5;
                break;
            }
        }
        var x=0;
        var y=0;
        var xs=0;
        var ys=0;
        function run(){
            x+=xs;
            y+=ys
            ren.style.left=x;
            ren.style.top=y;
        }
    </script>
</html>
走路游戏
事件 event window.event
事件对象属性：
    1、srcElement 事件源对象
    2、keyCode 事件发生时候的键盘码 keypress keydown keyup
    3、clientX，clientY  相对于窗口鼠标的x坐标y坐标
    4、screenX、screenY  相对于屏幕
    5、returnValue
    6、cancelBubble 取消冒泡(取消剩下的事件)+
<html>
    <head>
    
    </head>
    
    <body>
        <div id="one"></div>
    </body>
    <script>
        var one=document.getElementById("one");        
        
    window.document.onmousemove=function test(e){//我们将这个代码在IE执行正常，在火符却失效，因为火符不能直接获取event对象，按直接在body标签里面加事件，使用参数获取不到所以用另一种方式绑定事件，但这样在ie里面却出现问题，得到的是undefined
    //所以我们使用逻辑控制试试
            var ev=e || window.event;//注意，这个e是window处理过的event对象，就是火符得到的参数
            
            var cx=ev.clientX;
            var cy=ev.clientY;
            var sx=ev.screenX;
            var sy=ev.screenY;
            
            var str="clientX="+cx+" clientY="+cy+" screenX="+sx+" screecY="+sy;
            one.innerText=str;
            window.status=str;//window的状态栏
            window.document.title=str;
        }
    </script>
</html>
鼠标坐标例子
<html>
    <head>
    <!-- 图跟随鼠标移动-->    
    </head>
    
    <body>
        <img id="tu" src="images/srf.jpg" style="position:absolute; left:400; top:200px;"  />
    </body>
    
    <script>
        var tu=document.getElementById("tu");
        document.onmousemove=function test(e){
            var ev=e || window.event;
            tu.style.top=ev.clientY;
            tu.style.left=ev.clientX;
        }
    </script>
</html>
图跟随鼠标移动
<html>
    <!-- 
        拖拽游戏
    可以给one里面生成一个x，点击x删除div，我就不做了 -->
    <head>
        <style type"text/css">
            .one{
                position:absolute; 
                width:200px;
                height:40px;
                background-color:red;
            }
        </style>
    </head>
    
    <body>
        <input type="button" onclick="cre()"/>
        <!--<div id="one" style=""></div>-->
    </body>
    <script>
        var one=null;
        var dx=0;//点的位置
        var dy=0;
        var sx=0;//div的位置
        var sy=0;
        //鼠标按下可以拖动，鼠标松开不能拖动，操作针对的是DIV内容。
        var tuodong=false;
        function cre(){//我控制它只能产生一个DIV
            if(one!=null){
                return;
            }
                one=document.createElement("div");
                one.className="one";
                one.style.top="100px";
                one.style.left="200px";//刚才在下面移动的方法中报参数无效，就是指的是获取的top和left的值无效，在这里给one的style的top等属性赋值保险一点
                document.body.appendChild(one);
            
            
            //因为只有创建了才有one对象赋值，所以，前面这里会报错，要放在cre里面
            one.onmousedown=function(e){
                var ev=e || window.event;
                dx=ev.clientX;
                dy=ev.clientY;
                sx=parseInt(one.style.left);
                sy=parseInt(one.style.top);
                if(!tuodong){
                    tuodong=true;
                }
            }
            document.onmousemove=function(e){
        //刚刚的效果不完善，因为鼠标按下移动后，div的top和left会变成鼠标的位置，我们希望的效果是鼠标放在div的某一个位置而不受影响
                var ev=e || window.event;
                if(tuodong){
                    //alert(one.style.top);//获取的是空，需要使用这个alert(one.offsetTop);                
                    one.style.top=ev.clientY-(dy-sy);
                    one.style.left=ev.clientX-(dx-sx);
                }    
            }
        }
        //var tu=document.getElementById("one");
        
        document.onmouseup=function(e){
            if(tuodong){
                tuodong=false;
            }
        }
    </script>
</html>
拖拽游戏
<html>
    <head>
    
    </head>
    
    <!--<body oncontextmenu="return show()" onbeforeunload="window.event.returnValue='你小心点'">-->
    <body onclick="one()">
        <img src="images/srf.jpg" onclick="two()">
        <script>
            <!-- 去掉文本菜单方法-->
            
            /*1、function show(){
                alert("000000");
                return false;
            }*/
            function show(){
                alert("oooooo");
                window.event.returnValue=false;
            }
            
            function one(){
                alert("######");
            }
            
            function two(){
            //我们发现点击图片的话，先执行方法two再执行方法one，只是因为图片也处于body体内，为了避免重复触发事件，可以使用cancelBubble
                alert("@@@@@@");
                
                var ev=window.event.cancelBubble=true;
                
            }
        </script>
    </body>
</html>
下面两个属性

 

相关文章