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:aaa@itcast.cn";
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>