2-3DOM对象方法

一、文本框

<textarea name="" id="txt" cols="30" rows="10"></textarea>
    <script>
        var txt = document.getElementById("txt");
        txt.onchange = function(){
            console.log(1)
        }
    </script>

二、获取username、email

<form name="form" id="form">
        <input type="text" name="username">
        <input type="text" name="email">
        <input type="submit">
    </form>
    <script>
        var form = document.getElementById("form");
        form.onsubmit = function(){
            console.log(this.username.value)
            console.log(this.email.value)
            return false;
        }
    </script>

三、获取窗口的宽度

• window.innerWidth 获取窗口的宽度

  <script>
        window.onresize = function(){
            console.log(window.innerWidth)
        }
    </script>
  

  四、文本框输入显示字数

  

 <p>你还可以输入<em id="section">0</em>/150</p>
    <textarea id="txt" cols="30" rows="10"></textarea>
    <script>
        var em = document.getElementById("section");
        var txt = document.getElementById("txt");
        txt.onkeyup = function(){
            var length = this.value.length;
            em.innerHTML = length;
        }
    </script>

五、window对象

BOM(browser object omdel)浏览器对象模型

5-1、window.confirm打开网页弹出对话框

window.alert()
window.prompt()
window.confirm()

• 功能：显示一个带有指定信息并且包含确定和取消按钮的对话框。点击确定返回true,取消返回false

  <script>
        // window.alert(1)
       // window.prompt("请输入你的年龄")
       window.confirm("是否支付")
    </script>
  

  5-2、window.prompt在对话框输入后显示网页内容

  

<div>
        <p>
            <span>小米9 </span><button id="btn">删除</button> 
        </p>
    </div>
    <script>
        var res = window.prompt("请输入你的姓名");
        console.lgo(res)
        var btn = document.getElementById("btn");
        /* parentNo11de -->亲爸 */
        btn.onclick = function(){
            var isDelete = window.confirm("你确定删除吗");
            if(isDelete){
                btn.parentNode.style.display = "none"
            }
        }

    </script>

5-3、window.open

功能：打开一个新的窗口或查找一个已命名的窗口

<button id="btn">打开10.html</button>
    <script>
        btn.onclick = function(){
            window.open('10.html')
        }
    </script>

• window对象方法—定时器

  6-1、超时调用 setTimeout()

• 功能:在指定的毫秒数后调用函数或计算表达式

• 超时调用 间隔一段时间，执行函数，且只执行一次

• 异步

  <script>
        console.log(1)
        setTimeout(function(){
            console.log("a")
        },1000)
        console.log(2);
    </script>
  

  6-2、间歇调用 setInterval()

• 功能:每隔一段时间执行一次代码

• clearInterval()

  <script>
        setInterval(function(){
            console.log("b")
        },3000)
    </script>
  

<script>
        /* setInterval
        递归  在函数中调用函数自身 */
        function go(){
            console.log("1")
            setTimeout(go,1000)
        }
        go()
    </script>

6-3、实例 输入0-3

<!-- 使用递归每秒钟输出一个数字
         0-3
     -->
     <script>
         var a = 0;
         function go(){
             setTimeout(function(){
                console.log(a);
                a++;
                if(a<=3){
                    go();
                }
             },1000)
         }
         go();
     </script>

6-4、实例 清除定时器

<button id="btn">btn</button>
    <script>
        /*  id 1 */
        var btn =document.getElementById("btn")
        var timer = setInterval(function(){
            console.log("a")
        },3000)
        /* 清楚定时器
           clearInterval()
         */
        console.log(timer)
        btn.onclick = function(){
            clearInterval(timer)
        }
    </script>

6-5、history对象

• history对象保存了用户在浏览器中访问页面的历史记录

• 语法：history.back()

  功能:回到历史记录的上一步
  

• 功能:回到历史记录的前一步

相当于history.forward()

<a href="detail.html">detail</a>
    <button id="btn">返回detail页面</button>
    <script>
        var btn = document.getElementById("btn");
        btn.onclick = function(){
            /* 返回历史记录的前一个页面 */
            history.forward()
        }
    </script>

<a href="detail.html">detail</a>
    <button id="btn">返回detail页面</button>
    <script>
        var btn = document.getElementById("btn");
        btn.onclick = function(){
            /* 返回历史记录的前一个页面 */
            history.forward()
        }
    </script>