大工20春《javascript基础教程与应用》辅导资料十一
JavaScript基础教程与应用辅导资料十一主 题：课件第十七章 JavaScript window对象学习时间：2020年6月8日－6月14日
“不忘初心、牢记使命”主题理论学习：
每周文摘：守初心，就是要牢记全心全意为人民服务的根本宗旨，以坚定的理想信念坚守初心，牢记人民对美好生活的向往就是我们的奋斗目标；以真挚的人民情怀滋养内心，时刻不忘我们党来自人民、根植人民，人民群众的支持和拥护是我们胜利前进的不竭力量源泉；以牢固的公仆意识践行初心，永远铭记人民是共产党的衣食父母，共产党人是人民的勤务员，永远不能脱离群众、轻视群众、漠视群众疾苦。
摘选自《在“不忘初心、牢记使命”主题教育工作会议上的讲话》
内 容：
我们这周主要学习课件第五章JavaScript window对象的相关内容，希望通过下面的内容能使同学们加深对本章相关知识点的理解。
知识脉络：
1、window对象的概念
2、window对象的属性
3、window对象的方法
4、参考实例
重点与难点：
1、重点：window对象的属性，window对象的方法；
2、难点：window对象的属性，window对象的方法。一、JavaScript window浏览器对象模型
1、浏览器对象模型 (BOM) 使 JavaScript 有能力与浏览器“对话”。
浏览器对象模型 (BOM)
浏览器对象模型（Browser?Object?Model）尚无正式标准。
由于现代浏览器已经（几乎）实现了 JavaScript 交互性方面的相同方法和属性，因此常被认为是 BOM 的方法和属性。2、window对象
所有浏览器都支持?window?对象。它表示浏览器窗口。
所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。
全局变量是 window 对象的属性。
全局函数是 window 对象的方法。
甚至 HTML DOM 的 document 也是 window 对象的属性之一：window.document.getElementById("header");
与此相同：
document.getElementById("header");3、window尺寸
有三种方法能够确定浏览器窗口的尺寸（浏览器的视口，不包括工具栏和滚动条）。
对于Internet Explorer、Chrome、Firefox、Opera 以及 Safari：
window.innerHeight - 浏览器窗口的内部高度
window.innerWidth - 浏览器窗口的内部宽度
对于 Internet Explorer 8、7、6、5：
document.documentElement.clientHeight
document.documentElement.clientWidth
或者
document.body.clientHeight
document.body.clientWidth
实用的 JavaScript 方案（涵盖所有浏览器）：
实例
var w=window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;var h=window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight;
4、其他window方法
一些其他方法：
window.open() - 打开新窗口
window.close() - 关闭当前窗口
window.moveTo() - 移动当前窗口
window.resizeTo() - 调整当前窗口的尺寸二、控制台实时提示时间
1、显示实时时间得代码
function showtime()
{
var today,hour,second,minute,year,month,date;
var strDate ;
today=new Date();
var n_day = today.getDay();
switch (n_day)
{
case 0:{
strDate = "星期日";
}break;
case 1:{
strDate = "星期一";
}break;
case 2:{
strDate ="星期二";
}break;
case 3:{
strDate = "星期三";
}break;
case 4:{
strDate = "星期四";
}break;
case 5:{
strDate = "星期五";
}break;
case 6:{
strDate = "星期六";
}break;
case 7:{
strDate = "星期日";
}break;
}
year = today.getYear()+1900;
month = today.getMonth()+1;
date = today.getDate();
hour = today.getHours();
minute =today.getMinutes();
second = today.getSeconds();
document.getElementById('time').innerHTML = "<h1 style="color:'white'>"+year + "年" + month + "月" + date + "日" + strDate +" " + hour + ":" + minute + ":" + second+"</h1>"; //显示时间
setTimeout("showtime();", 1000); //设定函数自动执行时间为 1000 ms(1 s)
}
html代码
引入js
<body onload="showtime();">
<span id="time"></span>
</body> 转载注明 无忧答案网
页:
[1]