第五模块：WEB开发基础第2章·JavaScript基础

时间 2019-11-29

标签第五模块 web 开发基础 javascript 栏目 HTML 繁體版

原文原文链接

01-JavaScript的历史发展过程
02-js的引入方式和输出
03-命名规范和变量的声明定义
04-五种基本数据类型
05-运算符
06-字符串处理
07-数据类型转换
08-流程控制语句if
09-switch
10-while
11-do_while
12-for循环
13-for循环练习
14-数组的建立和使用
15-数组的经常使用方法
16-函数的使用
17-Object_构造函数
18-String_Number
19-Data的使用
20-Math对象的使用
21-定时器的使用
22-正则表达式建立
23-元字符和正则表达式练习案例
24-模态框案例
25-点击有惊喜案例
26-简易留言板
27-选项卡
28-仿淘宝搜索框
29-获取当前最新的时间
30-匀速运动案例
31-5秒以后关闭广告
32-小米滚动
33-无缝轮播图
34-BOM_输出
35-open_close
36-BOM的其余对象
37-client系列
38-屏幕的可视区域
39-offset系列
40-scroll系列

01-JavaScript的历史发展过程

一、为何要学习JavaScript？！

表单验证——减轻服务器压力；
制做页面特效；
动态改变页面内容；

二、JavaScript是什么以及其历史发展过程；

　　JavaScript是一种Web前端的描述语言，也是一种基于对象(Object)和事件驱动(Event Driven)的安全性好的脚本语言。javascript

　　JavaScript运行在客户端，从而可以减轻服务端的压力；css

1）JavaScript的特色以下：html

一、主要用来向html页面中添加交互行为（如何理解‘交互’二字呢？）；前端

二、是一种脚本语言，语法和C语言系列语言的语法相似，属于“弱语言”类别；java

三、通常用来编写客户端脚本，如Node.js例外；python

四、是一种解释型语言，边执行边解释无需另外编译；web

2）历史老是惊人的类似（我随口说的），详情见知乎大牛阐述；正则表达式

https://zhuanlan.zhihu.com/p/27985124数组

三、JavaScript的一些典型应用；

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

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

实际应用场景：

切水果
愤怒的小鸟

2004年雅典奥运会

https://2004.sina.com.cn/

2008年北京奥运会

https://2008.sina.com.cn/

2010年南非世界杯

https://2010.sina.com.cn/

2016里约奥运会

https://2016.sina.com.cn/

四、JavaScript和ECMAScript的关系是什么？

　　ECMAScript是脚本程序设计语言的Web标准；

　　ECMAScript是欧洲计算机制造商协会，基于美国网景通信公司的Netscape发明的javaScript和Microsoft公司随后模仿javaScript推出JScript脚本语言制定了ECMAScript标准；

五、JavaScript由哪几部分组成？

ECMAScript；
DOM；
BOM；

02-js的引入方式和输出

一、Js之父；

　　Brendan Eich在1995年在Netscape发明了JavaScript语言；

　　貌似伟大的事情，都是发生在咱们九零后出生的年代，说明咱们可能不通常，会改变世界！哈哈。

二、Js的核心语法初识；

数据类型；
常量和变量；
运算符；
表达式；
条件判断语句；
循环语句；
跳转语句；
异常处理语句；

总之，语言是相同的，只是不一样的语言有各自的“特性”，即咱们不同！

三、Js的基本结构；

1）有图有真相啦！

四、Js开发工具简介；

1）推荐只以为更好的吧！（主要是国产，支持中文社区蓬勃发展）

五、编写人生中的第一个JavaScript实例（保持仪式感）；

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8" />
    <title>02-js的引入方式和输出之编写人生中的第一个JS文件</title>
    <style type="text/css">
        .span1{
            color: red;
        }
    </style>
    <!--不推荐在此处写JavaScript-->
    <!--<script type="text/javascript">
        
    </script>-->
    <!--引入js文件的方式以外链式-->
    <script src="./js/1外链式引入js方式.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
    <!--DOM-Document Object Model-行内式引入JS的方式-->
    <p id="p1" onclick="clickhandler()">123</p>
    <!--<span>崔晓昭爱学习</span>-->
</body>
<!--引入js文件的方式以内部式，建议引入的时候要放在body标签以后，由于
    咱们要等待全部的DOM元素加载完成以后再去执行相应的JS操做；
-->
<script type="text/javascript">
    document.write('有一首歌叫作:我爱你中国')
    document.write('<span class="span1">13811221893</span>')
    function clickhandler () {
        //弹出警告框
        /*
        这是一个方法，
        一个很好的方法，
        以上就是JavaScript的多行注释的使用方法；
        */
//        alert(1);
        window.alert('崔晓昭，一名优秀的开源社区开发者！');
        console.log('李静瓶，今天真的很漂亮！')
        console.error('抛出异常啦！')
        console.dir(window)
    }
</script>    
</html>

六、JS的经常使用输出方式；

document.write('崔晓昭')#向文档内输入内容，不会覆盖原文档的内容；
console#控制台，输出 [开发者工具]、F12快捷键；
console.log()#向控制台抛出一条信息；
console.error()#向控制台抛出异常信息；
console.dir()#输入一个对象的所有属性;
console.clear()#清除内容;

小结：每一个能独立完成一个功能的代码以分号结束，这就是一个代码块；

alert()#弹出一个带有一条指定消息的信息(警告)；
innerHTML/innerText#获取或者向指定元素内添加内容；
innerHTML#获取元素内全部的内容(包括元素),还能够解析内容的样式；
innerText获取元素内的文本内容；

03-命名规范和变量的声明定义

一、Js的变量初识；

变量;
常量（不发生变化的量，好比911事件的发生日期）；

　　即在程序运行过程当中它的值是容许改变的量。与它对应的就是常量：即在程序运行过程当中它的值是不容许改变的量;

　　变量是指程序中一个已经命名的存储单元，他的主要做用就是为数据操做提供存放信息的“容器”。变量的两个特征，变量名和变量值。好比能够把变量看作是一个贴着标签的盒子，标签上的名字就是这个变量的名字，而盒子里面的东西就是变量的值。

二、变量的声明和定义；

先声明，后定义；
声明时候马上定义；

var dog;
// alert(dog) //undefined  未定义
// 定义
dog = '小黄';

var dog_2 = '小红';
console.log(dog_2); //小红

三、变量名的命名规范；

一、必须以字母或下划线开头，其余字符能够是字母、数字以及下划线的任意组合；
二、变量名不能包含空格，如+或-等符号；
三、JavaScript严格区分大小写，如UserName不等价于username
四、不能使用JavaScript中的保留字和关键字，如else、int、long、throw等，具体见表格中体现；
五、除了关键字外，top、name也尽可能不要使用，避免浏览器解析异常；
六、变量名要见文知意，好比var fdasfda=19930911，神仙都看不懂；
七、不要使用拼音，也不太太长，应该使用英文单词，好比var age = 26 ;而不是var nianling=26;
八、变量定义结束后，要以分号结尾;（事实上，咱们建议每一行Js代码结尾都是分号，养成好习惯！）

四、常见的js中的保留字和关键字；

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8" />
    <title>03-命名规范和变量的声明定义</title>
    <style type="text/css">

    </style>

</head>
<body>
    <script type="text/javascript">
        //变量的声明：
        //js中的代码的执行顺序：自上而下！
        //一、先声明，再定义；
        var dog;
        alert(dog)//undefined，未定义的
        dog = '小黄';
        alert(dog)
//        alert(dog)
//        alert(dog)
//        alert(dog)
//        alert(dog)
//        alert(dog)
//        alert(dog)
        //二、声明变量的时候，马上定义；
        var dog2 = '小红';
        alert(dog2)
        //三、变量的命名规范
        /*
        一、必须以字母或下划线开头，其余字符能够是字母、数字以及下划线的任意组合；
        二、变量名不能包含空格，如+或-等符号；
        三、JavaScript严格区分大小写，如UserName不等价于username
        四、不能使用JavaScript中的保留字和关键字，如else、int、long、throw等，具体见表格中体现；
        五、除了关键字外，top、name也尽可能不要使用，避免浏览器解析异常；
        六、变量名要见文知意，好比var fdasfda=19930911，神仙都看不懂；
        七、不要使用拼音，应该使用英文单词，好比var  age = 26 ;而不是var nianling=26;
        八、变量定义结束后，要以分号结尾;
        
         命名法：
         一、驼峰命名法bornDate、firstName、trueAge；
         二、下划线分割法come_from、birth_date；
         三、匈牙利命名法：就是根据数据类型单词的首字符做为前缀，如i_number；
         固然，建议使用驼峰命名法；
        */
    </script>
</body>
</html>

04-五种基本数据类型

一、JavaScript中的数据类型；

基本数据类型；
引用数据类型；

二、基本数据类型初识；

number(js中统一为数字类型);
string;
boolean;
null;
undefined;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>04-五种基本数据类型</title>
    <style type="text/css">

    </style>
</head>
<body>
    <script type="text/javascript">
        //js中有两种数据类型：一、基本数据类型；二、引用数据类型；
        //基本数据类型：：number、string、boolean、null、undefined；
        
        //一、数字类型number;
        var a = 123;
        console.log(a)
        //如下两种方法都可，查看数据类型;
        console.log(typeof a)#推荐使用该方法；
        console.log(typeof(a))
        
        
        //二、字符串类型string;
        var str = 'cuixiaozhao';
        console.log(str)
        //查看数据类型；
        console.log(typeof str)
        
        
        //三、布尔类型boolean;
        var b1 = true;
        console.log(typeof(b1))
        var b1 = false;
        console.log(typeof b1)
        
        //四、null；
        var c1 = null;//空对象.object
        console.log(c1)//null
        
        //五、未定义类型undefined;
        var d1;
        console.log(d1)//undefined
        console.log("类型:",typeof d1)//undefined
        
        //六、无限大-Infinity;
        var e1 = 5/0 //除数不能为零,不符合逻辑;但0/0返回值为NaN，即Not a Number；
        console.log(e1)//Infinity-无限大,可是数据类型为：number，试想：无限大的数字，本质也仍是数字嘛;
        console.log(typeof e1)
    </script>
</body>
</html>

05-运算符

一、运算符概念初识；

　　js中的运算符跟python中的运算符有点相似，但也有不一样。所谓运算,在数学上，是一种行为，经过已知量的可能的组合，得到新的量。

二、赋值运算符；

三、算数运算符；

四、比较运算符；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>05-运算符</title>
    <style type="text/css">

    </style>
</head>
<body>
    <script type="text/javascript">
        //一、赋值运算符；
        var money = prompt('请输入金额:');
        var savaMoney = money*(1+0.02);
        console.log(savaMoney);
        
        //二、算数运算符；
        var a = 10;
        var b = 4;
        var sum = a + b;
        var min = a - b;
        
        var div = a / b;
        console.log(div)
        
        var lef = a % b;
        console.log(lef)
        
        //三、符合运算符；
        var c =7,d = 8;
//        var e;
//        e = c + d;
//        console.log(e)
        //使用如下方法代替；
         d = c + d;
         d += c//+和=之间不能有空格；
         
        //自增、自减；
        //d++:先赋值再++，即先将d的值赋值给c1而后再让d+1对d进行再次赋值；
        var c1 = d ++;
        var c2 = ++ d;
        
        //三、比较运算符；
        //>,<,>=,<=,==,===
        console.log(5>6)//false
        console.log(5==5)//true
        //隐式转换：==是比较值的大小，===是值和类型都进行比较;
        console.log("5"==5)//true
        console.log("5"===5)//false
        
        //四、逻辑运算符；
        // &&-and(且),即“都真为真”，只要有一个假就是假；
        console.log("",true&&false)
        
        // ||-or(或)，即“有真就真”,两个都为假才是假；
        console.log(false||false)//false
        console.log(false||true)//true
        
        //五、 字符串的拼接；
        var cxz = 'cuixiaozhao';
        var ljp = 'lijingping';
        var cxz_ljp_sum = cxz + ljp;
        var cxz_ljp_mul = cxz * ljp;
        console.log(cxz_ljp_sum)
        console.log(cxz_ljp_mul)
    </script>
</body>
</html>

06-字符串处理

一、字符串的拼接举例；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>06-字符串处理</title>
    <style type="text/css">

    </style>
</head>
<body>
    <script type="text/javascript">
        //字符串的运算；
        var firstName = '晓昭';
        var lastName = 'Cui';
        var fullName = firstName + " " + lastName
        console.log(fullName)
        
        //字符串的拼接举例；
        var readBooks = '读书';
        var watchMovies = '看电影儿';
        var goHiking = '去旅行';
        var expriences = '经历一些事情';
        var improve = "提高人生境界的几种途径：一、" + readBooks + ";二、" + watchMovies + ";三、" + goHiking + ";四、"+expriences + ";"
 
        var fullImprove = improve;
        console.log(fullImprove)
        
        //不能对字符串进行+运算，只能是字符串的拼接；
        var a1 = '1';
        var a2 = '2';
        console.log(parseInt(a1+a2))//12，此处是拼接；
        
        console.log(typeof(a1+a2))
        
        var b1 = 'one';
        var b2 = 'two';
        //NaN.=not a number
        console.log(typeof(b1*b2))
    </script>
</body>
</html>

07-数据类型转换

一、将数值类型转换成为字符串类型；

二、将字符串类型转换为数值类型；

三、任何数据类型均可以转换成boolean类型；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>07-数据类型转换</title>
    <style type="text/css">

    </style>
</head>
<body>
    <script type="text/javascript">
        //一、将咱们的数字类型，转换成字符串类型；
        var n1 = 123;
        var n2 = '';
        var n3 = n1 + n2;
        console.log(n3)
        //隐式转换，浏览器将数值类型转换成字符串类型，进行拼接操做；
        console.log(typeof n3)
        
        //经过String方法，强制类型转换；
        var str1 = String(n1);
        console.log(typeof str1);
        
        var num = 234;
        str_num = num.toString();
        console.log(typeof str_num)//string类型；
        
        //二、将字符串类型转换成数字类型；
        var stringNum = '19930911cxz!@#)^';
        var numberNum = Number(stringNum);
        console.log(numberNum)
        console.log(typeof numberNum)//转成了数字类型；
        
        //parentInt()方法，能够解析一个字符串，而且返回一个整数；
        console.log(parseInt(stringNum))
        
        //parseFloat()方法;
        console.log(parseFloat(stringNum))
        
        //在咱们js中全部的数据类型，都被转化为boolean类型，即返回值不是true就是false；
        var b1 = '123';
        var b2 = 0;
        var b3 = -1993;
        var b4 = Infinity;
        var b5 = NaN;
        var b6 ;//至关于undefined；
        var b7 = null;
        console.log(Boolean(b1))
        console.log(Boolean(b2))
        console.log(Boolean(b3))
        console.log(Boolean(b4))
        console.log(Boolean(b5))
        console.log(Boolean(b6))
        console.log(Boolean(b7))
    </script>
</body>
</html>

08-流程控制语句if

一、js中流程控制语句初识；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>08-流程控制语句if</title>
    <style type="text/css">

    </style>
</head>
<body>
    <h2>我是2级标题</h2>
</body>
    <script type="text/javascript">
    //if语句，若是()，就怎么样了。
    var chicken = 10;
    if(chicken>=20){
        console.log('恭喜你，吃鸡成功，大吉大利！')
    }else{
        console.log('不要灰心，继续努力，下次就吃上鸡 啦！')
    }
    alert(222)
    //js中代码的解析顺序，从上往下执行。
    
    //考试系统录入
    var math = 90;
    var english = 85;
    var sum = 485;
    //一、模拟第一种状况，总分>400 而且数学>89，被清华大学录取；
    if (sum >400 && math >89){
        console.log('恭喜您，被清华大学录取成功啦！')
    }else{
        alert('高考失利，没有关系！')
    }
    
    //二、若是总分大于400，或者你的英语成绩大于85，就被上海复旦大学所录取；
    if (sum > 500 || english >85){
        alert('恭喜您，已被复旦大学所录取！')
    }else{
        console.log('高考失利，没有关系！去吃鸡吧。')
    }
    //三、在内部做用域进行+-*/等四则运算；
    if (sum >500 || (math + english)>170){
        alert('组合起来也可使用的！本身练习一下哈。')
    }
    </script>
</html>

09-switch

一、js 中的switch用法详解；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>09-switch</title>
    <style type="text/css">

    </style>
</head>
<body>
    <script type="text/javascript">
        //swith
        var gameScore = 'better';
        //case
        switch(gameScore){
            //case表示条件，知足就会走进来！
            case 'good':
            console.log('玩得很好呀！')
            break;//表示退出；
            case 'better':
            console.log('玩的老牛逼啦')
            break;
            case 'best':
            console.log('恭喜你，吃鸡成功！')
            break;
            default:
            console.log('很遗憾啦！没有匹配上成绩。')
        }
        alert(1)
    </script>
</body>
</html>

10-while

一、while循环初识及其三部曲；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>10-while</title>
    <style type="text/css">

    </style>
</head>
<body>

</body>
    <script type="text/javascript">
        //while循环三部曲；
        //一、初始化循环变量；二、判断循环条件；三、更新循环变量；
//        var i = 1;
//        while(i <9){
//            console.log(i)
//            i += 1;
//        }
        //小练习
        //将1~100之间，全部是3的倍数的数字打印出来；
        var num = 1;
        while(num <=100){
            if(num % 3 ===0){
                console.log(num)
            }
            num++;
        }
    </script>
</html>

11-do_while

一、do~while与while 的区别；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>11-do_while</title>
    <style type="text/css">

    </style>
</head>
<body>

</body>
    <script type="text/javascript">
    //一、初始化循环变量；二、判断循环条件；三、更新循环变量；
    //无论有没有while中的条件，do里面的代码都会先执行一次！
    var i =3;
    do{
        console.log(i)
        i++;
    }while (i < 10 )
    </script>
</html>

12-for循环

一、for循环初识；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">

    </style>
</head>
<body>

</body>
    <script type="text/javascript">
        //for循环；
        
        //一、初始化；二、循环条件；三、更新循环变量；
        //打印1~10之间的数字；
        for(var i = 1;i <=10;i++){
            console.log(i)
        }
        //循环打印1~100之间的偶数；
        for(var j=1 ; j <=100;j++){
            if(j % 2 == 0){
                console.log(j)
            }
        }
        //一、计算1~100之间的全部数字的和；
        var sum = 0;
        for(m = 1;m <=100;m++){
            sum += m;    
        }
        console.log(sum)
        //二、浏览器上打印以下内容（循环套循环）
        //*****
        //*****
        //*****
        
        for(var row =1;row <=6;row++){
            for(var line = 1;line <=4;line++ ){
                document.write('*')
            }
            document.write('<br>')
        }
        //小练习；输出直角三角形；6行；等边三角形；
        
    </script>
</html>

13-for循环练习

一、打印直角三角形和等边三角形；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">

    </style>
</head>
<body>

</body>
    <script type="text/javascript">
        //需求01：打印直角三角形；
        for(var line =1;line <=6;line++){
            for(row=1;row <=line;row++){
                document.write('*')
            }
            document.write('<br>')
        }
        
        
        
        //需求02：打印等腰三角形；
        for(line=1;line <=6;line++){
            //控制空格数；
            for(nbsp=line;nbsp <=6;nbsp++){
                document.write('&nbsp;')
            }
            //控制*的数量；
            for(var star=1;star <=2*line-1;star++){
                document.write('*')
            }
            document.write('<br>')
        }
    </script>
</html>

14-数组的建立和使用

一、js中数组的建立与使用；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>14-数组的建立和使用</title>
    <style type="text/css">

    </style>
</head>
<body>

</body>
    <script type="text/javascript">
        //js的数组即Python中的列表；是一个容器，用来装东西；
        
        //建立数组:
        
        //一、字面量方式建立数组(推荐使用该方式建立-简单粗暴)；
        var colors = ['red','green','yellow'];
        console.log(colors)
        console.log(typeof colors)
        //建立空数组
        var emptyArray = [];
        //二、使用构造函数的方式建立；
        var colors = new Array();
        
        
        var peoples = new Array('cxz','cxs','cxl','cql','gzf');
        console.log(peoples)
        
        //数组的从新赋值；
        var arr= [];
        arr[0] = 123;
        arr[1] = '崔晓昭';
        arr[2] = '崔晓珊';
        console.log(arr);
        
        //经过下标取到相应的值；
        console.log(arr[2]);
        console.log(arr.length);
        
        //实际使用；
        for(var i=0;i<arr.length;i++){
            console.log(arr[i])
        }
    </script>
</html>

15-数组的经常使用方法

一、js中的数组的经常使用方法；

网站推荐：

百度搜索：开发者网络

https://developer.mozilla.org/zh-CN/

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>15-数组的经常使用方法</title>
    <style type="text/css">

    </style>
</head>
<body>

</body>
    <script type="text/javascript">
        //一、数组的合并；concat()
        var north = ['北京','天津','石家庄'];
        var south = ['上海','杭州','昆明'];
        var newArr = north.concat(south);
        console.log(newArr)
        
        //二、将数组转换成字符串;
        var score = [98,78,76,100,0];
        //toString()直接转换成数组；
        var strScore = score.toString();
        console.log(strScore)
        console.log(typeof strScore)
        
        //join()方法；将数组中的元素使用指定的字符串链接起来，它会造成一个新的字符串；
        var str2 = score.join('*');
        console.log(str2)
        
        
        //三、经过内容查找下标；indexOf(),若是查找的值不在范围内，返回值为：-1；
        var index = score.indexOf(100);
        console.log(index)
        
        
        //反向查找lastIndexOf()
        var lastindex = score.lastIndexOf(100);
        console.log(lastindex)
        
        //数组的排序；
        var names= ['崔晓昭','崔晓珊','崔晓丝','崔晓磊'];
        //四、反转数组reverse()；
        var reverseNames = names.reverse();
        console.log(reverseNames)
        console.log(reverseNames[0])
        
        
        //五、sort；按照26个字母排序sort()；
        var enames = names.sort();
        console.log(enames)
        
        
        //六、移除元素和添加元素；
        //移除咱们的第一个元素,返回的结果是移除的第一个元素，原来数组中的第一个元素，被移除了；
        var firstName = names.shift();
        console.log(firstName)
        console.log(enames)
        console.log(names)
        
        //unshift()向数组的开头，添加一个或者多个元素，并返回新的长度；
        var lastNames = names.unshift('李静瓶');
        console.log(lastNames)
        console.log(names)
        
        
        //push()向数组的末尾添加一个或者多个元素，并返回新的长度length；
        var newNames = names.push('高志粉','崔青良');
        console.log(newNames)
        console.log(names)
        
        //pop()删除数组中的最后一个元素；
        var popNames = names.pop();
        console.log(popNames)
        
        
        //小练习：
        var luffyCity = 'Hello LuffyCity';
        var splitLuffy = luffyCity.split('')
        console.log(splitLuffy)
        console.log(splitLuffy.reverse().join(''))
        </script>
</html>

16-函数的使用

一、js中函数初识及基础使用方法介绍；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>16-函数的使用</title>
    <style type="text/css">

    </style>
</head>
<body>

</body>
    <script type="text/javascript">
        //1、函数的建立
        
        //js中的函数的声明，记得：有函数的声明，就必定有调用；
        function add(){
            alert('函数被调用了')
            //执行一些操做    
        }
        //二、函数的执行
//        add()

        //2、声明函数的时候带有参数；
        function add2(a,b){
            alert(a+b)
        }
//        add2(2,3)
        
        //3、函数有返回值
        function add3(x,y){
            return x+y
        }
        var sum = add3(9,11)
        alert(sum)
    </script>
</html>

二、函数的调用方式；

声明后直接调用；
声明函数带有形式参数；
声明函数带有参数而且有返回值；

17-Object_构造函数

一、构造函数初识；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>17-Object_构造函数</title>
    <style type="text/css">

    </style>
</head>
<body>

</body>
    <script type="text/javascript">
        //一、js对象的建立；
        
        //一、字面量方式建立；咱们推荐使用该种方式；优势：简单直观
        //key:value;
        var student = {
            name:'cuixiaozhao',
            age:22,
            fav:'lijingping'
        }
        console.log(student)
        console.log(window)
        //点语法:包括get和set方法；
        var n = student.name;
        console.log(n)
        
        student.age = 18;//从新进行赋值！
        console.log(student.age)
        
        //二、使用Object()建立对象,首字母大写；
        function add(){
            
        }
        add()
        //Object()构造函数：一、首字母大写；二、遇见构造函数，要想建立对象，使用new
        var obj = new Object();
        obj.name = 'lijingping';
        console.log(obj)
        
        //----------构造函数--------------
        //一、函数名首字母要大写；二、构造函数不须要return；三、为对象添加成员变量；this.from = '石家庄'
        var stu = function(){
            this.name = '高志粉';
            this.age = 50;
            this.fav = function(){
                console.log('挣钱养家')
            }
        }
        //建立这个对象；
        var s = new stu();
        console.log(s)
        
        var s1 = new stu();
        console.log(s1)
        //有弊端，每次new一个对象，里面的成员的变量和方法都同样，及内存地址同样；
        
        
        //推荐你们使用的构造函数的方式；
        function Animal(){
            this.name = '李静瓶';
            this.age = 22;
            this.fav = function(){
                console.log(this.age)
            }
        }
        Animal.prototype.showname = function(){
            //执行相应操做；
            alert(this.name)
        }
        
        var a = new Animal()
        a.showname()
    </script>
</html>

18-String_Number

一、String_Number初识；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">

    </style>
</head>
<body>

</body>
    <script type="text/javascript">
        //内置对象
        //String 字符串对象；
        var str = 'hello cuixiaozhao';
        console.log(str.length)
        
        //小写转换成大写；
        var bigStr = str.toUpperCase();
        console.log(bigStr)
        
        //大写换转成小写；
        var smallStr = bigStr.toLowerCase();
        console.log(smallStr)
        
        
        //第一个参数是以什么什么样的字符串进行切割，第二个参数是返回的数组的最大长度；
        var newArr = str.split('',10)
        console.log(newArr)
        
        //左闭右开区间，会返回一个新的字符串；
        var a = str.substring(2,6);
        console.log(a)
        
        
        //number
        
        //一、将number类型转换成字符串类型；
//        var num = 132.54321;
        var num = 132.45321;
        var numStr = num.toString();
        console.log(typeof numStr)
        
        //二、四舍五入
        var newNum = num.toFixed();
        console.log(newNum)
    </script>
</html>

w3school网站上有关字符串方法的介绍：

http://www.w3school.com.cn/jsref/jsref_obj_string.asp

19-Data的使用

一、js中date方法的简述，详情见w3school；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>19-Date的使用</title>
    <style type="text/css">

    </style>
</head>
<body>

</body>
<script type="text/javascript">
    //建立日期对象；
    var myDate = new Date();
    //获取一个月中的某一天
    console.log(myDate.getDate())//7,表明当月7号
    console.log(Date())// "Tue Aug 07 2018 11:20:34 GMT+0800 (China Standard Time)"
    //
    console.log(myDate.getMonth())//返回值，7，表示8月
    console.log(myDate.getMonth()+1)//返回真实数值，8，表示8月
</script>
</html>

W3school：

http://www.w3school.com.cn/jsref/jsref_obj_date.asp

20-Math对象的使用

一、Math对象的常见用法；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>20-Math对象的使用</title>
    <style type="text/css">

    </style>
</head>
<body>

</body>
    <script type="text/javascript">
            var x = 1.234;
            //天花板函数；
            var a = Math.ceil(x);
            console.log(a)
        
            var b = Math.floor(x);
            console.log(b)
            
            
            //求两个数中的最大值；
            console.log(Math.max(2,5));
            console.log(Math.min(2,5));
            
            //常用 random
            var ran = Math.random();
            console.log(ran)//返回值在0~1之间的随机小数，包含0不包含1；
            
            //100~200之间的随机数；
            var c = Math.random()*100 +100
            console.log(c)//"146.44407788291574"    
            
            //min~max之间的随机数；5~15之间的随机数；公式：
            min + Math.random()*(max-min)
            5 + Math.random()*(15-5)
            
    </script>
</html>

W3School：

http://www.w3school.com.cn/jsref/jsref_obj_math.asp

21-定时器的使用

一、js中的定时器初识；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>21-定时器的用法</title>
    <style type="text/css">

    </style>
</head>
<body>

</body>
    <script type="text/javascript">
        var n =0;
        var time = window.setInterval(function(){
            n++;
            console.log(n)
        },1000)
        
        //setTimeout(code,1000)
        setTimeout(function(){
            console.log(time)
            window.clearInterval(time)
        },5000)
    </script>
</html>

22-正则表达式建立

一、js中正则表达式初识；

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>22-正则表达式建立</title>
    </head>
    <body>
    </body>
    <script type="text/javascript">
        //RegExp对象;
        
        //建立正则对象方式1
        //参数1  正则表达式（不能有空格）
        //参数2  匹配模式：经常使用g（全局匹配；找到全部匹配，而不是第一个匹配后中止）和i（忽略大小写吧）
    
        var str = 'hello World';
        var reg1 = new RegExp('e','ig');
        console.log(reg1)
        
        //2.字面量方式建立
        var reg2 = /o/gi;//检测字符e，不区分大小写，全局匹配
        
        //正则对象提供的检索方式
        //test() 检测字符串中是否包含定义字符模式，返回布尔
        //要检索的字符在字符串str中 返回true
        console.log(reg2.test(str));
            
        //2.2  exec()  具体执行匹配，返回数组
         console.log(reg2.lastIndex); // 2 保存一次匹配时开始的下标
         console.log(reg2.exec(str));  //["o", index: 7, input: "hello world"]
         console.log(reg2.lastIndex); //2
            
        //3.经常使用方法
        //match
        var reg3 = /d/g;
        
        console.log(str.match(reg3))
        
        //2.replace替换： str.replace(被替换的，替换的)
        console.log(str.replace(reg3,'*'));
        
        //3.search()
        console.log(str.search(reg3));//查询字符串在字符中出现的位置 下标
                
        //4.split()
        console.log(str.split(reg3));    
    </script>
</html>

23-元字符和正则表达式练习案例

一、元字符练习；

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script>
        window.onload = function (){
            //元字符 一些匹配的规则
            //1.单个字符和数字
            //1   . 匹配除换行符觉得的任意字符
            var str = "luffycity 2018";
            var reg = /./g;
            console.log(reg.exec(str));
            
            
            var str = "www.baidu.com";
            var reg = /www\......\.com/g;   //若是想不让字符有其余意义  转义\
            console.log(reg.exec(str));

            //2.   []  匹配[]里面的任意一个字符
            var str1 = "hello";
            var reg1 = /[a-zA-Z0-9]/g; // 匹配字母仍是数字
            console.log(reg1.exec(str1));

            var str2 = "a1343";
            var reg2 = /[0-9][0-9][0-9]/g;
            console.log(reg2.exec(str2));

            //3.  [^]   全部不在这个范围内的字符
            var str3 = "abd123";
            var reg3 = /[^a-z][^A-Z]/g;  //匹配除小写字母之外的任意字符
            console.log(reg3.exec(str3));


            //4.  \d:匹配数字 对立 \D:匹配非数字
            var str4 = "web";
            var reg4 = /\d/g;   //匹配数字
            var reg5 = /\D/g;   //非数字
            console.log(reg4.exec(str4));  //null
            console.log(reg5.exec(str4));  //w
            
            //5.\w:匹配数字、字母、下划线  \w:匹配除数字
            var reg6 = /\w/g;  //匹配数字 字母  下划线_
            var reg7 = /\W/g;  //匹配除数字 字母  下划线之外的任意字符
            console.log(reg6.exec(str4));   //w
            console.log(reg7.exec(str4));   //null

            var reg8 = /\s/g; //空格
            var reg9 = /\S/g; //非空白字符
            console.log(reg8.exec(str4));   //null
            console.log(reg9.exec(str4));   //w

            //5 锚字符  ^以什么开头     $以什么结尾
            var str = "www.luffycity.com";
            var reg10 = /^www/g;  // ^字符
            console.log(reg10.exec(str));

            var reg11 = /www\.*$/g;   //字符$
            console.log(reg11.exec(str));





            //重复的字符
            //?  匹配前面的字符0个或1个 ，
            var strs = "webr44546ere";
            var reg12 = /[0-9]?/g;
            console.log(reg12.exec(strs));

            //*  匹配0个或任意多个字符    尽量多的匹配
            var reg13 = /[a-z]*/g; //匹配小写字母，0个或多个
            console.log(reg13.exec(strs));


            //+ 至少匹配一次
            var reg14 = /\d+/g;
            console.log(reg14.exec(strs));

            //{4}
            var stra = "11274567800";
            var rega = /^1\d{10}$/g; //匹配连续的四个数字
            console.log(rega.exec(stra));

            //{1,4} 最少一个最多4个
            var strb = "edg";
            var regb = /^[a-zA-z]{2,3}$/g;
            console.log(regb.exec(strb));


            //||  竖线  或者
            var strc = "www.google"; //baidu  google   luffycity
            var regc = /www.baidu|google|luffycity/g;
            console.log(regc.exec(strc));


            //() 分组
            var strc = "www.google"; //baidu  google   luffycity
            var regc = /www.(baidu)|(google)|(luffycity)/g;
            console.log(regc.exec(strc));

            console.log(RegExp.$1);
            console.log(RegExp.$2);
            console.log(RegExp.$3);


            var str = "helloworld";
            var reg = /(hello)(world)/g;
          /*  console.log(reg.exec(str));
            console.log(RegExp.$1);*/
            console.log(str.replace(reg,"$2 $1"));


        }
    </script>
</head>
<body>

</body>
</html>

在线笔记连接；

https://www.processon.com/view/link/5b3d87d8e4b00c2f18be35e4

24-模态框案例

一、DOM简介；

DOM 是 W3C（万维网联盟）的标准。

DOM 定义了访问 HTML 和 XML 文档的标准：

“W3C 文档对象模型（DOM）是中立于平台和语言的接口，它容许程序和脚本动态地访问和更新文档的内容、结构和样式。”

W3C DOM 标准被分为 3 个不一样的部分：

核心 DOM - 针对任何结构化文档的标准模型
XML DOM - 针对 XML 文档的标准模型
HTML DOM - 针对 HTML 文档的标准模型

编者注：DOM 是 Document Object Model（文档对象模型）的缩写。

二、获取DOM节点的方法；

//经过id获取，惟一的
var oDiv = document.getElementById('box');
//经过类名获取
var oDiv = document.getElementsByClassName('.box')[0];
//经过标签名获取
var oDiv = document.getElementsByTagName('div')[0];

三、经常使用的DOM节点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>24-模态框案例</title>
    <style type="text/css">
        *{
            padding: 0;
            margin: 0;
        }
        html,body{
            height: 100%;
        }
        #box{
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,.3);
        }
        #content{
            position: relative;
            top: 150px;
            width: 400px;
            height: 200px;
            line-height: 200px;
            text-align: center;
            color: red;
            background-color: #fff;
            margin: auto;
        }
        #span1{
            position: absolute;
            background-color: red;
            top: 0;
            right: 0;
            width: 30px;
            height: 30px;
            line-height: 30px;
            text-align: center;
            color: #fff;
        }
    </style>
</head>
<body>
    <button id="btn" >弹出</button>
</body>
    <script type="text/javascript">
        //dom document object model
        //树状结构
        /*
        html
        head body 称之为节点
        span div button img
        */
        console.log(document)
        //一、获取DOM元素
        var btn = document.getElementById('btn');
        
        //二、建立divDOM元素
        var oDiv = document.createElement('div');
        var oP = document.createElement('p');
        var oSpan = document.createElement('span');
        
        oDiv.id = 'box';
        oP.id = 'content';
        oP.innerHTML = '模态框成功弹出';
        oSpan.id = 'span1';
        oSpan.innerHTML = 'X';
        
        oDiv.appendChild(oP);
        oP.appendChild(oSpan);
        
        
        console.log(btn)
        btn.onclick = function(){
//            alert(111)
            //动态的添加到body中一个div
//            console.log(this)
            
            console.log(btn.parentNode)
            btn.parentNode.insertBefore(oDiv,btn)
        }
        
        oSpan.onclick = function(){
//            removeChild
            oDiv.parentNode.removeChild(oDiv)
        }
    </script>
</html>

25-点击有惊喜案例

一、点击有惊喜小试牛刀；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>25-点击有惊喜案例</title>
    <style type="text/css">
        *{
            padding: 0;
            margin: 0;
        }
        .box{
            width: 200px;
            height: 200px;
            background: red;
            text-align: center;
            color: white;
            line-height: 200px;
            font-size: 23px;
            font-weight: bold;
            margin: 20px auto;
        }
    </style>
</head>
<body>
    <div class="box">
        <p>
            <span id="">
                
            </sp>
        </p>
        点击有惊喜！
    <!--</div>
    <div class="box">-->
        
    </div>
</body>
    <script type="text/javascript">
        //注意此处的[0]
        var oBox = document.getElementsByClassName('box')[0];
        console.log(oBox)
        console.log(oBox.innerHTML)
        console.log(oBox.innerText)
        
        
        var a = 0;
        oBox.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 = 'pink';
                this.innerText = '再点击就是粉色的了，不信你试试看！'
            }else{
                this.style.background = 'red'; 
                this.innerText = '点击有惊喜！'
            }
            
        }
    </script>
</html>

26-简易留言板

一、简易留言板功能开发；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>26-简易留言板</title>
    <style type="text/css">

    </style>
</head>
<body>
    <h1>简易留言板</h1>
    <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 btn = document.getElementById('btn');
        var msg = document.getElementById('msg');
        
        var count = 0;
        btn.onclick = function(){
            console.log(msg.value)
            var li = document.createElement('li');
            //设置内容；
            li.innerHTML = msg.value + "<span>&nbsp;&nbsp;X</span>"
            var lis = document.getElementsByTagName('li');
            if(lis.length == 0){
                ul.appendChild(li)
                count ++;
            }else{
                ul.insertBefore(li,lis[0])
            }
            
            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>

27-选项卡

一、选项卡实战练习；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>27-选项卡</title>
    <style type="text/css">
        *{
            padding: 0;
            margin: 0;
        }
        ul{
            list-style: none;
        }
        #tab{
            width: 480px;
            margin: 20px auto;
            border: 1px solid red;
        }
        ul li{
            float: left;
            width: 160px;
            height: 60px;
            line-height: 60px;
            text-align: center;
            background-color: #cccccc;
        }
        ul li a{
            text-decoration: none;
            color: black;
        }
        li.active{
            background-color: #FFFFFF;
        }
        p{
            display: none;
            height: 200px;
            text-align: center;
            line-height: 200px;
            background-color: #FFFFFF;
        }
        p.active{
            display: block;
        }
    </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>

28-仿淘宝搜索框

一、仿照淘宝搜索框；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>28-仿淘宝搜索框</title>
    <style type="text/css">
        *{
            padding: 0;
            margin: 0;
        }
        #search{
            position: relative;
            
        }
        input{
            /*清除input框的默认样式，此处为边框的颜色*/
            outline: none;
            /*先将行内元素设置为block属性*/
            display: block;
            width: 490px;
            height: 50px;
            font-size: 20px;
            margin-top: 20px;
            border: 2px solid green;
            /*innput 框四周变为圆角*/
            border-radius: 10px;
        }
        label{
            position: absolute;
            top: 20px;
            left: 10px;
            font-size: 12px;
            color: green;
        }
    </style>
</head>
<body>
    <div id="search">
        <input type="text" id="text"/>
        <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(this.value == ''){
                msg.style.display = 'block'
            }else{
                msg.style.display = 'none'
            }
        }
    </script>
</html>

29-获取当前最新的时间

一、js中获取年月日-时分秒的方法；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>29-获取当前最新的时间</title>
    <style type="text/css">

    </style>
</head>
<body>

</body>
    <script type="text/javascript">
//        document.body.innerHTML = '123';
    setInterval(function(){
        var date = new Date();
        
        //年月日，时分秒
        var year = date.getFullYear();
        console.log(year)
        var month = date.getMonth();
        var day = date.getDay();
        var hour = date.getHours();
        var minute = date.getMinutes();
        var second = date.getSeconds();
        
        //今天是2018年2月23日 08:23:09
        document.body.innerHTML = "今天是"+year +"年"+num(month+1)+"月"+num(day)+"日"+num(hour)+":"+num(minute)+":"+num(second)
    },2000)
    
    function num(n){
        if(n<10){
            return "0"+n//字符串的拼接，使得时间的显示格式为：2018年09月11日 12:19:18
        }
        return n
    }    
    </script>
</html>

30-匀速运动案例

一、div盒子匀速运动案例讲解；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>30-匀速运动案例</title>
    <style type="text/css">
        *{
            padding: 0;
            margin: 0;
        }
        .box{
            width: 200px;
            height: 200px;
            background-color: #FF0000;
            position: absolute;
            top: 50px;
            left: 10px;
        }
    </style>
</head>
<body>
    <div id="wrap">
        <button id="btn">运动</button>
        <div class="box" id="box1"></div>
    </div>
</body>
    <script type="text/javascript">
        var btn = document.getElementById('btn');
        var box1= document.getElementById('box1');
        
        var count = 0;
        var time = null;
        btn.onclick = function(){
//            box1.style.left = "20px";
            setInterval(function(){
                count +=5;
                if(count>1000){
                    clearInterval(time)
                    box1.style.display = "none"
                }
                box1.style.left= count +'px'
            },10)
            
        }
    </script>
</html>

31-n秒以后关闭广告

一、设置广告小图片展现的时间；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>31-5秒以后关闭广告</title>
    <style type="text/css">
        *{
            padding: 0;
            margin: 0;
        }
        ul{
            list-style: none;
        }
        img{
            /*固定图片的位置*/
            position: fixed;
        }
        #left{
            left: 0;
        }
        #right{
            right: 0;
        }
        ul li{
            font-size: 25px;
        }
    </style>
</head>
<body>
    <img src="images/1.gif" id="left"/>
    <img src="images/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>
        <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">
        window.onload =function(){
            var left = document.getElementById('left');
            var right = document.getElementById('right');
            
            
            //使用定时器，操做DOM，来限定图片的展现时间；
            setTimeout(function(){
                left.style.display = 'none';
                right.style.display = 'none';
            },2000)
        }
    </script>
</html>

32-小米滚动

一、js实现图片随着鼠标的垂直方向进行滚动；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>32-小米商城滚动</title>
    <style type="text/css">
        *{
            padding: 0;
            margin: 0;    
        }
        .wrap{
            width: 512px;
            height: 400px;
            border: 3px solid plum;
            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="images/mi.png"/ id="xiaomi">
        <span class="up" id="picUp"></span>
        <span class="down" id="picDown"></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 time = null;
        up.onmouseover = function(){
            //无论怎样，上来先清除定时器；
            clearInterval(time);
            time = setInterval(function(){
                count -=8;
                count >=-1070 ? img.style.top = count + 'px':clearInterval(time);
            },30)
        }
        down.onmouseover = function(){
            clearInterval(time);
            time = setInterval(function(){
                count +=10;
                count <0 ? img.style.top = count + 'px':clearInterval(time);
            },30)
        }
    </script>
</html>

33-无缝轮播图

一、js代码实现无缝轮播图；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>33-无缝轮播图</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="images/01.jpg" alt="" /></li>
            <li><img src="images/02.jpg" alt="" /></li>
            <li><img src="images/03.jpg" alt="" /></li>
            <li><img src="images/04.jpg" alt="" /></li>
        </ul>
        <!--<dvi></dvi>
        <p></p>-->
    </div>
</body>
    <script type="text/javascript">
        var box = document.getElementsByClassName('box')[0];
        
        var ul = box.children[0];
        var num = 0;
        var time = null;
        time = setInterval(autoPlay,30)
        
        //定义自动播放函数；
        function autoPlay(){
            num --;
            num <=-600 ? num =0:num;
            ul.style.left = num +'px';
        }
        //鼠标移动至上方；
        box.onmouseover = function(){
            clearInterval(time)
        }
        box.onmouseout = function(){
            time = setInterval(autoPlay,30)
        }
    </script>
</html>

34-BOM_输出

一、BOM初识及其输出；

　　所谓BOM指的是浏览器对象模型 Browser Object Model，它的核心就是浏览器；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>34-BOM_输出</title>
    <style type="text/css">

    </style>
</head>
<body>
    <button onclick="printluffy()">打印</button>
    <button onclick="findluffy()">查找</button>
</body>
    <script type="text/javascript">
        //一、js ECMAScript DOM BOM
        
        //BOM-Brower Object Model 浏览器对象模型
        //核心是浏览器
        
        //输出、屏幕的宽高、滚动的宽高、setInterval...Window.open()\close()\location
        
        //1.alert()
        //2.console.log('用于浏览器调试Debug')
        //3.prompt('message','defaultValue')
        var pro = prompt('cuixiaozhao');
        console.log(pro)
        
        //4 confirm,与alert的区别，若是点击“肯定”返回值为true，若是点击取消，则返回false
        var m=confirm('学习BOM');
        console.log(m)
        function printluffy(){
//            window.print()
            print()
        }
        
        function findluffy(){
            var m2 = confirm('学习BOM');
            find(m2);
            
        }
    </script>
</html>

35-open_close

一、js中的open_close方法初识；

打开某个URL，行间的js中的window不能省略<button onclick="window.open('https://www.cuixiaozhao.com')">崔晓昭的博客园</button>
打开空白页面open(‘about:blank’,'_self')
关闭某个页面，行间的js中的window仍是不能省略的<button onclick="window.close()">关闭</button>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>35-BOM中的open_close</title>
    <style type="text/css">

    </style>
</head>
<body>
    <!--行间的js中的open()方法，前缀window-->
    <button onclick="window.open('https://www.cnblogs.com/tqtl911/')">博客园</button>
    
    <button>打开百度</button>
    <button onclick="window.close()">关闭</button>
    <button>是否关闭</button>
</body>
    <script type="text/javascript">
        var openBtn = document.getElementsByTagName('button')[1];
        var closeBtn = document.getElementsByTagName('button')[3]
        
        openBtn.onclick = function(){
//            open('https://www.baidu.com')
            //打开一个空白页面；
            open('about:blank',"_self")
        }
        //关闭当前页面；
        closeBtn.onclick = function(){
            if(confirm("是否关闭？")){
                close();
            }
        }
        
    </script>
</html>

36-BOM的其余对象

一、BOM中的一些常见方法初识；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>36-BOM的其余对象</title>
    <style type="text/css">

    </style>
</head>
<body>

</body>
    <script type="text/javascript">
        alert('刷新了')
        
        
        //返回浏览器的用户设备信息，如iphone X、PC浏览器
        console.log(window.navigator.userAgent)
        
//        console.log(window.location)

        //常用的一个方法；
//        window.location.href = 'https://www.luffycity.com';
        
        //发布新闻的网站，添加或删除一条新闻记录；
        //全局刷新，尽可能少用；优先使用局部刷新；
        setTimeout(function(){
            window.location.reload()
            
        },30000)
        
    </script>
</html>

37-client系列

一、BOM中client相关属性；

clientTop
clientLeft
clientWidth
clientHeight

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>37-client系列</title>
    <style type="text/css">
        .box{
            width: 200px;
            height: 200px;
            position: absolute;
            border: 1px solid red;
            margin: 10px 0 0 0;
            padding: 10px;
        }
    </style>
</head>
<body>
    <div class="box">
        
    </div>
</body>
    <script type="text/javascript">
        /*
        style
            top
            left
            right
            bottom
        client
            clientTop //内容区域到边框顶部的距离
            clientLeft //内容区域到边框左部的距离
            clientWidth//内容区域 + 左右padding 便可视宽度；
            clientHeight //内容区域 + 上下padding 便可视高度；
         */
        var openBox = document.getElementsByClassName('box')[0];
        console.log(openBox.clientTop)
        console.log(openBox.clientLeft)
        console.log(openBox.clientWidth)
        console.log(openBox.clientHeight)

    </script>
</html>

38-屏幕的可视区域

一、屏幕可视区域阐述；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>38-屏幕的可视区域</title>
    <style type="text/css">

    </style>
</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>

39-offset系列

一、js中的offset阐述；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>39-offset系列</title>
    <style type="text/css">

    </style>
</head>
<body>
    <div style="position: relative;">
        
    
        <div id="box" style="width:200px;height: 200px;border: 1px solid red;padding: 10px;margin: 10px;position: absolute;top: 20px;left: 30px;"></div>
    </div>
</body>
    <script type="text/javascript">
        window.onload = function(){
            var box = document.getElementById('box');
            //占位宽、高 Top Left 
            /*
            offsetTop:如何盒子没有设置定位，到浏览器顶部的距离；如何盒子设置定位，那么是以父盒子为基准的top值；
            offsetLeft:如何盒子没有设置定位，到浏览器左部的距离；
            offsetWidth:内容+padding+border；
            */
            console.log(box.offsetTop)
            console.log(box.offsetLeft)
            console.log(box.offsetWidth)
            console.log(box.offsetHeight)
        }
    </script>
</html>

40-scroll系列

一、js中的scroll阐述；

http://www.biyao.com/home/index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>40-scroll系列</title>
    <style type="text/css">
        *{
            padding: 0;
            margin: 0;
        }
    </style>
</head>
<body style="width: 2000px;height: 2000px;">
    <div style="height: 200px;background-color: red;"></div>
    <div style="height: 200px;background-color: green;"></div>
    <div style="height: 200px;background-color: yellow;"></div>
    <div style="height: 200px;background-color: blue;"></div>
    <div style="height: 200px;background-color: gray;"></div>
    <div id="scroll" style="width: 200px;height: 200px;border: 1px solid red;overflow: auto;padding: 10px;margin: 5px 0 0 0 ;">
        <p>河北省·石家庄河北省·石家庄河北省·石家庄河北省·石家庄河北省·石家庄河北省·石家庄河北省·石家庄
        河北省·石家庄河北省·石家庄河北省·石家庄河北省·石家庄河北省·石家庄河北省·石家庄
        河北省·石家庄河北省·石家庄河北省·石家庄河北省·石家庄河北省·石家庄河北省·石家庄
        河北省·石家庄河北省·石家庄河北省·石家庄河北省·石家庄河北省·石家庄河北省·石家庄
        河北省·石家庄河北省·石家庄河北省·石家庄河北省·石家庄河北省·石家庄河北省·石家庄
        河北省·石家庄河北省·石家庄河北省·石家庄河北省·石家庄河北省·石家庄河北省·石家庄
        河北省·石家庄河北省·石家庄河北省·石家庄河北省·石家庄河北省·石家庄河北省·石家庄
        河北省·石家庄河北省·石家庄河北省·石家庄河北省·石家庄河北省·石家庄河北省·石家庄
        河北省·石家庄河北省·石家庄河北省·石家庄河北省·石家庄河北省·石家庄河北省·石家庄
        河北省·石家庄河北省·石家庄河北省·石家庄河北省·石家庄河北省·石家庄河北省·石家庄
        河北省·石家庄河北省·石家庄河北省·石家庄河北省·石家庄河北省·石家庄河北省·石家庄
        河北省·石家庄河北省·石家庄河北省·石家庄河北省·石家庄河北省·石家庄河北省·石家庄
        河北省·石家庄河北省·石家庄河北省·石家庄河北省·石家庄河北省·石家庄河北省·石家庄
        河北省·石家庄河北省·石家庄河北省·石家庄河北省·石家庄河北省·石家庄河北省·石家庄
        
        </p>
    </div>
</body>
    <script type="text/javascript">
        window.onload = function(){
            //实时监听滚动事件；
            window.onscroll = function(){
                
                //获取top值或者left值；
                console.log('上'+document.documentElement.scrollTop)
                console.log('左'+document.documentElement.scrollLeft)
                console.log('宽'+document.documentElement.scrollWidth)
                console.log('高'+document.documentElement.scrollHeight)
            }
            var s = document.getElementById('scroll');
            s.onscroll = function(){
                
                //scrollHeight:内容的高度 +padding 不包含边框；
                console.log('上'+ s.scrollTop)
                console.log('左'+s.scrollLeft)
                console.log('宽'+s.scrollWidth)
                console.log('高'+s.scrollHeight)
            }
        }
    </script>
</html>

第五模块：WEB开发基础 第2章·JavaScript基础