[H5]Javascript对象

[H5]Javascript对象

内容包括:自定义对象、String对象、Date对象、Array对象、Math对象、DOM对象、Window对象(History对象、Location对象、Screen对象)。

[index.html]

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Javascript对象</title>
    <style>
        div{
            width: 100px;
            height: 100px;
            background-color: #66CCFF;
        }
    </style>
</head>
<body>
    <!--时钟-->
    <div id="clockID" onclick="clockAction()">点击div开始时钟</div>
    <!--列表-->
    <ul id="ulID"><li name="ln1">第一项</li><li name="ln2">第二项</li><li name="ln3">第三项</li><li name="ln4">第四项</li>
        <li name="ln5">第五项</li> <!--这里有一个空白项-->
        <li id="lnID6">第六项 将会被删除</li>
    </ul>
    <button onclick="openWindowAction()">打开新的窗口</button>
    <button onclick="closeWindowAction()">关闭新的窗口</button>
    <br/>
    <button onclick="backAction()">back</button>
    <button onclick="forwardAction()">forward</button>
    <button onclick="goAction()">go</button>
    <br/>
    <script src="indexJS.js"></script>
</body>
</html>

[indexJS.js]

/*
* 对象
* Javascript中所有事物都是对象
* 每个对象都带有属性和方法
* JS中允许自定义对象:
    1.定义并创建对象实例;
    2.使用函数来定义对象,然后创建对象实例;
* */
// 创建对象方式一
city = new Object();
// 对象添加属性
city.name = "重庆";
city.area = "8.24万平方千米 ";
// 输出对象属性
document.write("name:"+city.name+",area:"+city.area);

// 创建对象和属性方式二
people = {name:"zhangsan",age:"18"};
document.write("<br/>name:"+people.name+",age:"+people.age);

// 使用函数创建对象
function dog (name,age) {
    // 添加属性这里要使用this来索引
    this._name = name;
    this._age  = age;
}
newDog = new dog("gou","1");
document.write("<br/>name:"+newDog._name+",age:"+newDog._age);


/*
* String字符串对象
* 字符串可以使用双引号也可以使用单引号
* JavaScript 的字符串是不可变的(immutable),String 类定义的方法都不能改变字符串的内容。像 String.toUpperCase() 这样的方法,返回的是全新的字符串,而不是修改原始字符串。
* 属性:
    constructor 	    对创建该对象的函数的引用
    length 	            字符串的长度
    prototype 	        允许您向对象添加属性和方法
* 方法:
    anchor() 	        创建 HTML 锚。
    big() 	            用大号字体显示字符串。
    blink() 	        显示闪动字符串。
    bold() 	            使用粗体显示字符串。
    charAt() 	        返回在指定位置的字符。
    charCodeAt() 	    返回在指定的位置的字符的 Unicode 编码。
    concat() 	        连接字符串。
    fixed() 	        以打字机文本显示字符串。
    fontcolor() 	    使用指定的颜色来显示字符串。
    fontsize() 	        使用指定的尺寸来显示字符串。
    fromCharCode() 	    从字符编码创建一个字符串。
    indexOf() 	        检索字符串。
    italics() 	        使用斜体显示字符串。
    lastIndexOf() 	    从后向前搜索字符串。
    link() 	            将字符串显示为链接。
    localeCompare() 	用本地特定的顺序来比较两个字符串。
    match() 	        找到一个或多个正则表达式的匹配。
    replace() 	        替换与正则表达式匹配的子串。
    search() 	        检索与正则表达式相匹配的值。
    slice() 	        提取字符串的片断,并在新的字符串中返回被提取的部分。
    small() 	        使用小字号来显示字符串。
    split() 	        把字符串分割为字符串数组。
    strike() 	        使用删除线来显示字符串。
    sub() 	            把字符串显示为下标。
    substr() 	        从起始索引号提取字符串中指定数目的字符。
    substring() 	    提取字符串中两个指定的索引号之间的字符。
    sup() 	            把字符串显示为上标。
    toLocaleLowerCase() 把字符串转换为小写。
    toLocaleUpperCase() 把字符串转换为大写。
    toLowerCase() 	    把字符串转换为小写。
    toUpperCase() 	    把字符串转换为大写。
    toSource() 	        代表对象的源代码。
    toString() 	        返回字符串。
    valueOf() 	        返回某个字符串对象的原始值。
* */
var tempStr = "are you ok!";
// 打印字符串长度
document.write("<br/>"+tempStr.length);          // 输出:11

// 对创建该对象的函数的引用
document.write("<br/>"+tempStr.constructor);     // 输出:function String() { [native code] }

// 检索字符串。存在就输出位置索引,不存在就输出-1。
document.write("<br/>"+tempStr.indexOf("you"));  // 输出:4
document.write("<br/>"+tempStr.indexOf("you1")); // 输出:-1

// 匹配字符串。存在就输出匹配的字符串,不存在就输出null。
document.write("<br/>"+tempStr.match("you"));    // 输出:you
document.write("<br/>"+tempStr.match("you1"));   // 输出:null

// 替换字符串。有两个参数,参数一表示被替换的字符串,参数二表示替换字符串。
document.write("<br/>"+tempStr.replace("you","you1")); // 输出:are you1 ok!

// 字符串大小写转换
document.write("<br/>"+tempStr.toUpperCase());   // 输出:ARE YOU OK!
document.write("<br/>"+tempStr.toLowerCase());   // 输出:are you ok!

// 字符串转换成数组
var tempArr = tempStr.split(" ");
document.write("<br/>"+tempArr);                 // 输出:are,you,ok!


/*
* Date日期对象
* 处理日期和时间
* Date 对象属性
     constructor 	        返回对创建此对象的 Date 函数的引用。
     prototype 	            使您有能力向对象添加属性和方法。
* Date 对象方法
     getDate() 	            从 Date 对象返回一个月中的某一天 (1 ~ 31)。
     getDay() 	            从 Date 对象返回一周中的某一天 (0 ~ 6)。
     getFullYear() 	        从 Date 对象以四位数字返回年份。
     getHours() 	        返回 Date 对象的小时 (0 ~ 23)。
     getMilliseconds() 	    返回 Date 对象的毫秒(0 ~ 999)。
     getMinutes() 	        返回 Date 对象的分钟 (0 ~ 59)。
     getMonth() 	        从 Date 对象返回月份 (0 ~ 11)。
     getSeconds() 	        返回 Date 对象的秒数 (0 ~ 59)。
     getTime() 	            返回 1970 年 1 月 1 日至今的毫秒数。
     getTimezoneOffset() 	返回本地时间与格林威治标准时间 (GMT) 的分钟差。
     getUTCDate() 	        根据世界时从 Date 对象返回月中的一天 (1 ~ 31)。
     getUTCDay() 	        根据世界时从 Date 对象返回周中的一天 (0 ~ 6)。
     getUTCFullYear() 	    根据世界时从 Date 对象返回四位数的年份。
     getUTCHours() 	        根据世界时返回 Date 对象的小时 (0 ~ 23)。
     getUTCMilliseconds() 	根据世界时返回 Date 对象的毫秒(0 ~ 999)。
     getUTCMinutes() 	    根据世界时返回 Date 对象的分钟 (0 ~ 59)。
     getUTCMonth() 	        根据世界时从 Date 对象返回月份 (0 ~ 11)。
     getUTCSeconds() 	    根据世界时返回 Date 对象的秒钟 (0 ~ 59)。
     getYear() 	            已废弃。 请使用 getFullYear() 方法代替。
     parse() 	            返回1970年1月1日午夜到指定日期(字符串)的毫秒数。
     setDate() 	            设置 Date 对象中月的某一天 (1 ~ 31)。
     setFullYear() 	        设置 Date 对象中的年份(四位数字)。
     setHours() 	        设置 Date 对象中的小时 (0 ~ 23)。
     setMilliseconds() 	    设置 Date 对象中的毫秒 (0 ~ 999)。
     setMinutes() 	        设置 Date 对象中的分钟 (0 ~ 59)。
     setMonth() 	        设置 Date 对象中月份 (0 ~ 11)。
     setSeconds() 	        设置 Date 对象中的秒钟 (0 ~ 59)。
     setTime() 	setTime()   方法以毫秒设置 Date 对象。
     setUTCDate() 	        根据世界时设置 Date 对象中月份的一天 (1 ~ 31)。
     setUTCFullYear() 	    根据世界时设置 Date 对象中的年份(四位数字)。
     setUTCHours() 	        根据世界时设置 Date 对象中的小时 (0 ~ 23)。
     setUTCMilliseconds() 	根据世界时设置 Date 对象中的毫秒 (0 ~ 999)。
     setUTCMinutes() 	    根据世界时设置 Date 对象中的分钟 (0 ~ 59)。
     setUTCMonth() 	        根据世界时设置 Date 对象中的月份 (0 ~ 11)。
     setUTCSeconds()        方法用于根据世界时 (UTC) 设置指定时间的秒字段。
     setYear() 	            已废弃。 请使用 setFullYear() 方法代替。
     toDateString() 	    把 Date 对象的日期部分转换为字符串。
     toGMTString() 	        已废弃。请使用 toUTCString() 方法代替。
     toISOString() 	        使用 ISO 标准返回字符串的日期格式。
     toJSON() 	            以 JSON 数据格式返回日期字符串。
     toLocaleDateString() 	根据本地时间格式,把 Date 对象的日期部分转换为字符串。
     toLocaleTimeString() 	根据本地时间格式,把 Date 对象的时间部分转换为字符串。
     toLocaleString() 	    据本地时间格式,把 Date 对象转换为字符串。
     toString() 	        把 Date 对象转换为字符串。
     toTimeString() 	    把 Date 对象的时间部分转换为字符串。
     toUTCString() 	        根据世界时,把 Date 对象转换为字符串。
     UTC() 	                根据世界时返回 1970 年 1 月 1 日 到指定日期的毫秒数。
     valueOf() 	            返回 Date 对象的原始值。
 * */
// 以下四种方法同样可以创建 Date 对象:
var d1 = new Date();
document.write("<br/>"+d1);           // 输出:Sun Mar 25 2018 11:10:00 GMT+0800

var milliseconds = 150; // 毫秒
var d2 = new Date(milliseconds);
document.write("<br/>"+d2);           // 输出:Thu Jan 01 1970 08:00:00 GMT+0800

var dateString = "2018-03-25 11:12";
var d3 = new Date(dateString);
document.write("<br/>"+d3);          // 输出:Sun Mar 25 2018 11:12:00 GMT+0800

var year = "2018";
var month = "03";
var day = "25";
var hours = "11";
var minutes = "15";
var seconds = "02";
var milliseconds = "20";
var d4 = new Date(year, month, day, hours, minutes, seconds, milliseconds);
document.write("<br/>"+d4);         // 输出:Wed Apr 25 2018 11:15:02 GMT+0800

// Date的一些方法
// 获取年份
document.write("<br/>"+d1.getFullYear());   // 输出:2018

// 获取当前时间戳,单位毫秒
document.write("<br/>"+d1.getTime());       // 输出:1521948232142

// 设置时间
d1.setFullYear(2017,5,21);
document.write("<br/>"+d1);                 // 输出:Wed Jun 21 2017 11:26:56 GMT+0800

// 时钟,随时刷新
function clockAction () {
    var tempDate = new Date();
    var h = tempDate.getHours();
    var m = tempDate.getMinutes();
    var s = tempDate.getSeconds();
    h = judgeNumberAction(h);
    m = judgeNumberAction(m);
    s = judgeNumberAction(s);
    document.getElementById("clockID").innerHTML = h +":"+ m +":"+ s;
    // 每隔1000毫秒调用一次方法自己
    t = setTimeout(function(){
        clockAction();
    }, 1000);
}
function judgeNumberAction (number) {
    if (number < 10) {
        number = "0" + number;
    }
    return number;
}


/*
* Array数组对象
* 对象用于在单个的变量中存储多个值
* Array 对象属性
     constructor 	    返回对创建此对象的数组函数的引用。
     length 	        设置或返回数组中元素的数目。
     prototype 	        使您有能力向对象添加属性和方法。
* Array 对象方法
     concat() 	        连接两个或更多的数组,并返回结果。
     join() 	        把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔。
     pop() 	            删除并返回数组的最后一个元素
     push() 	        向数组的末尾添加一个或更多元素,并返回新的长度。
     reverse() 	        颠倒数组中元素的顺序。
     shift() 	        删除并返回数组的第一个元素
     slice() 	        从某个已有的数组返回选定的元素
     sort() 	        对数组的元素进行排序
     splice() 	        删除元素,并向数组添加新元素。
     toSource() 	    返回该对象的源代码。
     toString() 	    把数组转换为字符串,并返回结果。
     toLocaleString()   把数组转换为本地数组,并返回结果。
     unshift() 	        向数组的开头添加一个或更多元素,并返回新的长度。
     valueOf() 	        返回数组对象的原始值
* */
// 创建Array的方法
var arr1 = new Array();

var size = 10;
var arr2 = new Array(size);

var arr3 = new Array("1", "a", "A");

var arr4 =  ["2","B"];

// 一些Array的方法
// 链接两个或更多数组
document.write("<br/>"+arr3.concat(arr4)); // 输出:1,a,A,2,B

// 数组排序,升序||降序
document.write("<br/>"+arr3.sort());       // 输出:1,A,a
document.write("<br/>"+arr3.sort(function (a , b) {
        return a-b;
    }));                                   // 升序输出:a,A,1
document.write("<br/>"+arr3.sort(function (a , b) {
        return b-a;
    }));                                   // 降序输出:1,A,a

// 数组末尾追加元素
arr3.push("5");
document.write("<br/>"+arr3);             // 输出:1,A,a,5

// 数组翻转,颠倒顺序
document.write("<br/>"+arr3.reverse());   // 输出:5,a,A,1


/*
* Math对象
* 对象用于执行数学任务
* Math 对象并不像 Date 和 String 那样是对象的类,因此没有构造函数 Math(),像 Math.sin() 这样的函数只是函数,不是某个对象的方法。您无需创建它,通过把 Math 作为对象使用就可以调用其所有属性和方法。
* 使用 Math 的属性和方法的语法:
     var pi_value = Math.PI;
     var sqrt_value = Math.sqrt(15);
* 对象属性
     E 	        返回算术常量 e,即自然对数的底数(约等于2.718)。
     LN2 	    返回 2 的自然对数(约等于0.693)。
     LN10 	    返回 10 的自然对数(约等于2.302)。
     LOG2E 	    返回以 2 为底的 e 的对数(约等于 1.414)。
     LOG10E 	返回以 10 为底的 e 的对数(约等于0.434)。
     PI 	    返回圆周率(约等于3.14159)。
     SQRT1_2 	返回返回 2 的平方根的倒数(约等于 0.707)。
     SQRT2 	    返回 2 的平方根(约等于 1.414)。
 * 对象方法
     abs(x) 	返回数的绝对值。
     acos(x) 	返回数的反余弦值。
     asin(x) 	返回数的反正弦值。
     atan(x) 	以介于 -PI/2 与 PI/2 弧度之间的数值来返回 x 的反正切值。
     atan2(y,x) 返回从 x 轴到点 (x,y) 的角度(介于 -PI/2 与 PI/2 弧度之间)。
     ceil(x) 	对数进行上舍入。
     cos(x) 	返回数的余弦。
     exp(x) 	返回 e 的指数。
     floor(x) 	对数进行下舍入。
     log(x) 	返回数的自然对数(底为e)。
     max(x,y) 	返回 x 和 y 中的最高值。
     min(x,y) 	返回 x 和 y 中的最低值。
     pow(x,y) 	返回 x 的 y 次幂。
     random() 	返回 0 ~ 1 之间的随机数。
     round(x) 	把数四舍五入为最接近的整数。
     sin(x) 	返回数的正弦。
     sqrt(x) 	返回数的平方根。
     tan(x) 	返回角的正切。
     toSource() 返回该对象的源代码。
     valueOf() 	返回 Math 对象的原始值。
 * */
// 四舍五入
document.write("<br/>"+Math.round(4.4));   // 输出:4
document.write("<br/>"+Math.round(4.5));   // 输出:5
// 随机数 0~1, parseInt()取整数方法
document.write("<br/>"+parseInt(Math.random()*100));
// 取最大值
document.write("<br/>"+Math.max(1,3,10,5,20));   // 输出:20


/*
* DOM对象
* http://www.w3school.com.cn/js/js_obj_htmldom.asp
* 除了内置的 JavaScript 对象以外,你还可以使用 JavaScript 访问并处理所有的 HTML DOM 对象。
* HTML DOM 是 W3C 标准(是 HTML 文档对象模型的英文缩写,Document Object Model for HTML)。
* HTML DOM 定义了用于 HTML 的一系列标准的对象,以及访问和处理 HTML 文档的标准方法。
* 通过 DOM,可以访问所有的 HTML 元素,连同它们所包含的文本和属性。可以对其中的内容进行修改和删除,同时也可以创建新的元素。
* HTML DOM 独立于平台和编程语言。它可被任何编程语言诸如 Java、JavaScript 和 VBScript 使用。
* DOM 包含的对象:
     Document 	    代表整个 HTML 文档,用来访问页面中的所有元素。
         Document对象属性:
         body                   提供对 <body> 元素的直接访问。 对于定义了框架集的文档,该属性引用最外层的 <frameset>。
         cookie 	            设置或返回与当前文档有关的所有 cookie。
         domain 	            返回当前文档的域名。
         lastModified 	        返回文档被最后修改的日期和时间。
         referrer 	            返回载入当前文档的文档的 URL。
         title 	                返回当前文档的标题。
         URL 	                返回当前文档的 URL。
         Document对象方法:
         close() 	            关闭用 document.open() 方法打开的输出流,并显示选定的数据。
         getElementById() 	    返回对拥有指定 id 的第一个对象的引用。
         getElementsByName()    返回带有指定名称的对象集合。
         getElementsByTagName() 返回带有指定标签名的对象集合。
         open() 	            打开一个流,以收集来自任何 document.write() 或 document.writeln() 方法的输出。
         write() 	            向文档写 HTML 表达式 或 JavaScript 代码。
         writeln() 	            等同于 write() 方法,不同的是在每个表达式之后写一个换行符。

     Anchor 	    代表 <a> 元素。
     Area 	        代表图像地图中的 <area> 元素。
     Base 	        代表 <base> 元素。
     Body 	        代表图像地图中的 <body> 元素。
     Button 	    代表 <button> 元素。
     Event 	        代表事件的状态
     Form 	        代表 <form> 元素
     Frame 	        代表 <frame> 元素
     Frameset 	    代表 <frameset> 元素
     Iframe 	    代表 <iframe> 元素
     Image 	        代表 <img> 元素
     Input button 	代表 HTML 表单中的按钮
     Input checkbox 代表 HTML 表单中的选择框
     Input file 	代表 HTML 表单中的 fileupload 。
     Input hidden 	代表 HTML 表单中的隐藏域。
     Input password 代表 HTML 表单中的密码域。
     Input radio 	代表 HTML 表单中的单选框。
     Input reset 	代表 HTML 表单中的重置按钮。
     Input submit 	代表 HTML 表单中的确认按钮。
     Input text 	代表 HTML 表单中的文本输入域。
     Link 	        代表 <link> 元素
     Meta 	        代表 <meta> 元素
     Object 	    代表一个 <Object> 元素
     Option 	    代表 <option> 元素
     Select 	    代表 HTML 表单中的选择列表。
     Style 	        代表某个单独的样式声明。
     Table 	        代表 <table> 元素。
     TableData 	    代表 <td> 元素。
     TableRow 	    代表 <tr> 元素。
     Textarea 	    代表 <textarea> 元素。
 * */

// getElementsByName() 获取name
document.getElementsByName("ln1")[0].innerHTML = "第一项 已经修改";

// getElementsByTagName() 获取元素
document.getElementsByTagName("li")[1].innerHTML = "第二项 已经修改";

// getAttribute() 获取元素属性
var tempName = document.getElementsByTagName("li")[2].getAttribute("name");
document.write("<br/>"+tempName);   // 输出:ln3

// setAttribute() 设置元素属性
document.getElementsByTagName("li")[2].setAttribute("name","ln1000");
var tempName1 = document.getElementsByTagName("li")[2].getAttribute("name");
document.write("<br/>"+tempName1);   // 输出:ln1000

// childNodes() 访问子节点
document.getElementById("ulID").childNodes[3].innerHTML = "第四项 已经修改";

// parentNode() 访问父节点 ,需要注意父节点只能有一个
var tempUL = document.getElementsByName("ln1")[0].parentNode;
tempUL.setAttribute("id","ulID1");
document.write("<br/>"+tempUL.getAttribute("id"));   // 输出:ulID1

// createElement() 创建元素节点
// createTextNode() 创建文本节点
var tempUL1 = document.getElementById("ulID1");
var tempLI1 = document.createElement("li");
tempLI1.innerHTML = "创建的元素节点";
tempUL1.appendChild(tempLI1); // 必须添加到父节点上去,网末尾插入

// insertBefore() 插入节点
var tempUL2 = document.getElementById("ulID1");
var tempLI2 = document.createElement("li");
tempLI2.innerHTML = "创建的元素节点,插入前面";
tempUL2.insertBefore(tempLI2,tempLI1);

// removeChild() 删除节点
var tempUL3 = document.getElementById("ulID1");
var tempLi6 = document.getElementById("lnID6");
tempUL3.removeChild(tempLi6);

// offsetHeight 网页尺寸,不包含滚动条
// scrollHeight 网页尺寸,包含滚动条
var tempWidth = document.documentElement.offsetWidth;
document.write("<br/>"+tempWidth);
var tempHeight = document.body.offsetHeight;
document.write("<br/>"+tempHeight);


/*
* 浏览器对象|window对象
* Window 对象表示浏览器中打开的窗口。
* 如果文档包含框架(frame 或 iframe 标签),浏览器会为 HTML 文档创建一个 window 对象,并为每个框架创建一个额外的 window 对象。
* 没有应用于 window 对象的公开标准,不过所有浏览器都支持该对象。
* Window 对象属性
     closed 	    返回窗口是否已被关闭。
     defaultStatus 	设置或返回窗口状态栏中的默认文本。
     document 	    对 Document 对象的只读引用。请参阅 Document 对象。
     history 	    对 History 对象的只读引用。请参数 History 对象。
     innerheight 	返回窗口的文档显示区的高度。
     innerwidth 	返回窗口的文档显示区的宽度。
     length 	    设置或返回窗口中的框架数量。
     location 	    用于窗口或框架的 Location 对象。请参阅 Location 对象。
     name 	        设置或返回窗口的名称。
     Navigator 	    对 Navigator 对象的只读引用。请参数 Navigator 对象。
     opener 	    返回对创建此窗口的窗口的引用。
     outerheight 	返回窗口的外部高度。
     outerwidth 	返回窗口的外部宽度。
     pageXOffset 	设置或返回当前页面相对于窗口显示区左上角的 X 位置。
     pageYOffset 	设置或返回当前页面相对于窗口显示区左上角的 Y 位置。
     parent 	    返回父窗口。
     Screen 	    对 Screen 对象的只读引用。请参数 Screen 对象。
     self 	        返回对当前窗口的引用。等价于 Window 属性。
     status 	    设置窗口状态栏的文本。
     top 	        返回最顶层的先辈窗口。
     window 	    window 属性等价于 self 属性,它包含了对窗口自身的引用。
     screenLeft     只读整数。声明了窗口的左上角在屏幕上的的 x 坐标和 y 坐标。IE、Safari 和 Opera 支持 screenLeft 和 screenTop,而 Firefox 和 Safari 支持 screenX 和 screenY。
     screenTop
     screenX
     screenY

* Window 对象方法
     alert() 	    显示带有一段消息和一个确认按钮的警告框。
     blur() 	    把键盘焦点从顶层窗口移开。
     clearInterval()取消由 setInterval() 设置的 timeout。
     clearTimeout() 取消由 setTimeout() 方法设置的 timeout。
     close() 	    关闭浏览器窗口。
     confirm() 	    显示带有一段消息以及确认按钮和取消按钮的对话框。
     createPopup() 	创建一个 pop-up 窗口。
     focus() 	    把键盘焦点给予一个窗口。
     moveBy() 	    可相对窗口的当前坐标把它移动指定的像素。
     moveTo() 	    把窗口的左上角移动到一个指定的坐标。
     open() 	    打开一个新的浏览器窗口或查找一个已命名的窗口。
     print() 	    打印当前窗口的内容。
     prompt() 	    显示可提示用户输入的对话框。
     resizeBy() 	按照指定的像素调整窗口的大小。
     resizeTo() 	把窗口的大小调整到指定的宽度和高度。
     scrollBy() 	按照指定的像素值来滚动内容。
     scrollTo() 	把内容滚动到指定的坐标。
     setInterval() 	按照指定的周期(以毫秒计)来调用函数或计算表达式。
     setTimeout() 	在指定的毫秒数后调用函数或计算表达式。
* */
// 浏览器的宽高,不包含导航栏和工具栏的宽高
document.write("<br/>"+window.innerWidth+","+window.innerHeight);

// 打开、关闭窗口
function openWindowAction () {
    // 有三个参数,第一个参数是URL指定要打开的页面,第二个参数是打开页面的名字,第三个参数是设置页面的style
    // toolbar=no 工具栏是否显示,menubar=no菜单栏是否显示
    window.open("windowHTML.html","newHTML","width=200px,height=200px,top=100px,left=100px,toolbar=no,menubar=no");
}
function closeWindowAction () {
    window.close();
}

/*
 * 计时方法
 *   setInterval()   间隔指定毫秒不停地执行指定的代码
 *       clearInterval() 方法用于停止setInterval()方法
 *   setTimeout()    暂停指定毫秒后执行指定的代码
 *       clearTimeout()  方法永远停止setTimeout()方法
 * */
// 第一个参数表示执行的方法,第二个参数表示延迟多少毫秒后执行
var tempTime = setInterval(function () {
    intervalAction();
},2000);
function intervalAction () {

}
// 停止计时
function stopTimeAction () {
    clearInterval(tempTime);
}

// 暂停指定毫秒后执行
var yTime;
function ycWorkAction () {
    yTime = setTimeout(function () {
        alert("延迟执行");
        // 若这样方法自己调用自己,就能一直执行下去
        ycWorkAction();
    },3000);
}
function stopWorkAction () {
    clearTimeout(yTime);
}


/*
* History对象
* History 对象包含用户(在浏览器窗口中)访问过的 URL。
* History 对象是 window 对象的一部分,可通过 window.history 属性对其进行访问。
* 没有应用于 History 对象的公开标准,不过所有浏览器都支持该对象。
* History 对象属性
     length 	返回浏览器历史列表中的 URL 数量。
*History 对象方法
     back() 	加载 history 列表中的前一个 URL。
     forward() 	加载 history 列表中的下一个 URL。
     go() 	    加载 history 列表中的某个具体页面。
* History 对象最初设计来表示窗口的浏览历史。但出于隐私方面的原因,History 对象不再允许脚本访问已经访问过的实际 URL。唯一保持使用的功能只有 back()、forward() 和 go() 方法。
* */
function backAction () {
    history.back();
}
function forwardAction () {
    history.forward();
}
function goAction () {
    // 往前跳是正数,往后退是负数
    history.go(1);
}


/*
* Location对象
* window.location 对象用于获得当前页面的地址 (URL),并把浏览器重定向到新的页面。
* 属性:
     location.href     属性返回当前页面的 URL。
     location.hostname 返回 web 主机的域名
     location.pathname 返回当前页面的路径和文件名
     location.port     返回 web 主机的端口 (80 或 443)
     location.protocol 返回所使用的 web 协议(http:// 或 https://)
* 方法:
    location.assign() 方法加载新的文档。
* */
//
document.write("<br/>"+window.location.hostname);
document.write("<br/>"+window.location.href);
function assignAction () {
    // 重新定义这个页面
    location.assign("https://www.baidu.com")
}

/*
* Screen对象
* window.screen 对象包含有关用户屏幕的信息。
* 属性:
     screen.availWidth    可用的屏幕宽度,以像素计,减去界面特性,比如窗口任务栏。
     screen.availHeight   可用的屏幕高度
* */
document.write("<br/>"+window.screen.availWidth+"|"+window.screen.width);
document.write("<br/>"+screen.availHeight+"|"+screen.height);



猜你喜欢

转载自blog.csdn.net/u012881779/article/details/79688483
H5