js常用小功能总结

(一)短信延时器相关业务代码

<input type="text" value="请输入短信验证码"/><input type="button" value="点击发送验证码" id="btn"/><script>    var timer = null;    var num = 5;//记录时间的变量    //需求：点击按钮 按钮中文字显示倒计时 倒计时后又恢复可以点击的状态    var btn = document.getElementById("btn");    btn.onclick = function () {        //btn.disabled = true;        this.disabled = true;//this和btn指的都是按钮        timer = setInterval(function () {            //console.log(this);//在定时器的回调函数中this指的是window            //倒计时            num--;            btn.value = num + "秒后可再次发送";            //如果到了0就恢复可以点击的状态            if (num === 0) {                clearInterval(timer);//清理定时器                btn.disabled = false;//恢复可以点击的状态                btn.value = "点击发送验证码";//里面的文字也要恢复                num = 5;//num也要恢复成5            }        }, 1000);    };</script>

(二)定时器小demo

<input type="button" value="设定定时器" id="btn1"/><input type="button" value="清除定时器" id="btn2"/><script>    var timer = null;    var btn1 = document.getElementById("btn1");    var btn2 = document.getElementById("btn2");    btn1.onclick = function () {        //设定间歇定时器 setInterval 参数 1回调函数 2时间间隔（单位是毫秒）        timer = setInterval(function () {            console.log("起来嗨");        }, 1000);    };    btn2.onclick = function () {        //清理定时器        clearInterval(timer);    };</script>

(三)延时器小demo

<input type="button" value="设定定时器" id="btn1"/><input type="button" value="清除定时器" id="btn2"/><script>    var timerId = null;    var btn1 = document.getElementById("btn1");    var btn2 = document.getElementById("btn2");    btn1.onclick = function () {        //点击btn1设定延时定时器        //延时定时器 setTimeout 参数 1回调函数 2延迟的时间（单位是毫秒）        timerId = setTimeout(function () {            console.log("boom");        }, 3000);    };    btn2.onclick = function () {        //点击btn2清除定时器        clearTimeout(timerId);    };</script>

(四)window对象

     window.onload = function () { };    //document    //window.document    //console    //window.console    //window.alert()    //window.prompt()    //window.confirm()    //他们都属于window window可以省略

(五)窗体对象

<input type="button" value="跳转" id="btn"/><input type="button" value="关闭" id="btn2"/><script>    var win = null;    var btn = document.getElementById("btn");    var btn2 = document.getElementById("btn2");    btn.onclick = function () {        //1.地址 2.在哪里打开 3.窗口的属性        //window.open("http://www.baidu.com");        //window.open("http://www.baidu.com", "_blank");//在新的空白窗口打开        //window.open("http://www.baidu.com", "_self");//在当前窗口打开        win = window.open("http://www.baidu.com", "_blank", "width=200,height=200");//    };    btn2.onclick = function () {        //window.close();//关闭当前窗口        //win.close();//关闭指定的窗口    };</script>

(六)页面跳转

<input type="button" value="跳转" id="btn"/><script>    var btn = document.getElementById("btn");    btn.onclick = function () {        //window.location        //location.href = "http://www.baidu.com";        //location.href = "mailto:[e-mail]";        console.log(window.location.hash);//锚点        console.log(window.location.host);//主机 主机名+端口号        console.log(window.location.hostname);//主机名        console.log(window.location.pathname);//路径名        console.log(window.location.port);//端口        console.log(window.location.protocol);//协议        console.log(window.location.search);//一些参数    };</script>