一、window对象常用的方法 window.open('地址'，'名称','高','宽');//打开一个新的窗口 window.alert();//提示框或者警告框 window.prompt();//用户输入提示框 window.confirm();//显示带有 确认与取消按钮框 window.close();//关闭浏览器窗口 window.setTimeout();//指定毫秒数后调用函数，定时器 clearTimeout（）；清除定时器括号里面是定时器的名称 window.setInterval();//指定的周期调用函数 延时重复使用
(一)、定时器开启setTimeout
// setTimeout // 语法 window.setTimeout(调用函数，延时时间); // 1秒等于1000毫秒 // 1.这个window在调用的时候可以省略 // 2.这个延时时间单位是毫秒但是可以省略，如果省略默认的是0 // 3.这个调用函数可以直接写函数还可以写函数名 // 4.页面中可能有很多的定时器，我们经常给定时器加标识符 // setTimeout(function () { // console.log('时间到了'); // }, 2000); function all() { console.log("要爆炸了"); } var time1=window.setTimeout(all, 3000); var time2=window.setTimeout(all, 5000); （二）、定时器关闭clearTimeout // 方法一 var btn = document.querySelector('button'); var time = window.setTimeout(function () { console.log("停止"); }, 5000) btn.addEventListener('click', function () { clearTimeout(time); })// 方法二 // 声明一个函数 function time() { console.log("你好呀"); } // 定时器调用函数名 var time3 = window.setTimeout(time, 5000); btn.addEventListener('click', function () { // time3 定时器的名字 clearTimeout(time3); }) （三）、开启定时器setInterval，关闭定时器clearInterval // setInterval 重复 // 语法 ：window.setInterval(调用函数,延时时间); setInterval(function () { console.log("继续输出"); // 每隔1000秒就会调用回调函数 }, 1000);
//setTimeout 延时时间到了，就去调用这个回调函数，只调用一次就结束这个定时器 //setInterval 每隔这个延时时间，就会去调用这个回调函数，会调用很多次，重复调用这个函数 //案列3： // 定时函数：间隔时间执行某个函数 调用上面函数 // 在外面定义一个全局变量 getTime调用里面的函数 // let t1 = window.setInterval("getTime()", 1000); console.log(t1); // 创建的定时器任务的编号
// 开启定时器 function beginTime() { let t1 = setInterval("getTime()", 1000); } // 关闭定时器 function closeTime() { clearInterval(t1); } // 使用js来操作你的网页元素,将获取的事件显示在网页好h1标签里面 // 1.获取事件 new Date() // 2.获取网页元素 document.getElementById() // 3.innerHTml填充网页文本
// 显示当前时间 创建一个函数 function getTime() { // 创建一个时间对象函数 let time = new Date(); // 把date部分日期转换为字符串 let yearMonthDay = time.toLocaleDateString(); // 把date部分时间转换为字符串 let hourMinSec = time.toLocaleTimeString(); // 以下获取的是数组 let h10bj = document.getElementsByTagName('h1')[0]; // 拼接日期和时间 h10bj.innerHTML = yearMonthDay + " " + hourMinSec; } 二、history对象常用的方法 history.back();//后退 history.go(-1);//也是后退 history.forward();//前进 history.go(1);//前进 三、location对象常用的方法 location.href();//页面跳转 location.reload();//刷新，重新加载 location.replace();//用新的文档替换当前文档 location.host();//返回主机名和URL的端口号 location.hostname();//返回当前URL的主机名 四、调整窗口大小事件 // addEventListener 页面加载完毕在执行里面的代码 window.addEventListener('load',function() { // 获取元素 var div=document.querySelector('div'); // 只要窗口大小发生变化就会触发函数体的代码 window.addEventListener('resize',function() { console.log(window.innerWidth); console.log('有变化'); if(window.innerWidth<=800){ div.style.display = "none"; }else { div.style.display = "block"; } }) }) 五、窗口事件加载 // 写多个弹框可以用addEventListener方法 window.addEventListener('load', function () { var btn = document.querySelector('button'); btn.addEventListener('click', function () { alert('点击我'); }) }) // load等页面内容全部加载完毕，包含页面dom元素图片flashCSS 等等 window.addEventListener('load',function() { alert('点击他'); })
// DOMContentLoaded是DOM加载完毕，不包含图片falsh css等就可以执行加载速度比load更快些 window.addEventListener('DOMContentLoaded',function() { alert(33); }) 标签：function,定时器,浏览器,函数,第八章,window,Bom,console,setTimeout From： https://www.cnblogs.com/dexue/p/16755128.html