第四节 DOM(二)

2018-06-08  本文已影响4人  最美下雨天

1、键盘事件

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <title>网页的标题</title>
        <!--如果js中要操作的元素位于js代码块的后面,需要这么写-->

        <script type="text/javascript">
            
            window.onkeydown=function(obj){
                
                console.log(obj);
                console.log("按键"+obj.key+"被按下了")
            }
            
            window.onkeypress=function(obj)
            {
                console.log(obj);
                console.log("按键"+obj.key+"按下并松开")
            }
            
            window.onkeyup=function(obj)
            {
                console.log(obj);
                console.log("按键"+obj.key+"抬起了")
            }
            
        </script>
        
        <style type="text/css">
            
        </style>
    </head>

    <body>
        
        用户名:<input type="text" placeholder="请输入用户名"/>

    </body>

</html>

网页显示:


image.png

看下KeyboardEvent这个对象


image.png

实际开发中我们主要是用keyCode这个字段来判断
2、window对象的一些方法
confirm()方法:有返回值,返回值为true、false

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <title>网页的标题</title>
        <!--如果js中要操作的元素位于js代码块的后面,需要这么写-->

        <script type="text/javascript">
            
            var result=window.confirm("这是个确认框");
            console.log(result);
            
        </script>
        
        <style type="text/css">
            
        </style>
    </head>

    <body>
        

    </body>

</html>

网页显示:

image.png

点击确定:


image.png

prompt()方法

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <title>网页的标题</title>
        <!--如果js中要操作的元素位于js代码块的后面,需要这么写-->

        <script type="text/javascript">
            
            var result=window.prompt("请输入内容","默认文字");
            console.log(result);
            
        </script>
        
        <style type="text/css">
            
        </style>
    </head>

    <body>
        

    </body>

</html>

网页显示:


image.png

点击确定:


image.png
window.open("http://www.baidu.com");
            
window.close();

这两个方法分别是打开一个网页,关闭网页用的,但是close()方法只能关闭由open()方法打开的网页
3、定时任务

setTimeout();//只执行一次
clearTimeout();
setInterval();//重复执行
clearInterval();

做个定时任务,5s倒计时,倒计时完成后显示helloworld并且取消定时任务

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <title>网页的标题</title>
        <!--如果js中要操作的元素位于js代码块的后面,需要这么写-->

        <script type="text/javascript">
            
            var time=null;
            function intervalFn()
            {
                setInterval("showContent()",1000);
            }
            
            var tip=5;
            function showContent()
            {
                var div=document.getElementById("content");
                if(tip==0)
                {
                    div.innerHTML="hello,world";
                    
                }
                else{
                    div.innerHTML=tip;
                tip--;
                }
                
            }
            
            
        </script>
        
        <style type="text/css">
            
        </style>
    </head>

    <body>
    
    
        
        <input type="button" id="start" value="倒计时" onclick="intervalFn()"/>
        
    </br>
    <div id="content"></div>
        

    </body>

</html>

网页显示:


image.png

4、History对象


back() //加载 history 列表中的前一个 URL
forward()//加载 history 列表中的下一个 URL
go()//加载 history 列表中的某个具体页面

5、Location对象

上一篇 下一篇

猜你喜欢

热点阅读