5.事件
由窗口触发该事件
// onblur:窗口失去焦点运行
// onfocus:获得焦点运行
// onload:文档加载后运行
// onresize:调整窗口大小时运行
// onstorage:当web storage区域更新时(存储空间中数据变化时)运行
window.onblur = function () {
console.log("不在")
}
window.onfocus = function () {
console.log("在");
}
window.onload = function () {
console.log("加载好了");
}
6. 表单事件:
<input type="text" id="text">
// 表单事件:在html表单中触发(适用于所有html元素,但改html要在fromo中)
//onfocus:获得焦点运行
//onload:文档加载后运行
//onchange:元素改变时运行脚本
//oninput:元素获得用户输入运行脚本
//oninvalid:元素无效时运行
//onselect:选取元素时运行
//onsubmit:提交表单时运行
var text1=document.getElementById("text")
text1.onfocus=function() {
this.style.backgroundColor="red"
}
text1.onblur=function() {
this.style.backgroundColor="green"
}
7.bom浏览器对象模型,使js有能力和浏览器对话,浏览器对象模型可以使我们通过js来操控浏览器,常用如下
window:代表的是整个浏览器窗口,window也是网页中的全局对象
navigator:代表当前浏览器信息,通过该对象识别不同的浏览器
history:浏览器的历史记录,通过该对象来操作浏览器历史记录(隐私问题该对象不能获取到具体历史记录,只能操作浏览器向前或向后翻页,且该操作只在档次访问时有效)
Screen:代表用户屏幕信息,通过该对象可以获得用户显示器的相关信息
8.window对象:
//警告框
//window.alter()可以不带window前缀写
window.alert("警告框")
//确认框
var r=confirm("是否退出登录")
if(r==true){
console.log("已退出");
}else{
console.log("没退出");
}
//提示框
var person=prompt("请输入你的姓名","你")
if(person!=null){
console.log(person);
}
9.定时事件
<button id="bt">你好
<button id="bt2">你好重复
// js可以在时间间隔内执行
//settimeout(function,milliseconds)等待指定毫秒数后执行函数
//setinterval(function,milliseconds)与settimeout相同但会重复执行
var bt=document.getElementById("bt")
bt.onclick=function(){
setTimeout(function (){
alert("nihao")
},3000)
}
var bt2=document.getElementById("bt2")
bt2.onclick=function(){
setInterval(function(){
alert("Niha重复")
},2000)
}
1.常用的窗口属性
// window.innerHeight 浏览器窗口内高度(像素)
// window.innerWidth 浏览器窗口内宽度(像素)
// 浏览器窗口(浏览器视口) 不包括工具栏和滚动条
/*对于ie浏览器 8,7,6,5
document.documentElement.clientHeight
document.documentElement.clientWidth
或
document.body.clientHeight
document.body.clientWidth*/
//实用的js解决方案(包括所有浏览器):显示浏览器窗口的高度和宽度
var h=window.innerHeight || document.documentElement.clientHeight ||document.body.clientHeight
var w=window.innerWidth ||document.documentElement.clientWidth ||document.body.clientWidth
console.log("宽是"+w+"高是"+h);
2.其他窗口方法
//window.open():打开新的窗口
//window.open(URL,name,specs,replace)
/* URL:可选,打开指定页面url,若没有,则打开一个新的空白页面
name:可选,指定target属性或窗口的名称,支持以下值:
_blank-url加载到新窗口(默认)
_parent-url加载到父框架
_self-url替换当前页面
name-窗口名称
specs:一个逗号分隔的项目列表
replace:规定了装载到窗口的url是在窗口的浏览器历史中创建一个新条目还是
替换浏览器历史中的当前条目
true-url 替换当前条目
false-url 浏览器创建新的条目
*/
function openwin(){
mywindow=window.open('','','width=200,height=100')
mywindow.document.write("你好")
}
//window.close()
function closewin(){
mywindow.close()
}
//window.moveTo(x,y)移动当前窗口
function movewin(){
mywindow.moveTo(300,300)
}
//window.resizeTO():调整当前窗口
function resizewin(){
mywindow.resizeTo(300,300)
}
