JavaScript-编程学习网

JavaScript
- JavaScript介绍
  - JavaScript是什么？
  - JavaScript历史背景介绍
  - JavaScript的用途
  - JavaScript和ECMAScript的关系
  - JavaScript入门易学性
  - JavaScript的组成
- 第一个JavaScript实例
  - 引入JavaScript的3种方式
  - Hello,JavaScript!
  - alert语句
  - JavaScript的语法规则
- JavaScript在网页中输出信息的写法
  - prompt()方法
- JavaScript中的变量
  - 变量的含义
  - 变量的声明和定义
  - 变量名的命名规范
- JavaScript基本数据类型
  - 基本数据类型
  - 引用数据类型
- JavaScript的运算符
  - 特殊情况
- JavaScript中的流程控制语句
  - if语句
  - switch
  - while
  - do...while
  - for循环
- 数组的创建和使用
  - 数组的基本操作
  - 数组的常用方法
- 函数的使用
- Object_构造函数
- String_Number
- Date对象的使用
- Math对象的使用
- JavaScript案例
  - 模态框案例
  - 点一点有惊喜
  - 简易留言框
  - 选项卡
  - 仿淘宝搜索框
  - 匀速移动案例
  - 5秒自动关闭广告
  - 小米轮播图
  - 轮播图
- JavaScript的BOM知识点
  - BOM输出
  - open_close方法
  - BOM的其他元素
  - client系列
  - 屏幕的可视区域
  - offset系列

JavaScript介绍

JavaScript是什么？

JavaScript是一种web前端的描述语言，也是一种基于对象（Object）和事件驱动（Event Driven）的、安全性好的脚本语言。它运行在客户端从而减轻服务器的负担。

JavaScript的特点：

JavaScript主要用来向html页面中添加交互行为
JavaScript是一种脚本语言，语法和C语言系列语法类似，属于弱语言类型
JavaScript一般用来编写客户端脚本，如node.js例外
JavaScript是一种解释性语言，边执行边解释无需另外编译

在此之间我们就已经学过了HTML+CSS，那么我们就需要重新了解下web前端：

HTML：从语义的角度，描述页面结构
CSS：从审美的角度，描述样式（美化页面）
JavaScript：从交互的角度，描述行为（提升用户体验）

JavaScript历史背景介绍

布兰登 • 艾奇（Brendan Eich，1961年～），1995年在网景公司，发明的JavaScript。

一开始JavaScript叫做LiveScript，但是由于当时Java语言特别火，所以为了傍上打牌，就改名为JavaScript。Java和JavaScript的关系，就如同北大和北大青鸟的关系。

在同时期还有其他的网页语言，比如VBScript、JScript等等，后来都被JavaScript打败了，所以现在的浏览器中，只运行一种脚本语言就是JavaScript。

JavaScript的用途

JavaScript的用途是解决页面交互和数据交互，最终目的是峰峰客户端效果以及数据的有效传递。

实现页面交互，提升用户体验实现页面特效。即js操作html的dom结构或操作样式
客户端表单验证，即在数据送达服务端之前进行用户提交信息及时有效地验证，减轻服务器压力。即数据交互

JavaScript和ECMAScript的关系

ECMAScript是一种由Ecma国际（前身为欧洲计算机制造商协会）制定的一种标准。

JavaScript是由公司开发而成的，问题是不便于其他的公司拓展和使用。所以ECMA组织牵头执行了JavaScript的标准，取名为ECMAScript。

简单的说，ECMAScript不是一门语言，而是一个标准。符合这个标准的比较常见的有：JavaScript、Action Script(Flash)。就是说当你的JavaScript学完了，那么Flash程序也就轻而易举了。

ECMAScript在2015年6月，发布了ECMAScript6版厄本那，语言能力更强（也包含了很多新特性）。但是，浏览器的厂商不能那么快追上这个标准。

更多信息请点击：

JavaScript入门易学性

JavaScript对初学者比较友好
JavaScript是有界面效果的
JavaScript是弱语言，变量只需要var来声明。而Java中变量的声明，要根据变量的类型来定义

比如Java中需要定义以下变量：

int a;
float a;
double a;
String a;
boolean a;

但是在JavaScript中，只用定义一个变量：

var a;

JavaScript不用关心其他的事情，更关心自己的业务

JavaScript的组成

JavaScript基础分为三个部分：

ECMAScript：JavaScript的语法标准。包括变量、表达式、运算符、函数、if语句、for语句等
DOM：操作网页上的元素的API。比如让盒子移动、变色、轮播图等
BOM：操作浏览器部分功能的额API。比如让浏览器自动滚动

PS：JavaScript重复性的劳动几乎为0，基本都是创造性的劳动。而不像HTML、CSS这种的margin、padding都是机械重复劳动。

第一个JavaScript实例

引入JavaScript的3种方式

外链式
行内式
内部式

外链式

也就是和我们引入外部CSS文件一样，在head头部引入我们自定义JavaScript脚本：

<script src="01%20index.js">

行内式

因为我们的JavaScript是可以操作我们的标签的，也就是说我们可以把标签当成DOM（Document Object Module），所以我们就可以使用行内式来引入JavaScript：

<body>
    <p id="p1" onclick="clickHandler()">你好，JavaScript!</p>
</body>

但是我们发现给了p标签id和onclick属性后，依然是没有任何效果，所以，我们需要讲一下我们的内部式

内部式

在我们写的HTML代码中，拿到浏览器那边，浏览器是从上到下开始解析的，那么我们需要把JavaScript写在最后面，等全部加载成功后，再来加载JavaScript：

<script type="text/javascript">
    
</script>

我们的内部式就是这样引入的，那么我们现在可以去写我们的第一个JavaScript实例了

Hello,JavaScript!

当我们点击P标签的时候，弹框输出：Hello,JavaScript!

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <p id="p1" onclick="clickHandler()">你好，JavaScript!</p>
    </body>
    <script type="text/javascript">
        function clickHandler(){
            alert('Hello,JavaScript!')
        }
    </script>
</html>

alert语句

alert（英文翻译为“警报”）的用途：弹出警告框

alert('这是我的第一个JavaScript程序！')

当我们保存后在浏览器刷新，那么就会出现这样的效果：

JavaScript的语法规则

学习程序，是有规律可循的，就是程序中有相同的部分，这些部分就是一种规定，不能更改，我们称为：语法

JavaScript对换行、缩进、空格不敏感

备注：每一条语句末尾都要加上分号，虽然分号不是必须添加的，但是为了程序今后要压缩，如果不加分号，那么压缩后的程序将不能运行

所有的符号，都是英语的。比如括号、引号、分号
JavaScript的注释：

单行注释：

// 我是注释

多行注释：

JavaScript在网页中输出信息的写法

在JavaScript中，网页输出新的写法有三种：

使用window.alert()输出警告框
使用document.write()方法将内容写到html文档中
使用innerHTML写入到HTML元素
使用console.log()写入到浏览器的控制台

使用window.alert()输出警告框

windos.alert(""),弹框效果，window是BOM对象，指的是整个浏览器，可以省略不写。弹框比较突然，对用户来说体验不是太好，基本上就是测试代码使用的：

<script type="text/javascript">
    window.alert('星儿今天很漂亮')  # window是可以忽略的
    alert('星儿今天很漂亮')
</script>

使用document.write()方法将内容写到HTML文档中

document.write("")会直接在页面上输出内容

<script type="text/javascript">
    document.write('星儿今天很漂亮')
</script>

既然我们说过，JavaScript是用来操作DOM的，那么我们就可以来尝试一下：

<script type="text/javascript">
    document.write("星儿今天很漂亮")
    document.write("<h1>我是一级</h1>")
</script>

使用innerHTML写入到HTML元素

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <h1 id="demo1">我是一级</h1>
        <button type="button" onclick="changeContent()">更改内容</button>
    </body>
    <script type="text/javascript">
        function changeContent(){
            document.getElementById("demo1").innerHTML = "通过innerHTML方法向页面输出内容"
        }
    </script>
</html>

当我们还没有点击的时候是这样的：

当我们点击按钮后是这个样子的：

使用console.log()写入到浏览器的控制台

其实console是一个系列，不仅仅之后console.log()方法，还有console.error(),console.warn()，当然这些都是输出在控制台上面的:

<script type="text/javascript">
    //控制台日志
    console.log("控制台.日志")
</script>

<script type="text/javascript">
    //控制台警告
    console.warn("控制台.警告")
</script>

<script type="text/javascript">
    //控制台错误
    console.error("控制台.错误")
</script>

prompt()方法

prompt()方法用于显示可提示用户进行输入的对话框。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <input type="button" onclick="hello_user()" value="点我点我"/>
    </body>
    <script type="text/javascript">
        function hello_user(){
            var name = prompt("请输入用户名：")
            if(name != null && name != ''){
                document.write("hello,"+name+"!")
            }
        }
    </script>
</html>

点我们没有点击的时候，此时就只有一个button按钮

当我们点击按钮的时候，会弹框让我们输如用户名

当点击确定后，会在浏览器界面输出一句话

JavaScript中的变量

变量的含义

变量，即是在程序运行过程中它的值是允许修改的量，与他相对应的就是常量：在程序运行过程中它的值不允许修改的量

JavaScript和Python是一样的弱类型语言，Python中定义变量没有关键字:username = 'xiao'，但是在JavaScript中定义变量使用关键字: var name = 'xiao';

var name = "xiao";

变量的声明和定义

有两种方式：

先声明后定义
声明立刻定义

先声明后定义

//1.先声明
var dog;
console.log(dog)  //undefined代表未定义

//2.后定义
dog = "校长";
console.log(dog)

声明立刻定义(常用)

<script type="text/javascript">
    var dog2 = "雪儿";
    console.log(dog2)
</script>

变量名的命名规范

严格去分大小写
命名时可以出现字母、数字、下划线、$，但是不能数字开头，也不能是纯数字，不能包括JavaScript的关键字和保留字
推荐驼峰命名法
匈牙利命名法

JavaScript的保留关键字

https://www.runoob.com/js/js-reserved.html

JavaScript基本数据类型

JavaScript数据类型包括：基本数据类型和引用数据类型

基本数据类型指的是简单的数据段，引用数据类型指的是具有多个值构成的对象

当我们把变量赋值给一个变量时，解析器首先要确认的是这个值是基本数据类型还是引用数据类型

基本数据类型

基本数据类型分为以下五种：

number
string
boolean
null
undefined

数字类型:number

<script type="text/javascript">
    var num = 123;
    console.log(num)
</script>

number类型在控制台输出是蓝色的

字符串类型:string

<script type="text/javascript">
    var str = "泰然城";
    console.log(str)
</script>

字符串类型在控制台输出是黑色的

布尔类型:boolean

<script type="text/javascript">
    var b1 = true;
    console.log(b1)
    console.log(typeof b1)
</script>

空对象:null

<script type="text/javascript">
    var n1 = null;
    console.log(n1)
    console.log(typeof n1)
</script>

null代表的是空对象

未定义:undefined

这个在刚刚我们讲变量的声明和定义已经说过了，如果一个变量声明了但是没有定义，那么就是undefined

<script type="text/javascript">
    var name1;
    console.log(name1)
    console.log(typeof name1)
</script>

其实还有一种数据类型,Infinity 属性用于存放表示正无穷大的数值：

<script type="text/javascript">
    var dev = 5/0;
    console.log(dev)
    console.log(typeof dev)
</script>

引用数据类型

Function
Object
Array
String
Date

后面会慢慢讲解

JavaScript的运算符

JavaScript运算符分为四种：

算术运算符
赋值运算符
比较运算符
逻辑运算符

算数运算符和赋值运算符请参考：http://www.w3school.com.cn/js/js_operators.asp

比较运算符和逻辑运算符请参考：http://www.w3school.com.cn/js/js_comparisons.asp

特殊情况

字符串拼接

我们有这么一段文字需要拼接：

相比10年前的北京奥运，这一次，大家选择了少而精的策略，真正在舞台上的演员只有70余人。

那么此时我们想把北京奥运和70拿出来再通过字符串进行拼接，做法是这样的：

<script type="text/javascript">
    var n1 = "北京奥运";
    var n2 = 70;
    var str = "相比10年前的"+n1+"，这一次，大家选择了少而精的策略，真正在舞台上的演员只有"+n2+"余人。";
    console.log(str)
</script>

字符串运算

字符串相加

<script type="text/javascript">
    var str1 = "1";
    var str2 = "2";
    var newStr = str1+str2;
    console.log(newStr)
    console.log(typeof newStr)
</script>

虽然结果是12，但是还是string类型

如果我们想要将string类型转换成int类型，需要使用到parseInt()方法

<script type="text/javascript">
    //将string类型转换成int类型
    var newStr2 = parseInt(newStr);
    console.log(typeof newStr2)
</script>

当我们使用字符串相减的时候：

<script type="text/javascript">
    var str1 = "1";
    var str2 = "2";
    var newStr3 = str1-str2;
    console.log(newStr3)
</script>

同样，在我们使用字符串相乘/相除都是可以执行成功不需要转换数据类型的，验证结果略过

我们来尝试下两个都是字符串且不像数字的相乘：

<script type="text/javascript">
    var n1 = 'one';
    var n2 = 'two';
    console.log(n1*n2)
</script>

输出为NaN,即Not a Num

JavaScript中的流程控制语句

if
switch
while
do while
for

if语句

定义鸡为20，如果大于15则大吉大利今晚吃鸡

<script type="text/javascript">
    var ji = 20;
    if (ji >=20) {
        console.log("大吉大利，今晚吃鸡！")
    }
</script>

if...else

<script type="text/javascript">
    var ji = 15;
    if (ji >=20) {
        console.log("大吉大利，今晚吃鸡！")
    } else{
        console.log("很遗憾，今晚不能吃鸡！")
    }
</script>

if...else if

<script type="text/javascript">
    var mathScore = 140;
    var totalScore = 500;
    if (mathScore >= 138 && totalScore >= 680) {
        console.log("恭喜你被清华大学录取！")
    } else if( totalScore >= 700 || mathScore >= 139){
        console.log("恭喜你被复旦大学录取！")
    }else {
        console.log("很抱歉！")
    }
</script>

switch

switch和case一起用，case表示的是一个条件，满足这个条件就会走进来，遇到break就会跳出

<script type="text/javascript">
    var gameScore = "best";
    switch (gameScore){
        case "best":
            console.log('大吉大利今晚吃鸡！')
            break;
        case "better":
            console.log("你是最优秀的！")
            break;
        default:
            break;
    }
</script>

while

while循环有3个条件：

初始化循环变量
循环判断条件
更新循环变量

<script type="text/javascript">
    var n = 1;
    while (n<=100){
        console.log(n)
        n++;
    }
</script>

练习：打印1-100之间3的倍数

<script type="text/javascript">
    var n = 1;
    while (n<=100){
        if (n%3===0) {
            console.log(n)
        }
        n++
    }
</script>

do...while

do...while和while不一样，do...while不管符不符合条件，至少会运行一次

<script type="text/javascript">
    var n = 3;
    do{
        console.log(n)
        n++
    }while (n<10){
        
    }
</script>

for循环

打印1-100之间9的倍数

<script type="text/javascript">
    for (var n=1;n<=100;n++) {
        if (n%9==0) {
            console.log(n)
        }
    }
</script>

计算1-100的和

<script type="text/javascript">
    var sum=0;
    for (var n=1;n<=100;n++) {
        sum+=n
    }
    console.log(sum)
</script>

数组的创建和使用

在Python中，能存放数据的有列表，用[]表示，但是在JavaScript中，[]被当做为数组，所谓的数组看以看成是一个容器，用来存放东西的容器。

数组创建的两种方式：

字面量方式创建
使用构造函数的方式创建

字面量方式创建

所谓字面量的方式，是我们最经常用的，这种方法简单直观

//因为Array是一个对象，那么这个对象就有自己的方法和属性
var arr = ['red','yellow','black']

//创建一个空数组
var arr2 = []

使用构造方法创建数组

<script type="text/javascript">
    var arr1 = new Array();//创建的是空数组
    
    //万事万物皆对象，没有对象new一个，此时的Array可以看成是一个类
    var colors = new Array('red','blue','yellow');
    console.log(colors)
    
</script>

数组的基本操作

数组的赋值

<script type="text/javascript">
    //1.创建一个空的数组
    var colors = new Array();
    
    //2.为数组赋值
    colors[0] = "red";
    colors[1] = "black";
    colors[2] = "white";
    
    //3.打印数据
    console.log(colors)
    
</script>

通过下标获取元素的值

<script type="text/javascript">
    //1.创建一个空的数组
    var colors = new Array();
    
    //2.为数组赋值
    colors[0] = "red";
    colors[1] = "black";
    colors[2] = "white";
    
    //3. 通过下标获取数组的值
    console.log(colors[0])
    console.log(colors[2])
    
</script>

获取数组的长度

<script type="text/javascript">
    //1.创建一个空的数组
    var colors = new Array();
    
    //2.为数组赋值
    colors[0] = "red";
    colors[1] = "black";
    colors[2] = "white";

    //3.获取数组的长度
    console.log(colors.length)
    
</script>

遍历数组

<script type="text/javascript">
    //1.创建一个空的数组
    var colors = new Array();
    
    //2.为数组赋值
    colors[0] = "red";
    colors[1] = "black";
    colors[2] = "white";

    //3.遍历数组
    for (var count=0;count<=colors.length;count++) {
        console.log(colors[count])
    }
    
</script>

这里在后面有个undefined，是因为我们在设置循环条件的时候设置成了小于等于数据的长度，但是数组的第一个元素是从0开始的，所以才会有undefined

数组的常用方法

concat():数组的合并

<script type="text/javascript">
    //1.首先创建两个数组
    var n1 = ['北京','上海','深圳']
    var n2 = ['固始','信阳']
    
    //2.concat():两个数组的合并
    var newN = n1.concat(n2)
    console.log(newN)
</script>

toString()：将数组转换成为字符串

<script type="text/javascript">
    //1.首先创建两个数组
    var n1 = ['北京','上海','深圳']
    var n2 = ['固始','信阳']
    
    //2.concat():两个数组的合并
    var newN = n1.concat(n2)
    //console.log(newN)

    //3.将数组转换成字符串
    var num = [98,54,66,100,0]
    var newNum = num.toString()
    console.log(newNum)
</script>

join()：将数组里的字符串按照指定的字符连接起来

<script type="text/javascript">
    //1.首先创建两个数组
    var n1 = ['北京','上海','深圳']
    var n2 = ['固始','信阳']
    
    //2.concat():两个数组的合并
    var newN = n1.concat(n2)
    //console.log(newN)

    //3.将数组转换成字符串
    var num = [98,54,66,100,0]
    var newNum = num.toString()
    //console.log(newNum)
    
    //4.join()
    console.log(newN.join('__'))
</script>

indexOf():通过内容查找下标，正向查找

<script type="text/javascript">
    //1.首先创建两个数组
    var n1 = ['北京','上海','深圳']
    var n2 = ['固始','信阳']
    
    //2.concat():两个数组的合并
    var newN = n1.concat(n2)
    //console.log(newN)

    //3.将数组转换成字符串
    var num = [98,54,66,100,0]
    var newNum = num.toString()
    //console.log(newNum)
    
    //4.join()
    //console.log(newN.join('__'))
    
    //5.通过内容查找下标
    console.log(newN.indexOf("固始"))
</script>

lastindexOf():反向查找

<script type="text/javascript">
    //1.首先创建两个数组
    var n1 = ['北京','上海','深圳']
    var n2 = ['固始','信阳']
    
    //2.concat():两个数组的合并
    var newN = n1.concat(n2)
    //console.log(newN)

    //3.将数组转换成字符串
    var num = [98,54,66,100,0]
    var newNum = num.toString()
    //console.log(newNum)
    
    //4.join()
    //console.log(newN.join('__'))
    
    //5.通过内容查找下标
    //console.log(newN.indexOf("固始"))
    
    //6.lastIndexOf()
    console.log(newN.lastIndexOf("固始"))
</script>

我们可以看到这个值依然是3，因为不管你正向还是反向，顺序是不会变的

sort():数组的排序

<script type="text/javascript">
    //1.首先创建两个数组
    var n1 = ['北京','上海','深圳']
    var n2 = ['固始','信阳']
    
    //2.concat():两个数组的合并
    var newN = n1.concat(n2)
    //console.log(newN)

    //3.将数组转换成字符串
    var num = [98,54,66,100,0]
    var newNum = num.toString()
    //console.log(newNum)
    
    //4.join()
    //console.log(newN.join('__'))
    
    //5.通过内容查找下标
    //console.log(newN.indexOf("固始"))
    
    //6.lastIndexOf()
    //console.log(newN.lastIndexOf("固始"))
    
    //7.sort()：对数组排序
    var names = ["lipeng","jiaduobao","wanglaoqi","zhangsan"]
    console.log(names.sort())
</script>

这样是按照26个字母进行排序的，如果首字母相同，那么就比较第二个字母，以此类推

reverse()：反转数组

<script type="text/javascript">
    //1.首先创建两个数组
    var n1 = ['北京','上海','深圳']
    var n2 = ['固始','信阳']
    
    //2.concat():两个数组的合并
    var newN = n1.concat(n2)
    //console.log(newN)

    //3.将数组转换成字符串
    var num = [98,54,66,100,0]
    var newNum = num.toString()
    //console.log(newNum)
    
    //4.join()
    //console.log(newN.join('__'))
    
    //5.通过内容查找下标
    //console.log(newN.indexOf("固始"))
    
    //6.lastIndexOf()
    //console.log(newN.lastIndexOf("固始"))
    
    //7.sort()：对数组排序
    var names = ["lipeng","jiaduobao","wanglaoqi","zhangsan"]
    //console.log(names.sort())
    
    //8.reverse()反转数组
    console.log(names.reverse())
</script>

仅仅是对数组的反转，并不会排序

shift():移除掉数组中的第一个元素，返回的是移除掉元素的值

<script type="text/javascript">
    //1.首先创建两个数组
    var n1 = ['北京','上海','深圳']
    var n2 = ['固始','信阳']
    
    //2.concat():两个数组的合并
    var newN = n1.concat(n2)
    //console.log(newN)

    //3.将数组转换成字符串
    var num = [98,54,66,100,0]
    var newNum = num.toString()
    //console.log(newNum)
    
    //4.join()
    //console.log(newN.join('__'))
    
    //5.通过内容查找下标
    //console.log(newN.indexOf("固始"))
    
    //6.lastIndexOf()
    //console.log(newN.lastIndexOf("固始"))
    
    //7.sort()：对数组排序
    var names = ["lipeng","jiaduobao","wanglaoqi","zhangsan"]
    //console.log(names.sort())
    
    //8.reverse()反转数组
    console.log(names.reverse())
    
    //9.移除元素和添加元素
    var shiftNames = names.shift();
    console.log(shiftNames)
</script>

unshift()：向数组的第一个元素插入一个或者多个值，并返回新的长度

<script type="text/javascript">
    //1.首先创建两个数组
    var n1 = ['北京','上海','深圳']
    var n2 = ['固始','信阳']
    
    //2.concat():两个数组的合并
    var newN = n1.concat(n2)
    //console.log(newN)

    //3.将数组转换成字符串
    var num = [98,54,66,100,0]
    var newNum = num.toString()
    //console.log(newNum)
    
    //4.join()
    //console.log(newN.join('__'))
    
    //5.通过内容查找下标
    //console.log(newN.indexOf("固始"))
    
    //6.lastIndexOf()
    //console.log(newN.lastIndexOf("固始"))
    
    //7.sort()：对数组排序
    var names = ["lipeng","jiaduobao","wanglaoqi","zhangsan"]
    //console.log(names.sort())
    
    //8.reverse()反转数组
    console.log(names.reverse())
    
    //9.移除元素和添加元素
    //var shiftNames = names.shift();
    //console.log(shiftNames)
    
    var unShiftNames = names.unshift("liming","王鹏飞")
    console.log(unShiftNames)
</script>

push():向数组的尾部添加一个或者多个值，并返回数组的长度

<script type="text/javascript">
    //1.首先创建两个数组
    var n1 = ['北京','上海','深圳']
    var n2 = ['固始','信阳']
    
    //2.concat():两个数组的合并
    var newN = n1.concat(n2)
    //console.log(newN)

    //3.将数组转换成字符串
    var num = [98,54,66,100,0]
    var newNum = num.toString()
    //console.log(newNum)
    
    //4.join()
    //console.log(newN.join('__'))
    
    //5.通过内容查找下标
    //console.log(newN.indexOf("固始"))
    
    //6.lastIndexOf()
    //console.log(newN.lastIndexOf("固始"))
    
    //7.sort()：对数组排序
    var names = ["lipeng","jiaduobao","wanglaoqi","zhangsan"]
    //console.log(names.sort())
    
    //8.reverse()反转数组
    console.log(names.reverse())
    
    //9.移除元素和添加元素
    //var shiftNames = names.shift();
    //console.log(shiftNames)
    
    var unShiftNames = names.unshift("liming","王鹏飞")
    //console.log(unShiftNames)
    
    //10.push():在数组的尾部添加一个或多个值，返回的是数组的长度
    var pushNames = names.push("lihaiming","languansheng")
    console.log(pushNames)
</script>

pop()：删除数组尾部的一个元素，并返回这个元素的值

<script type="text/javascript">
    //1.首先创建两个数组
    var n1 = ['北京','上海','深圳']
    var n2 = ['固始','信阳']
    
    //2.concat():两个数组的合并
    var newN = n1.concat(n2)
    //console.log(newN)

    //3.将数组转换成字符串
    var num = [98,54,66,100,0]
    var newNum = num.toString()
    //console.log(newNum)
    
    //4.join()
    //console.log(newN.join('__'))
    
    //5.通过内容查找下标
    //console.log(newN.indexOf("固始"))
    
    //6.lastIndexOf()
    //console.log(newN.lastIndexOf("固始"))
    
    //7.sort()：对数组排序
    var names = ["lipeng","jiaduobao","wanglaoqi","zhangsan"]
    //console.log(names.sort())
    
    //8.reverse()反转数组
    console.log(names.reverse())
    
    //9.移除元素和添加元素
    //var shiftNames = names.shift();
    //console.log(shiftNames)
    
    var unShiftNames = names.unshift("liming","王鹏飞")
    //console.log(unShiftNames)
    
    //10.push():在数组的尾部添加一个或多个值，返回的是数组的长度
    var pushNames = names.push("lihaiming","languansheng")
    //console.log(pushNames)
    
    //11.pop():删除数组的最后一个元素,并且返回删除的元素值
    var popNames = names.pop();
    console.log(popNames)
</script>

对字符串进行反转

<script type="text/javascript">
    var str = "hello Javascript!"
    console.log(str.split("").reverse().join(""))
</script>

函数的使用

字面量方式创建

<script type="text/javascript">
    //1.字面量方式的创建
    function add(){
        alert("add函数被调用了！")
    }
    add()
</script>

不管在什么语言中，定义了函数那么就需要有调用，在JavaScript是这样的：

定义函数时需要携带参数

<script type="text/javascript">
    //1.字面量方式的创建
    function add(){
        alert("add函数被调用了！")
    }
    //add()
    
    //第二种方式：定义函数时携带参数
    function add2(a,b){
        console.log(a*b)
    }
    add2(4,5)
</script>

定义函数值需要有返回值

<script type="text/javascript">
    //1.字面量方式的创建
    function add(){
        alert("add函数被调用了！")
    }
    //add()
    
    //第二种方式：定义函数时携带参数
    function add2(a,b){
        console.log(a*b)
    }
    //add2(4,5)
    
    //第三种方式：定义函数需要有返回值
    function add3(a,b){
        return a*b
    }
    var a = add3(5,9)
    console.log(a)
</script>

Object_构造函数

对象的创建有以下几种方式：

字面量方式创建
使用Object()创建对象
使用构造函数方式创建对象

字面量方式创建

在JavaScript中，对象的属性是用key:value的方式存储的

<script type="text/javascript">
    var stu = {
        name:"(*^_^*)亚飞",
        age:22,
        fav:"鸡汤",
    }
    console.log(stu)
</script>

推荐使用这种字面量方式创建，这种方式简单直观

如果想要设置name属性的值，那么我们需要用点语法，也就是在python中的get方法和set方法

<script type="text/javascript">
    var stu = {
        name:"(*^_^*)亚飞",
        age:22,
        fav:"鸡汤",
    }
    console.log(stu)
    
    stu.name = "li"
    console.log(stu)
</script>

使用Object()创建对象

使用Object构造函数特点：首字母要大写想要创建对象就需要自己new一个

<script type="text/javascript">
    var Stu = new Object();
    Stu.name = "小明";
    console.log(Stu)
</script>

使用构造函数方式创建对象

<script type="text/javascript">
    var Student = function(){
        this.name = "海明";
        this.age = 22;
        this.fav = function(){
            alert('旅游')
        }
    }
    
    //创建对象
    var stu1 = new Student();
    console.log(stu1)
</script>

使用构造函数创建对象，有以下三点：

函数名首字母大写
构造函数不需要return
为对象添加成员变量：this.name = 'guansheng';

但是使用构造函数方式创建对象有一个弊端：每new一次对象，里面的成员变量和方法都是一样的，所以我们在调用的时候不知道调用的是哪个

当然，到最后我们推荐的是构造函数方式

<script type="text/javascript">
    function Animal(){
        this.name = "jingjing";
        this.age = 21;
    }
    Animal.prototype.shownames1 = function(){
        alert('调用了shownames1方法！')
    }
    Animal.prototype.shownames2 = function(){
        alert('调用了showname2方法！')
    }
    
    var a = new Animal();
    a.shownames1()
</script>

String_Number

String字符串对象，那么这是一个对象就会有自己的方法

obj.length获取字符串的长度

<script type="text/javascript">
    var str = "hello,world!"
    
    console.log(str.length)
</script>

toUpperCase(obj)把小写变大写

<script type="text/javascript">
    var str = "hello,world!"
    
    console.log(str.toUpperCase())
</script>

toLowerCase()把大写变成小写

    <script type="text/javascript">
        var str = "hello,world!"
        
        var bigStr = str.toUpperCase();
        
        console.log(bigStr.toLowerCase())
    </script>

obj.split("",n)以xx进行切割，并返回数组的最大长度为m

    <script type="text/javascript">
        var str = "hello,world!"
        
        console.log(str.split(" "))
    </script>

obj.sunstring(n,m)左开右闭的方式获取str的n到m元素的值

    <script type="text/javascript">
        var str = "hello,world!"
        
        console.log(str.substring(2,5))
    </script>

Number类型

obj.toString()将number装换成字符串类型

    <script type="text/javascript">
        var num = 123.4567
        
        var num2String = num.toString();
        console.log(num2String)
        console.log(typeof num2String)
    </script>

toFixed(n)四舍五入，最大长度为n

    <script type="text/javascript">
        var num = 123.4567
        
        console.log(num.toFixed(2))
    </script>

Date对象的使用

    <script type="text/javascript">
        var myDate = new Date();
        
        //1.获取今天是第几号
        console.log(myDate.getDate())
        
        //2.获取当天的日期和时间
        console.log(Date())
        
        //3.获取今天是星期几 0代表周日 6代表周六
        console.log(myDate.getDay())
        
        //4.获取现在是几时
        console.log(myDate.getHours())
        
        //5.获取一年中的几个月  0代表1月  11代表12月
        console.log(myDate.getMonth()+1)
    </script>

Date对象的小练习

在桌面显示当前时间：

    <script type="text/javascript">
        function getCurrentTime(){
            //1.创建一个时间对象
            var date = new Date();
            
            //2.获取当前时间
            var timeInfo = date.getFullYear()+"年"+num(date.getMonth()+1)+"月"+num(date.getDate())+"日 "+ num(date.getHours())+":"+num(date.getMinutes())+":"+num(date.getSeconds());
            
            //3.获取span1这个元素
            var oSpan = document.getElementById('span1');
            
            //4.将时间写到span标签中
            oSpan.innerHTML = timeInfo.fontcolor('red');
        }
        getCurrentTime()
        
        //5.设置定时器
        setInterval("getCurrentTime()",1000)
        
        //我们发现：秒钟走到59后 就变成了0  而不是00
         function num(n){
            if (n<10) {
                return "0"+n
            } else{
                return n
            }
         }
    </script>

Math对象的使用

Math对象用于执行数学任务

    <script type="text/javascript">
        
        //1.ceil() 天花板函数 向上取整  大于等于1，并且最接近的整数
        var reg1 = Math.ceil(1.12131)
        console.log(reg1)
        
        //2.floor() 地板函数  向下取整  小于等于1，并且最接近的整数
        var reg2 = Math.floor(1.12131)
        console.log(reg2)
        
        //3.最大值与最小值
        var reg3 = Math.max(4,5)
        console.log(reg3)
        
        var reg4 = Math.min(1,9)
        console.log(reg4)
        
        //4.取随机数  这个是0-1之间的随机数
        var reg5 = Math.random()
        console.log(reg5)
        
        //获取100-200之间的随机数
        var reg6 = 100+Math.random()*100
        console.log(reg6)
    </script>

JavaScript案例

模态框案例

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            html,body{
                height: 100%;
            }
            #box{
                width: 100%;
                height: 100%;
                background-color: rgba(0,0,0,.3);
            }
            #content{
                width: 400px;
                height: 200px;
                line-height: 200px;
                background-color: white;
                position: relative;
                top: 150px;
                margin: auto;
                text-align: center;
                color: red;
            }
            #span1{
                position: absolute;
                top: 0px;
                right: 0px;
                background-color: red;
                color: white;
                width: 20px;
                height: 20px;
                text-align: center;
                line-height: 20px;
            }
        </style>
    </head>
    <button id="btn">点我</button>
    <body>
    </body>
    <script type="text/javascript">
        var myBtn = document.getElementById('btn');
        
        var myDiv = document.createElement('div');
        var myP = document.createElement('p');
        var mySpan = document.createElement('span')
        
        myDiv.id = 'box';
        myP.id = 'content';
        mySpan.id = "span1";
        
        myP.innerHTML = "成功弹出模态框";
        mySpan.innerHTML = "x";
        
        myDiv.appendChild(myP);
        myP.appendChild(mySpan);
        
        myBtn.onclick = function(){
            //console.log(myBtn.parentNode)
            myBtn.parentNode.insertBefore(myDiv,myBtn)
        }
        mySpan.onclick = function(){
            myDiv.parentNode.removeChild(myDiv)
        }
    </script>
</html>

点一点有惊喜

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{
                padding: 0;
                margin: 0;
            }
            .box{
                width: 200px;
                height: 200px;
                background-color: red;
                text-align: center;
                line-height: 200px;
                margin: 20px auto;
                color: white;
                font-size: 22px;
                font-weight: blod;
            }
        </style>
    </head>
    <body>
        <div class="box">
            点击有惊喜
        </div>
    </body>
    <script type="text/javascript">
        //getElementsByClassName获取的是所有符合条件的元素,用数组保存的
        var myBox = document.getElementsByClassName("box")[0];
        
        var a = 0;
        myBox.onclick = function(){
            a++;
            if (a%4===1) {
                this.style.background = "green";
                this.innerText = "逗你玩呢";
            } else if(a%4===2){
                this.style.background = "blue";
                this.innerText = "再点一次";
            } else if(a%4===3){
                this.style.background = "transparent";
                this.innerText = "";
            } else{
                this.style.background = 'red';
                this.innerText = "点击有惊喜"
            }
        }
    </script>
</html>

简易留言框

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <div id="box">
            
        </div>
        <textarea id='msg'></textarea>
        <input type="button" id="btn" value="提交" />
        <button onclick="sum()">统计</button>
    </body>
    <script type="text/javascript">
        
        var ul = document.createElement('ul')
        var box =  document.getElementById('box');
        box.appendChild(ul)
        
        var msg = document.getElementById('msg');
        var btn = document.getElementById('btn');
        
        var count=0;
        btn.onclick = function(){
            var li = document.createElement('li');
            li.innerHTML = msg.value + "<span>&nbsp;&nbsp;&nbsp;&nbsp;X</span>";
            
            var lis = document.getElementsByTagName('li');
            
            if (lis.length==0) {
                ul.appendChild(li);
                count++;
            } else{
                ul.insertBefore(li,lis[0]);
                count++;
            }
            msg.value = "";
            
            var spans = document.getElementsByTagName('span');
            for (var i=0;i<spans.length;i++) {
                spans[i].onclick = function(){
                    ul.removeChild(this.parentNode)
                    count--;
                }
            }

        }
        function sum(){
            alert("一共有"+count+"条留言")
        }
    </script>
</html>

选项卡

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
                list-style: none;
                text-decoration: none;
            }
            #tab{
                width: 480px;
                margin: 20px auto;
                border: 1px solid red;
            }
            ul li{
                float: left;
                width: 160px;
                height: 60px;
                text-align: center;
                line-height: 60px;
                background-color: #CCCCCC;
            }
            ul li a{
                color: #000000;
            }
            li.active{
                background-color: #FFFFFF;
            }
            p{
                height: 200px;
                display: none;
            }
            p.active{
                display: block;
                height: 200px;
                text-align: center;
                line-height: 200px;
                background-color: #FFFFFF;
            }
        </style>
    </head>
    <body>
        <div id="tab">
            <ul>
                <li class="active"><a href="">我的商城</a></li>
                <li><a href="">我的收藏</a></li>
                <li><a href="">我的订单</a></li>
            </ul>
            <p class="active">商城展示</p>
            <p>收藏展示</p>
            <p>订单展示</p>
        </div>
    </body>
    <script type="text/javascript">
        var tabli = document.getElementsByTagName('li')
        var tabContent = document.getElementsByTagName('p')
        
        for (var i=0;i<tabli.length;i++) {
            tabli[i].index = i;
            tabli[i].onclick = function(){
                for (var j=0;j<tabli.length;j++) {
                    tabli[j].className = '';
                    tabContent[j].className = '';
                }
                this.className = 'active';
                console.log(this.index)
                tabContent[this.index].className = 'active';
            }
        }
    </script>
</html>

仿淘宝搜索框

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>仿淘宝搜索框</title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            input{
                outline: none;
                display: block;
                width: 390px;
                height: 40px;
                margin-top: 20px;
                font-size: 20px;
                border: 2px solid red;
                border-radius: 5px;
            }
            label{
                position: absolute;
                top: 32px;
                left: 10px;
                font-size: 20px;
                color: gray;
            }
        </style>
    </head>
    <body>
        <div id="search">
            <input type="text" name="" id="text" value="" />
            <label for="text" id="msg">泰然城</label>
        </div>
    </body>
    <script type="text/javascript">
        var txt = document.getElementById('text');
        var msg = document.getElementById('msg');
        
        txt.oninput = function(){
            if (txt.value == '') {
                msg.style.display = 'block'
            } else{
                msg.style.display = 'none'
            }
        }
    </script>
</html>

匀速移动案例

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>匀速移动</title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            #box{
                width: 100px;
                height: 100px;
                background-color: red;
                position: absolute;
                top: 50px;
                left: 0px;
            }
        </style>
    </head>
    <body>
        <button id="btn">点我</button>
        <div id="box">
            
        </div>
    </body>
    <script type="text/javascript">
        var btn = document.getElementById('btn');
        var box = document.getElementById('box');
        
        var count = 0;
        var timer = null;
        
        //当点击按钮时
        btn.onclick = function(){
            setInterval(function(){
                count++;
                if (count >1000) {
                    clearInterval(timer)
                    box.style.display = 'none'
                } else{
                    box.style.left = count +'px'
                }
                
            },1)
            
        }
    </script>
</html>

5秒自动关闭广告

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{
                padding: 0;
                margin: 0;
                list-style: none;
            }
            img{
                position: fixed;
            }
            #left{
                left: 0px;
            }
            #right{
                right: 0px;
            }
            ul li{
                font-size: 26px;
            }
        </style>
    </head>
    <body>
        <img src="../JS_dom/1.gif" id="left"/>
        <img src="../JS_dom/1.gif" id="right"/>
        <ul>
            <li>屠龙宝刀 点击就送</li>
            <li>屠龙宝刀 点击就送</li>
            <li>屠龙宝刀 点击就送</li>
            <li>屠龙宝刀 点击就送</li>
            <li>屠龙宝刀 点击就送</li>
            <li>屠龙宝刀 点击就送</li>
            <li>屠龙宝刀 点击就送</li>
            <li>屠龙宝刀 点击就送</li>
            <li>屠龙宝刀 点击就送</li>
            <li>屠龙宝刀 点击就送</li>
            <li>屠龙宝刀 点击就送</li>
            <li>屠龙宝刀 点击就送</li>
            <li>屠龙宝刀 点击就送</li>
            <li>屠龙宝刀 点击就送</li>
            <li>屠龙宝刀 点击就送</li>
            <li>屠龙宝刀 点击就送</li>
            <li>屠龙宝刀 点击就送</li>
            <li>屠龙宝刀 点击就送</li>
            <li>屠龙宝刀 点击就送</li>
            <li>屠龙宝刀 点击就送</li>
            <li>屠龙宝刀 点击就送</li>
            <li>屠龙宝刀 点击就送</li>
            <li>屠龙宝刀 点击就送</li>
            <li>屠龙宝刀 点击就送</li>
            <li>屠龙宝刀 点击就送</li>
            <li>屠龙宝刀 点击就送</li>
            <li>屠龙宝刀 点击就送</li>
        </ul>
    </body>
    <script type="text/javascript">
        var left = document.getElementById('left')
        var right = document.getElementById('right')
        var timer = null;
        timer = setTimeout(function(){
            left.style.display = 'none'
            right.style.display = 'none'
        },5000)
    </script>
</html>

小米轮播图

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>小米滚动框</title>
        <style type="text/css">
            *{padding: 0;margin: 0;}
            .wrap{
                width: 512px;
                height: 400px;
                border: 3px solid #808080;
                position: relative;
                overflow: hidden;
                margin: 100px auto;
            }
            .wrap span{
                width: 100%;
                height: 200px;
                position: absolute;     
            }
            .up{
                top: 0;
            }
            .down{
                bottom: 0;
            }
            img{
                position: absolute;
                top: 0;
                left: 0;        
            }
        </style>
    </head>
    <body>
        <div id="box" class="wrap">
            <img src="../JS_dom/mi.png" id="xiaomi"/>
            <span id="picUp" class="up"></span>
            <span id="picDown" class="down"></span>
        </div>
    </body>
    <script type="text/javascript">
        var up = document.getElementById('picUp');
        var down = document.getElementById('picDown');
        
        var img = document.getElementById('xiaomi');
        
        var count = 0;
        var timer = null;
        //鼠标移入的时候吧
        up.onmouseover = function(){
            
            //不管怎样 上来先清定时器
            clearInterval(timer);
            timer = setInterval(function(){
                count-=3;
                count >= -1070 ? img.style.top = count + 'px': clearInterval(timer);  
                
            },30)
        }
        down.onmouseover = function(){
            clearInterval(timer)
            
            timer = setInterval(function(){
                count += 1;
                count < 0 ? img.style.top = count + 'px': clearInterval(timer);
            })
        }
    </script>
</html>

轮播图

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>无缝轮播</title>
        <style type="text/css">
            *{padding: 0;margin: 0;}
            ul{list-style: none;}
            .box{
                width: 600px;
                height: 200px;
                margin: 50px auto;
                overflow: hidden;
                position: relative;

            }
            ul li{
                float: left;
            }
            .box ul{
                width: 400%;
                position: absolute;
                top: 0;
                left: 0;
                
            }
        </style>
    </head>
    <body>
        <div class="box">
            <ul>
                <li><img src="../JS_dom/image/01.jpg"/></li>
                <li><img src="../JS_dom/image/02.jpg"/></li>
                <li><img src="../JS_dom/image/03.jpg"/></li>
                <li><img src="../JS_dom/image/04.jpg"/></li>
            </ul>
        </div>
    </body>
    <script type="text/javascript">
        var box = document.getElementsByClassName('box')[0];
        console.log(box)
        var ul = box.children[0];
        
        var num = 0;
        function autoPlay(){
            num--;
            num <= -600 ? num=0 : num ;
            ul.style.left = num +'px';
        }
        
        //鼠标移动上去
        box.onmouseover = function(){
            clearInterval(timer)
        }
        //鼠标拿开的时候
        box.onmouseout = function(){
            timer = setInterval(autoPlay,30)
        }
    </script>
</html>

JavaScript的BOM知识点

浏览器对象模型（BOM）

IE 3.0 和 Netscape Navigator 3.0 提供了一种特性 - BOM（浏览器对象模型），可以对浏览器窗口进行访问和操作。使用 BOM，开发者可以移动窗口、改变状态栏中的文本以及执行其他与页面内容不直接相关的操作。

BOM输出

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
    </body>
    <script type="text/javascript">
        //DOM输出系列
        
        //1.alert() 弹框输出
        
        //2.console.log() 用于浏览器调试
        console.log('111')
        
        //3.prompt() 获取用户输入
        var pro = prompt('请输入你的名字：');
        console.log(pro)
        
        //prompt(value,defaultValue) 自动输入defaultValue
        var pro1 = prompt('请输入你的学校：','城关中学');
        console.log(pro1)
        
        //4.confirm() 弹框 如果选择确定则返回true，如果选择取消则返回false
        var con = confirm('是否要关闭？')
        console.log(con)
    </script>
</html>

open_close方法

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <button onclick="window.open('https://www.baidu.com')">打开百度首页</button>
        <button>小米官网</button>
        <button>关闭当前页面</button>
        <button id="new">打开一个空白页</button>
    </body>
    <script type="text/javascript">
        //open和close方法
        //1.open()  打开方法
        var btn = document.getElementsByTagName('button')[1];
        console.log(close)
        
        btn.onclick = function(){
            open("https://www.mi.com")
        }
        
        var close1 = document.getElementsByTagName('button')[2];
        
        close1.onclick = function(){
            if (confirm('是否关闭? ')) {
                console.log(111)
                close();
            }
        }
        
        //打开一个空白页
        var openNew = document.getElementById('new');
        openNew.onclick = function(){
            open('about:blank','_self')
        }
    </script>
</html>

BOM的其他元素

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
    </body>
    <script type="text/javascript">
        //1.获取浏览器的信息 返回浏览器的用户设备信息
        console.log(window.navigator.userAgent)
        
        //2.windows.location用于获得当前页面的地址 (URL)，并把浏览器重定向到新的页面。
//      console.log(window.location)
        
        //这个方法使用的比较多

        //window.location.href = 'https://www.baidu.com';
        
        //3.全局刷新 window.location.reload()  尽量少用
        //window.location.reload()
    </script>
</html>

client系列

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{
                padding: 0;
                margin: 0;
            }
            #box{
                width: 200px;
                height: 200px;
                border: 5px solid red;
                padding: 10px;
                
            }
        </style>
    </head>
    <body>
        <div id="box">
            
        </div>
    </body>
    <script type="text/javascript">
        var box = document.getElementById('box')
        
        console.log(box.clientTop)
        console.log(box.clientLeft)
        console.log(box.clientHeight)
        console.log(box.clientWidth)
    </script>
</html>

屏幕的可视区域

所谓的屏幕克是区域，就是当你首次打开浏览器能看见的区域。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
    </body>
    <script type="text/javascript">
        //
        window.onload = function(){
            console.log(document.documentElement.clientWidth)
            console.log(document.documentElement.clientHeight)
        }
    </script>
</html>

我们也可以对屏幕的大小进行监听，当屏幕或宽度改变，那么我们的值也跟着改变

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
    </body>
    <script type="text/javascript">
        //
        window.onload = function(){
            console.log(document.documentElement.clientWidth)
            console.log(document.documentElement.clientHeight)
            
            window.onresize = function(){
                console.log(document.documentElement.clientWidth)
                console.log(document.documentElement.clientHeight)
            }
        }
    </script>
</html>

offset系列

没有设置盒子定位

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{
                padding: 0;
                margin: 0;
            }
            #wrap{
                
            }
            #box{
                width: 200px;
                height: 200px;
                border: 1px solid red;
                padding: 10px;
                margin: 10px;
            }
            
        </style>
    </head>
    <body>
        <div id="wrap">
            <div id="box">
                
            </div>
        </div>
    </body>
    <script type="text/javascript">
        
        var box = document.getElementById('box');
        
        
        console.log(box.offsetTop)
        console.log(box.offsetLeft)
        console.log(box.offsetWidth)
        console.log(box.offsetHeight)
        
    </script>
</html>

如果设置了父相子觉，那么

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{
                padding: 0;
                margin: 0;
            }
            #wrap{
                position: relative;
                width: 400px;
                height: 400px;
                border: 1px solid black;
            }
            #box{
                position: absolute;
                top: 20px;
                left: 20px;
                width: 200px;
                height: 200px;
                border: 1px solid red;
                padding: 10px;
                margin: 10px;
            }
            
        </style>
    </head>
    <body>
        <div id="wrap">
            <div id="box">
                
            </div>
        </div>
    </body>
    <script type="text/javascript">
        
        var box = document.getElementById('box');
        
        
        console.log(box.offsetTop)
        console.log(box.offsetLeft)
        console.log(box.offsetWidth)
        console.log(box.offsetHeight)

        
    </script>
</html>

文章详情

JavaScript

JavaScript介绍

JavaScript是什么？

JavaScript历史背景介绍

JavaScript的用途

JavaScript和ECMAScript的关系

JavaScript入门易学性

JavaScript的组成

第一个JavaScript实例

引入JavaScript的3种方式

Hello,JavaScript!

alert语句

JavaScript的语法规则

JavaScript在网页中输出信息的写法

prompt()方法

JavaScript中的变量

变量的含义

变量的声明和定义

变量名的命名规范

JavaScript基本数据类型

基本数据类型

引用数据类型

JavaScript的运算符

特殊情况

JavaScript中的流程控制语句

if语句

switch

while

do...while

for循环

数组的创建和使用

数组的基本操作

数组的常用方法

函数的使用

Object_构造函数

String_Number

Date对象的使用

Math对象的使用

JavaScript案例

模态框案例

点一点有惊喜

简易留言框

选项卡

仿淘宝搜索框

匀速移动案例

5秒自动关闭广告

小米轮播图

轮播图

JavaScript的BOM知识点

BOM输出

open_close方法

BOM的其他元素

client系列

屏幕的可视区域

offset系列

软考中级精品资料免费领

相关文章

猜你喜欢

【转】eval()函数(javascript) - [javaScript]

JavaScript

JavaScript基础入门--JavaScript简介

【JavaScript】JavaScript基础详解（文末送书）

javascript注释@

JavaScript Day12 BOM

Javascript Study Memo

Javascript Game (转)

JavaScript详解

javascript压缩

JavaScript 简介

javascript 出错

设置javascript

JavaScript ,Python,j

JavaScript函数介绍：5分钟了解JavaScript

web前端：JavaScript重构之JavaScript的测试

JavaScript预解析

push方法javascript

JavaScript隐藏URL

javascript filter实现