BOM对象
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
head>
<body>
<h2>BOMh2>
<ul>
<li>BOM即浏览器对象模型li>
<li>BOM提供了独立于内容 而与浏览器窗口进行交互的对象li>
<li>由于BOM主要用于管理窗口与窗口之间的通讯，因此其核心对象是windowli>
<li>BOM由一系列相关的对象构成，并且每个对象都提供了很多方法与属性li>
<li>BOM缺乏标准，JavaScript语法的标准化组织是ECMA，DOM的标准化组织是W3C，BOM最初是Netscape浏览器标准的一部分li>
ul>
<p>
使用BOM，开发者可以操控浏览器显示页面之外的部分。总体来说，BOM主要针对的是浏览器窗口和子窗口，
但是通常会把任何特定于浏览器的扩展都归于在BOM的范畴内。
<ul>
<li>navigator对象，提供关于浏览器的详尽信息li>
<li>location对象，提供浏览器加载页面的详尽信息li>
<li>screen对象，提供关于用户屏幕分辨率的详尽信息li>
ul>
p>
<div>
<script>
document.write(navigator.appCodeName, "
");
document.write(navigator.appName, "
");
document.write(navigator.appVersion, "
");
var v1 = navigator.userAgent;
document.write(v1, "
");
if (v1.indexOf("MSIE") == -1) {
document.write("不是IE");
} else
document.write("IE");
script>
div>
<hr />
<h3>Window对象的方法h3>
<ul>
<li>弹出一个警告框 alert()li>
<li>弹出一个确认框 confirm()li>
<li>弹出一个提示框 prompt()，接受用户输入数据li>
<li>打开一个新窗口 open()li>
<li>滚动到指定位置 scrollTo()li>
<li>用setTimeout() 和 clearTimeout()设置和停止定时器li>
<li>用setInterval() 和 clearInterval()设置和停止定时器li>
ul>
<div id="div1">div>
<button onclick="f1()">点击button>
<script>
function f1() {
var win = window.open('https://www.baidu.com', '新窗口', 'width=200,height=200');
window.scroll(100, 300);
setTimeout(function () {
win.close()
}, 3000)
}
script>
<h3>location对象h3>
<p>location 对象是 window 对象下的一个属性，使用的时候可以省略 window 对象<br />
location最常用的为 href 属性，可以是浏览器跳转到指定的页面。用法location.href = 'http://www.baidu.com';
<br />
location.assign("http://www.baidu.com");方法的作用和 href 的作用一样，可以让页面跳转到指定的地方，会有历史记录。<br />
location.replace('http://www.itheima.com');方法是替换到地址栏中的地址，但是不记录历史<br />
location.reload(true/false);是否让页面重新加载，值为 true：强制从服务器获取页面（相当于 ctrl+F5）；值为 false：如果浏览器有缓存，直接从缓存中加载（相当于 F5）<br />
p>
<h3>screen对象h3>
<ul>
<li>height返回屏幕的总高度(以像素记)li>
<li>width返回屏幕的总宽度(以像素记)li>
<li>availHeight返回屏幕的总高度(不包括任务栏)li>
<li>availWidth返回屏幕的宽度(不包括任务栏)li>
<li>pixelDepth返回屏幕的颜色分辨率(每像素的位数)li>
ul>
<div>
<script>
document.write('总高度：' + screen.height, "
")
document.write('总宽度：' + screen.width, "
")
document.write('不包括任务栏的高度：' + screen.availHeight, "
")
document.write('不包括任务栏的宽度：' + screen.availWidth, "
")
document.write('屏幕的颜色分辨率：' + screen.pixelDepth, "
")
script>
div>
<p>屏幕分辨率：在屏幕尺寸一定的情况下，分辨率越高，则显示的越精细、细腻，效果越好。<br />
screenLeft和screenTop对象返回窗口相对于屏幕的x和y坐标。除了火狐浏览器都支持。<br />
element.scrollWidth返回元素的整个宽度，包括带滚动条的隐蔽的地方。整个网页的宽度，即整个给用户观看的网页部分的宽度（无横向滚动条时即为网页宽度，有滚动条则加上滚动条可以滚动部分网页的宽度）
p>
<div id="div03">
<script>
var img = new Image()
img.src = 'images/Sunset.jpg'
img.onload = function (e) {
console.log(this.width, this.height);
}
document.getElementById("div03").append(img)
script>
div>
body>
html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
- 87
- 88
- 89
- 90
- 91
- 92
- 93
- 94
- 95
- 96
- 97
- 98
- 99
- 100
- 101
- 102
- 103
- 104
- 105
- 106
- 107
- 108
- 109
- 110
- 111
- 112
- 113
- 114
- 115
select
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
head>
<script language="javascript">
var a1 = new Array("请选择", "陕西", "四川");
var b1 = new Array(new Array("请选择"), new Array(3), new Array(4));
b1[1][0] = "西安";
b1[1][1] = "咸阳";
b1[1][2] = "宝鸡";
b1[2][0] = "成都";
b1[2][1] = "重庆";
b1[2][2] = "八种";
b1[2][3] = "光源";
script>
<body onload="ff();">
<select id="d1" onchange="hh()">
<option value="">请选择option>
select>
<select id="d2">
<option value="">请选择option>
select>
body>
html>
<script language="javascript">
function ff() {
var v1 = document.all.d1.options.length;
for (i = v1 - 1; i >= 0; i--) {
document.all.d1.options[i] = null;
}
for (i = 0; i < a1.length; i++) {
document.all.d1.options[i] = new Option(a1[i], "" + i);
}
}
function hh() {
var v1 = document.all.d2;
for (i = v1.options.length - 1; i >= 0; i--) {
v1.options[i] = null;
}
var v2 = document.all.d1.value;
v2 = parseInt(v2);
for (i = 0; i < b1[v2].length; i++) {
v1.options[i] = new Option(b1[v2][i], "" + i);
}
}
script>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
定义类
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
head>
<body>
<script>
function Student(name,age,sex){
this.name=name;
this.age=age;
this.sex=sex;
this.toString=function(){
return (this.name+"---"+this.age+"---"+this.sex)
}
}
var obj1=new Student("萌新开",18);
var obj2=new Student("张嫂为",20,false);
obj1.toString=function(){
return "asdklfas";
}
console.log(obj1)
console.log(obj2)
console.log(obj1.toString())
console.log(obj2.toString())
Student.prototype.abc=function(){
return 100;
}
console.log(obj1.abc());
console.log(obj2.abc());
script>
body>
html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
定时器1
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
head>
<script>
var i = 0;
function ff() {
i++;
if (i >= 10) {
i = 0;
}
var a = "images/T" + i + ".GIF";
document.all.dd.src = a;
setTimeout("ff()", 100);
}
script>
<body onload="ff()">
<h2>定时器h2>
<p>setTimeout() 是属于 window 的方法，该方法用于在指定的毫秒数后调用函数或计算表达式。<br />
语法格式可以是以下两种：<br />
<ul>
<li>setTimeout(要执行的代码, 等待的毫秒数)li>
<li>setTimeout(JavaScript 函数, 等待的毫秒数)li>
ul>
p>
<img id="dd" src="images/T0.GIF" />
<hr />
<p id="content"> 请等三秒钟!p>
<script>
setTimeout("changeState()", 3000);
function changeState() {
let content = document.getElementById('content');
content.innerHTML = "我是三秒后显示的内容！
";
}
script>
<p>显示当前时间:p>
<p id="demo1">p>
<button onclick="myStopFunction1()">停止时间button>
<script>
var myVar1 = setInterval(function () { myTimer1() }, 1000);
function myTimer1() {
var d = new Date();
var t = d.toLocaleTimeString();
document.getElementById("demo1").innerHTML = t;
}
function myStopFunction1() {
clearInterval(myVar1);
}
script>
<h2>超时处理h2>
<p>
<ul>
<li>setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式li>
<li>setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数li>
ul>
p>
<p>显示当前时间:p>
<p id="demo">p>
<button onclick="myStopFunction()">停止时间button>
<script>
var myVar = setInterval(function () { myTimer() }, 1000);
function myTimer() {
var d = new Date();
var t = d.toLocaleTimeString();
document.getElementById("demo").innerHTML = t;
}
function myStopFunction() {
clearInterval(myVar);
}
script>
body>
html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
定时器2
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
head>
<body onload="setInterval('ff()',200);">
<div id=mm>div>
body>
html>
<script>
var v1 = "据传说:有人尿床了!!";
var y = 0;
var bb = true;
function ff() {
if (y >= v1.length) bb = false;
if (y <= 0) bb = true;
if (bb) y++;
else y--;
window.status = v1.substring(0, y);
mm.innerHTML = v1.substring(0, y);
}
script>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29