09-JavaScript

作者: 努力爬行中的蜗牛 | 来源:发表于2018-12-16 22:18 被阅读8次

JavaScript介绍

JavaScript是运行在浏览器端的脚本语言，JavaScript主要解决的是前端与用户交互的问题，包括使用交互与数据交互。JavaScript是浏览器解释执行的，前端脚本语言还有JScript（微软，IE独有），ActionScript（Adobe公司，需要插件）等。

前端三大块

1、HTML：页面结构
2、CSS：页面表现，元素大小、颜色、位置、隐藏或显示、部分动画效果。
3、JavaScript：页面行为，部分动画效果，页面与用户的交互，页面功能。

JavaScript嵌入页面的方式

1、行间事件（主要用于事件）
2、页面script标签嵌入
3、外部引入

<!DOCTYPE html>
<html>
<head>
    <title>js</title>
    <!-- 第二种嵌入js方式：内嵌js -->
    <script type="text/javascript">
        alert("hello world too")
    </script>

    <!-- 第三种嵌入js方式：外部引入 -->
    <script type="text/javascript" src="js/hello.js"></script>
</head>
<body>
    <!-- 第一种嵌入js的方式：行间事件 -->
    <input type="button" name="" value="点击" onclick="alert('hello world')">

</body>
</html>

变量

JavaScript是一种弱类型语言，JavaScript的变量类型由它的值来决定。定义变量需要关键字‘var'

变量类型
5种基本数据类型：
1、number 数字类型
2、string 字符串类型
3、boolean 布尔类型 true 或 false
4、undefined undefined类型，变量声明未初始化，它的值就是undefined
5、null null类型，表示空对象，如果定义的变量将来准备保存对象，可以将变量初始化为null，在页面上获取不到对象，返回的值就是null

1种符合类型：object

<!DOCTYPE html>
<html>
<head>
    <title>js</title>
    <script type="text/javascript">
        /*
            多行注释
        */

        // 单行注释
        
        // var iNum = 12;
        // var sTr = 'abc';

        // 同时定义多个变量可以用","隔开，共用一个'var'关键字
        var iNum = 12, sTr = 'abc';

        alert(iNum);
        alert(sTr);
    </script>
</head>
<body>

</body>
</html>

js语句和注释
js语句以；结尾；
注释分为单行注释和多行注释

变量、函数、属性、函数参数命名规则
1、区分大小写
2、第一个字符必须是字母、下划线（_)或者美元符号($)
3、其他字符可以是字母、下划线、美元符或数字

匈牙利命名风格
对象o Object 比如：oDiv
数组a Array 比如：altems
字符串s String 比如：sUserName
整数i Integer 比如：iItemCount
布尔值b Boolean 比如：blsComplete
浮点数f Float 比如：fPrice
函数fn Function 比如：fnHandler
正则表达式re RegExp 比如：reEmailcheck

获取元素方法一

可以使用内置对象document上的getElementById方法来获取页面上设置了id属性的元素，获取到的是一个html对象，然后将它赋值给一个变量。

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script type="text/javascript">
        window.onload = function() {

            // document.getElementById('div1').style.color = 'red';
            // document.getElementById('div1').style.fontSize = '30px';

            // 用变量简化代码
            var oDiv = document.getElementById('div1');

            oDiv.style.color = 'red';
            oDiv.style.fontSize = '30px';
        }
        
    </script>
</head>
<body>
    <div id="div1">这是一个div元素</div>

</body>
</html>

操作元素属性

获取的页面元素，就可以对页面元素的属性进行操作，属性的操作包括属性的读和写。
操作属性的方法
1、"."操作
2、"[]" 操作
属性写法
1、html的属性和js里面的属性写法一样
2、“class”属性写成“className”
3、“style”属性里面的属性，有横杠的改成驼峰式，比如：“font-size"，改成“style.fontSize”

<!DOCTYPE html>
<html>
<head>
    <title>js</title>
    <script type="text/javascript">
        window.onload = function() {
            var oDiv = document.getElementById('div1');
            var oA = document.getElementById('link');
            var oDiv2 = document.getElementById('div2');
            // 读取属性
            var sId = oDiv.id;
            alert(sId);

            // 写属性
            oDiv.style.color = "red";
            oA.href = "http://www.baidu.com";
            oA.title = "这是百度地址";

            // 操作class属性需要写成className
            oDiv2.className = "box2";


        }
    </script>

    <style type="text/css">
        .box {
            font-size: 20px;
            color: gold;
        }

        .box2 {
            font-size: 30px;
            color: pink;
        }
    </style>
</head>
<body>
    <div id="div1">这是一个div元素</div>
    <a href="#" id="link">这是一个链接</a>

    <div class="box" id="div2">这是第二个div</div>

</body>
</html>

中括号【】操作属性

<!DOCTYPE html>
<html>
<head>
    <title>js</title>
    <script type="text/javascript">
        window.onload = function() {
            var oDiv = document.getElementById('div1');

            var sMytyle = 'fontSize';
            var sValue = '30px';
            // 属性用变量来代替的话，需要用中括号【】来操作
            oDiv.style[sMytyle] = sValue;
        }
    </script>
</head>
<body>
    <div id="div1">这是一个div元素</div>

</body>
</html>

innerHTML
innerHTML可以读取或者写入标签包裹的内容。

<!DOCTYPE html>
<html>
<head>
    <title>js</title>
    <script type="text/javascript">
        window.onload = function() {
            var oDiv = document.getElementById('div1');
            // 读取元素里面的内容
            var sTr = oDiv.innerHTML;

            alert(sTr);

            // 写元素的内容
            //oDiv.innerHTML = "修改的文字";

            oDiv.innerHTML = "<a href='http://itcast.cn'>传智播客</a>";
        }
    </script>
</head>
<body>
    <div id="div1">这是一个div元素</div>

</body>
</html>

函数

函数就是重复执行的代码块。
函数的定义与执行

<!DOCTYPE html>
<html>
<head>
    <title>js</title>
    <script type="text/javascript">
        function fnAlert() 
        {
            alert('hello world');
        }


        // 函数定义
        function fnChange() 
        {
            var oDiv = document.getElementById('div1');
            oDiv.style.color = "red";
            oDiv.style.fontSize = "30px";
        }

    </script>
</head>
<body>
    <!-- 函数调用 -->
    <div id="div1" onclick="fnAlert()">这是一个div元素</div>
    <input type="button" name="" value="改变div" onclick="fnChange()">
</body>
</html>

提取行间事件
在html行间调用的事件可以提取到JavaScript中调用，从而做到结构与行为分离。

<!DOCTYPE html>
<html>
<head>
    <title>js</title>
    <script type="text/javascript">
        window.onload = function() {
            var oBtn = document.getElementById('btn01');
            // 将事件属性和一个函数关联，函数不能写小括号，写了会马上执行
            oBtn.onclick = fnChange;

            // 函数定义
            function fnChange() 
            {
                var oDiv = document.getElementById('div1');
                oDiv.style.color = "red";
                oDiv.style.fontSize = "30px";
            }
        }
        

    </script>
</head>
<body>
    <!-- 函数调用 -->
    <div id="div1">这是一个div元素</div>
    <input type="button" name="" value="改变div" id="btn01">
</body>
</html>

匿名函数

<!DOCTYPE html>
<html>
<head>
    <title>js</title>
    <script type="text/javascript">
        window.onload = function() {
            var oBtn = document.getElementById('btn01');
            // 匿名函数
            oBtn.onclick = function()
            {
                var oDiv = document.getElementById('div1');
                oDiv.style.color = "red";
                oDiv.style.fontSize = "30px";
            }
        }
        

    </script>
</head>
<body>
    <div id="div1">这是一个div元素</div>
    <input type="button" name="" value="改变div" id="btn01">
</body>
</html>

网页换肤demo

<!DOCTYPE html>
<html>
<head>
    <title>js</title>
    <link rel="stylesheet" type="text/css" href="css/skin02.css" id="link01">
    <script type="text/javascript">
        window.onload = function() {
            var oBtn01 = document.getElementById('btn01');
            var oBtn02 = document.getElementById('btn02');
            var oLink = document.getElementById('link01');

            // 匿名函数
            oBtn01.onclick = function()
            {
                oLink.href = "css/skin01.css";
            }

            oBtn02.onclick = function() 
            {
                oLink.href = "css/skin02.css";
            }
        }
        

    </script>
</head>
<body>
    <input type="button" name="" value="皮肤1" id="btn01">
    <input type="button" name="" value="皮肤2" id="btn02">
</body>
</html>

变量与函数的预解析
JavaScript解析过程分为两个阶段，先是编译阶段，然后执行阶段，在编译阶段会将function定义的函数提前，并且将var定义的变量声明提前，将它赋值为undefined。

<!DOCTYPE html>
<html>
<head>
    <title>js</title>
    <link rel="stylesheet" type="text/css" href="css/skin02.css" id="link01">
    <script type="text/javascript">
        // 预解析会把变量的声明提前
        alert(iNum); // 弹出undefined

        // 预解析会让函数的声明和定义提前
        myalert();


        var iNum = 12;

        function myalert() {
            alert("hello world");
        }
        

    </script>
</head>
<body>
    
</body>
</html>

函数传参

<!DOCTYPE html>
<html>
<head>
    <title>js</title>
    <script type="text/javascript">
        window.onload = function() {
            function fnMyalert(a) {
                alert(a);
            }

            fnMyalert('hello world');

            function fnChangeStyle(mystyle, val) {
                var oDiv = document.getElementById('div1');
                oDiv.style[mystyle] = val;
            }

            fnChangeStyle('color', 'red');
        }
        

    </script>
</head>
<body>
    <div id="div1">这是一个div元素</div>
    
</body>
</html>

函数‘return’关键字
函数中‘return’关键字作用：
1、返回函数执行的结果
2、结束函数的运行
3、阻止默认行为

<!DOCTYPE html>
<html>
<head>
    <title>js</title>
    <script type="text/javascript">
        function fnAdd(a, b) {
            var c = a + b;
            return c;
        }

        var isResult = fnAdd(2, 5);
        alert(isResult);
    </script>
</head>
<body>
    <div id="div1">这是一个div元素</div>
    
</body>
</html>

加法运算

<!DOCTYPE html>
<html>
<head>
    <title>js</title>
    <script type="text/javascript">
        window.onload = function() {
            var oInput01 = document.getElementById('input01');
            var oInput02 = document.getElementById('input02');
            var oBtn= document.getElementById('btn');

            oBtn.onclick = function() {
                var iVal01 = parseInt(oInput01.value);
                var iVal02 = parseInt(oInput02.value);

                alert(iVal01 + iVal02);
            }

        }
    </script>
</head>
<body>
    <input type="text" name="" id="input01"> +
    <input type="text" name="" id="input02">

    <input type="button" name="" value="相加" id="btn">

</body>
</html>

条件语句

通过条件来控制程序的走向，就需要用到条件语句。
运算符
1、算符运算符：+（加）、-（减）、*（乘）、/（除）、%（求余）
2、赋值运算符：=、+=、-=、*=、/=、%=
3、条件运算符：==、===、>、>=、<、<=、!=、&&（而且）、||（或者）、!(否)
求余数

<!DOCTYPE html>
<html>
<head>
    <title>js</title>
    <script type="text/javascript">
        window.onload = function() {
            var iNum01 = 11;
            var iNum02 = 2;

            alert(iNum01%iNum02);

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

</body>
</html>

赋值运算

<!DOCTYPE html>
<html>
<head>
    <title>js</title>
    <script type="text/javascript">
        window.onload = function() {
            var iNum01 = 12;
            iNum01 += 2;

            iNum01 -= 5;

            iNum01 *= 2;

            iNum01 /= 2;

            iNum01 %= 2;

            iNum01++;

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

</body>
</html>

if else

<!DOCTYPE html>
<html>
<head>
    <title>js</title>
    <script type="text/javascript">
        var iNum01 = 2;
        var sNum01 = '2';

        // 两个等号会进行类型转换再比较
        if (iNum01===sNum01) {
            alert('相等');
        } else {
            alert('不相等');
        }

        if (!4>3) {
            alert('大于');
        } else { 
            alert('不大于');
        }
    </script>
</head>
<body>

</body>
</html>

<!DOCTYPE html>
<html>
<head>
    <title>js</title>
    <script type="text/javascript">
        window.onload = function() {
            var oBtn = document.getElementById('btn01');
            var oDiv = document.getElementById('box01');

            // oDiv.style.display 是读取的标签里写的display属性值，如果没有写，这个值为空
            oBtn.onclick = function() {
                if (oDiv.style.display === 'block' || oDiv.style.display === '') {
                    oDiv.style.display = 'none';
                } else {
                    oDiv.style.display = 'block';
                }
            }
        }
    </script>

    <style type="text/css">
        .box {
            width: 300px;
            height: 400px;
            background-color: gold;
        }
    </style>
</head>
<body>
    <input type="button" name="" value="切换" id="btn01">
    <div class="box" id="box01"></div>

</body>
</html>

多重条件判断语句

<!DOCTYPE html>
<html>
<head>
    <title>js</title>
    <script type="text/javascript">
        window.onload = function() {
            var iWeek = 5;
            var oBody = document.getElementById('body01');

            if (iWeek===1) {
                oBody.style.backgroundColor = 'gold';
            } else if (iWeek===2) {
                oBody.style.backgroundColor = 'green';
            } else if (iWeek===3) {
                oBody.style.backgroundColor = 'pink';
            } else if (iWeek===4) {
                oBody.style.backgroundColor = 'yellowgreen';
            } else if (iWeek===5) {
                oBody.style.backgroundColor = 'lightblue';
            } else {
                oBody.style.backgroundColor = 'lightgreen';
            }
        }
        
    </script>
</head>
<body id=body01>

</body>
</html>

switch语句
多重if else语句可以换成性能更高的switch语句。

<!DOCTYPE html>
<html>
<head>
    <title>js</title>
    <script type="text/javascript">
        window.onload = function() {
            var iWeek = 3;
            var oBody = document.getElementById('body01');

            switch (iWeek) {
                case 1:
                    oBody.style.backgroundColor = 'gold';
                    break;
                case 2:
                    oBody.style.backgroundColor = 'green';
                    break;
                case 3:
                    oBody.style.backgroundColor = 'pink';
                    break;
                case 4:
                    oBody.style.backgroundColor = 'yellowgreen';
                    break;
                case 5:
                    oBody.style.backgroundColor = 'lightblue';
                    break;
                default:
                    oBody.style.backgroundColor = 'lightgreen';
            }
        }
        
    </script>
</head>
<body id=body01>

</body>
</html>

数组及操作方法

数组就是一组数据的集合，JavaScript中，数组里面的数据可以是不同类型的。
定义数组的方法

<!DOCTYPE html>
<html>
<head>
    <title>js</title>
    <script type="text/javascript">
        window.onload = function() {
            // 数组的定义方法1：通过类实例化来创建数组，效率不高
            var aList01 = new Array(1, 2, 3);
            // 通过直接量的方式创建数组
            var aList02 = [1, 2, 3];

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

</body>
</html>

操作数据中数据的方法

<!DOCTYPE html>
<html>
<head>
    <title>js</title>
    <script type="text/javascript">
        window.onload = function() {
            // 数组的定义方法1：通过类实例化来创建数组，效率不高
            var aList01 = new Array(1, 2, 3);
            // 通过直接量的方式创建数组
            var aList02 = [1, 2, 3];

            // 1、通过length来获取数组成员的个数
            alert(aList02.length);

            // 2、用下标来操作数组的某个数据
            alert(aList02[0]);

            // 3/join()将数组成员通过一个分隔符合并成字符串
            alert(aList02.join('-'));

            // 4、通过push方法在数组后面增加成员，通过pop方法删除成员
            aList02.push('b');
            alert(aList02);
            aList02.pop();
            alert(aList02);

            // 5、unshift()和shift()从数组前面增加成员或删除成员
            aList02.unshift(4);
            alert(aList02);
            aList02.shift();
            alert(aList02);

            // 6、reverse()将数组反转
            aList02.reverse();
            alert(aList02);

            // 7、indexOf()返回数组中元素第一次出现的索引值
            alert(aList02.indexOf(1));

            // 8、splice()在数组中增加或删除成员
            // 从第二个元素开始，删除1个元素，然后在此位置增加'7,8,9'三个元素
            aList02.splice(2,1,7,8,9); 
            alert(aList02);

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

</body>
</html>

多维数组
多维数组指的是数组的成员也是数组的数组。

<!DOCTYPE html>
<html>
<head>
    <title>js</title>
    <script type="text/javascript">
        window.onload = function() {
            var aList = [[1, 2, 3, 4],['a','b','c'],[6, 7, 8]];
            alert(aList.length);
            alert(aList[0].length);
            alert(aList[0][1]);
        }
    </script>
</head>
<body>

</body>
</html>

循环语句

程序中进行有规律的重复性操作，需要用到循环语句。
for循环

<!DOCTYPE html>
<html>
<head>
    <title>js</title>
    <script type="text/javascript">
        window.onload = function() {
            var aList = [[1, 2, 3, 4],['a','b','c'],[6, 7, 8]];
            alert(aList.length);
            alert(aList[0].length);
            alert(aList[0][1]);
        }
    </script>
</head>
<body>
    

</body>
</html>

for循环实例

<!DOCTYPE html>
<html>
<head>
    <title>js</title>
    <script type="text/javascript">
        window.onload = function() {
            var oUl = document.getElementById('list');
            var aList = ['美人鱼', '疯狂动物城', '魔兽', '美国队长3', '湄公河行动'];
            var aLen = aList.length;
            var sTr = '';

            for (var i = 0; i < aLen; i++) {
                sTr += '<li>' + aList[i] + '</li>';
            }

            oUl.innerHTML = sTr;
        }
    </script>

    <style type="text/css">
        .list {
            list-style: none;
            margin: 50px auto 0;
            padding: 0;
            width: 300px;
            height: 305px;
        }

        .list li {
            height: 60px;
            line-height: 60px;
            font-size: 16px;
            border-bottom: 1px dotted #000;
        }
    </style>
</head>
<body>
    <ul class="list" id="list">
        
    </ul>

</body>
</html>

while循环

var i = 0;
while (i < 8) {
    ...
    i++;
}

数组去重

<!DOCTYPE html>
<html>
<head>
    <title>js</title>
    <script type="text/javascript">
        var aList = [2,3,4,5,6,7,8,3,4,5,2,7,8,9,3,4,5,6,3,4,8,9];
        var aList2 = [];
        var aLen = aList.length;

        for (var i = 0; i < aLen; i++) {
            if (aList.indexOf(aList[i]) == i) {
                aList2.push(aList[i]);
            }
        }

        alert(aList2);


    </script>

    
</head>
<body>
    

</body>
</html>

获取元素方法二

可以使用内置对象document上的getElementsByTagName方法来获取页面上的某一种标签，获取的是一个选择集，不是数组，但是可以用下标的方式操作选择集里面的标签元素。

<!DOCTYPE html>
<html>
<head>
    <title>通过标签获取元素</title>
    <script type="text/javascript">
        window.onload = function() {
            // 通过标签名称获取li元素，生成一个选择集，赋值给aLi
            var aLi = document.getElementsByTagName('li');
            alert(aLi.length);
            var iLen = aLi.length;

            // for (var i = 0; i < iLen; i++) {
            //  var li = aLi[i];
            //  li.style.backgroundColor = "green";
            // }

            var oUl = document.getElementById('list1');
            var aLi2 = oUl.getElementsByTagName('li');

            var iLen2 = aLi2.length;

            for (var i = 0; i < iLen2; i++) {
                if(i%2 == 0) {
                    aLi2[i].style.backgroundColor = 'gold';
                } else {
                    aLi2[i].style.backgroundColor = 'green';
                }
             }


        }

    </script>
</head>
<body>
    <ul id="list1">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
    </ul>

    <ul id="list2">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
    
</body>
</html>

JavaScript组成

1、ECMAscript JavaScript的语法（变量、函数、循环语句等语法）
2、DOM文档对象模型，操作html和css的方法
3、BOM浏览器对象模型，操作浏览器的一些方法

字符串处理方法

1、字符串合并操作：“+”
2、parseInt()将数字字符串转换为整数
3、parseFloat()将数字字符串转化为小数
4、split()把一个字符串分割成字符串组成的数组
5、charAt()获取字符串中的某一个字符
6、indexOf()查找字符串是否含有某个字符
7、substring()截取字符串用法：substring(start,end) （不包括end）
8、toUpperCase()字符串转大写
9、toLowerCase()字符串转小写
10、字符串反转

<!DOCTYPE html>
<html>
<head>
    <title>字符串处理方法</title>
    <script type="text/javascript">
        var iNum01 = 12;
        var sNum02 = '24';
        var sTr = 'abc';

        // 1、数字和字符串相加 等同于字符串拼接
        // alert(iNum01 + sNum02);

        // alert(sNum02 + sTr);

        // 2、将数字字符串转换为整数
        var sTr02 = '12.35';
        // alert(parseInt(sTr02)); // 弹出12

        // 3、将数字字符串转化为小数
        // alert(parseFloat(sTr02));

        // 4、把一个字符串分割成字符串组成的数组
        var sTr03 = '2017-4-22';
        var aRr = sTr03.split('-'); 
        // alert(aRr); // 弹出['2017','4','22']

        var aRr2 = sTr03.split('');
        // alert(aRr2);

        // 5、获取字符串中的某一个字符
        var sTr04 = '#div';
        var sTr05 = sTr04.charAt(0); 
        // alert(sTr05);

        // 6、查找字符串是否含有某个字符
        var sTr06 = 'abcdef microsoft asldjfl';
        var iNum03 = sTr06.indexOf('microsoft'); // 没有就返回-1
        // alert(iNum03);

        // 7、截取字符串
        var sTr07 = 'abcdef123456edfg';
        var sTr08 = sTr07.substring(6,12);
        // alert(sTr08);

        var sTr09 = sTr04.substring(1); // 第二个参数不写表示到末尾
        // alert(sTr09);

        // 8、字符串转大写
        var sTr10 = 'abcdef';
        var sTr11 = sTr10.toUpperCase();
        // alert(sTr11);

        // 9、字符串转小写
        var sTr12 = sTr11.toLowerCase();
        // alert(sTr12);

        // 10、字符串反转
        var sTr13 = '1234kjfkjkdjfkghkhieidkjfk';
        var sTr14 = sTr13.split('').reverse().join('');
        alert(sTr14);


    </script>
</head>
<body>

</body>
</html>

定时器

定时器在JavaScript中的作用
1、制作动画
2、异步操作
3、函数缓冲与节流

<!DOCTYPE html>
<html>
<head>
    <title>定时器</title>

    <script type="text/javascript">
        function myalert() {
            alert('hello world');
        }

        // 1、只执行一次的定时器:第一个参数是函数名或者是匿名函数，第二个参数是时间，单位是ms(毫秒)
        var  timer01 = setTimeout(myalert,2000);
        // 2、关闭只执行一次的定时器
        clearTimeout(timer01);

        // 3、反复执行的定时器
        var timer02 = setInterval(myalert,1000);
        // 4、关闭反复执行的定时器
        clearInterval(timer02);

        // 匿名函数的写法
        var timer03 = setInterval(function(){alert('hello python')},1000)

    </script>
</head>
<body>

</body>
</html>

运动动画demo

<!DOCTYPE html>
<html>
<head>
    <title>定时器动画</title>
    <style type="text/css">
        .box {
            width: 200px;
            height: 200px;
            background-color: gold;
            position: absolute;
            left: 0;
            top: 100px;
        }
    </style>

    <script type="text/javascript">
        window.onload = function() {
            var oDiv = document.getElementById('div1');
            var iLeft = 0;

            function moving() {
                iLeft += 10;
                oDiv.style.left = iLeft + 'px';

                if (iLeft >= 1000) {
                    clearInterval(timer);
                }
            }

            var timer = setInterval(moving, 100);
        }
    </script>
</head>
<body>
    <div id='div1' class="box"></div>

</body>
</html>

无缝滚动demo

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>无缝滚动</title>
    <style type="text/css">
        *{
            margin:0;
            padding:0;
        }

        .list_con{
            
            width:1000px;
            height:200px;
            border:1px solid #000;
            margin:10px auto 0;
            background-color:#f0f0f0;
            position:relative;
            overflow:hidden;
        }

        .list_con ul{
            list-style:none;
            width:2000px;
            height:200px;
            position:absolute;
            left:0;
            top:0;
        }


        .list_con li{
            width:180px;
            height:180px;
            float:left;
            margin:10px;
        }

        .btns_con{
            width:1000px;
            height:30px;
            margin:50px auto 0;
            position:relative;
        }

        .left,.right{
            width:30px;
            height:30px;
            background-color:gold;
            position:absolute;
            left:-40px;
            top:124px;
            font-size:30px;
            line-height:30px;
            color:#000;
            font-family: 'Arial';
            text-align:center;
            cursor:pointer;
            border-radius:15px;
            opacity:0.5;
        }

        .right{
            left:1010px;            
            top:124px;          
        }

    </style>

    <script type="text/javascript">
        window.onload = function(){
            var oDiv = document.getElementById('slide');
            var oBtn01 = document.getElementById('btn01');
            var oBtn02 = document.getElementById('btn02');

            // 通过标签获取元素，获取的是选择集，加上下标才能获取到元素
            var oUl = oDiv.getElementsByTagName('ul')[0];
            var iLeft = 0;
            var iSpeed = -2;
            var iNowspeed = 0;
            // 将ul里面的内容复制一份，整个ul里面就包含了10个li
            oUl.innerHTML = oUl.innerHTML + oUl.innerHTML;
            function moving() {
                iLeft += iSpeed;
                oUl.style.left = iLeft + 'px';

                // 当ul向左滚动到第5个li时，瞬间将整个ul拉回到初始位置
                if (iLeft < -1000) {
                    iLeft = 0;
                }

                // 当ul在起始位置往右滚动时候，瞬间将整个ul拉回到往左的第5个li的位置
                if (iLeft > 0) {
                    iLeft = -1000;
                }
            }

            var timer = setInterval(moving, 30);

            oBtn01.onclick = function() {
                iSpeed = -2;
            }

            oBtn02.onclick = function() {
                iSpeed = 2;
            }

            // 当鼠标移入的时候
            oDiv.onmouseover = function() {
                iNowspeed = iSpeed;
                iSpeed = 0;
            }

            // 当鼠标移出的时候
            oDiv.onmouseout = function() {
                iSpeed = iNowspeed;
            }

        }


    </script>
</head>
<body>
    <div class="btns_con">
        <div class="left" id="btn01">&lt;</div>
        <div class="right" id="btn02">&gt;</div>
    </div>
    <div class="list_con" id="slide">
        <ul>
        <li><a href=""><img src="images/goods001.jpg" alt="商品图片"></a></li>
        <li><a href=""><img src="images/goods002.jpg" alt="商品图片"></a></li>
        <li><a href=""><img src="images/goods003.jpg" alt="商品图片"></a></li>
        <li><a href=""><img src="images/goods004.jpg" alt="商品图片"></a></li>
        <li><a href=""><img src="images/goods005.jpg" alt="商品图片"></a></li>
        </ul>       
    </div>
</body>
</html>

变量作用域

变量作用域指的是变量的作用范围，JavaScript中的变量分为全局变量和局部变量。
1、全局变量：在函数之外定义的变量，为整个页面共用，函数内部外部都可以访问。
2、局部变量：在函数内部定义的变量，只能在定义该变量的函数内部访问，外部无法访问。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript">

        //函数外部定义的是全局变量，函数内部和外部都可以访问
        var iNum01 = 12;

        // 重复定义，后面的会覆盖前面的值
        //var iNum01 = 14;

        function myalert(){

            //var iNum01 = 24;

            // 函数内部定义的是局部变量，函数内部可以访问，外部不能访问
            var iNum02 = 36;

            alert(iNum01);
            iNum01 += 10;
        }


        function myalert02(){
            alert(iNum01);
        }

        myalert();  // 弹出 12
        myalert02();  // 弹出 22

        //alert(iNum02);  出错！



    </script>
</head>
<body>
    
</body>
</html>

时钟demo

<!DOCTYPE html>
<html>
<head>
    <title>时钟</title>
    <script type="text/javascript">
        window.onload = function() {
            var oDiv = document.getElementById('div1');


            function fnTimego() {
                var sNow = new Date();

                // 获取年份
                var iYear = sNow.getFullYear();
                // 月份是从0-11 0表示1月  11表示12月
                var iMonth = sNow.getMonth() + 1;

                // 星期是从0-6
                var iDate = sNow.getDate();
                var iWeek = sNow.getDay();
                var iHour = sNow.getHours();
                var iMinute = sNow.getMinutes();
                var iSecond = sNow.getSeconds();

                var sTr = '当前时间是：' + iYear + '年' + fnTodou(iMonth) + '月' + fnTodou(iDate) + '日' + ' ' + fnToWeek(iWeek) + ' ' + fnTodou(iHour) + ':' + fnTodou(iMinute) + ':' + fnTodou(iSecond);
                oDiv.innerHTML = sTr;
            }

            // 刚开始调用一次解决刚开始1s空白的问题
            fnTimego();

            setInterval(fnTimego, 1000);

            function fnToWeek(n) {
                if (n == 0) {
                    return '星期日';
                } else if (n == 1) {
                    return '星期一';
                } else if (n == 2) {
                    return '星期二';
                } else if (n == 3) {
                    return '星期三';
                } else if (n == 4) {
                    return '星期四';
                } else if (n == 5) {
                    return '星期五';
                } else if (n == 6) {
                    return '星期六';
                }
            }

            function fnTodou(n) {
                if (n < 10) {
                    return '0' + n;
                } else {
                    return n;
                }
            }
        }

    </script>

    <style type="text/css">
        div {
            text-align: center;
            font-size: 30px;
            color: pink;
        }
    </style>
</head>
<body>
    <div id="div1"></div>

</body>
</html>

倒计时demo

<!DOCTYPE html>
<html>
<head>
    <title>倒计时</title>

    <script type="text/javascript">
        window.onload = function() {
            var oDiv = document.getElementById('div1');

            function fnTimeleft() {
                var sNow = new Date();
                // 未来时间2018.12.31 23：59：59
                var sFuture = new Date(2018,11,31,23,59,59);

                // 计算还有多少秒
                var sLeft = parseInt((sFuture - sNow) / 1000);
                // 计算还剩多少天
                var iDays = parseInt(sLeft/86400);
                // 计算还剩多少小时
                var iHours = parseInt((sLeft % 86400) / 3600);
                // 计算还剩多少分钟
                var iMinutes = parseInt(((sLeft % 86400) % 3600) / 60);
                // 计算还剩多少秒
                var iSeconds = sLeft % 60;

                var sTr = '距离2019年还剩：' + fnTodou(iDays) + '天' + fnTodou(iHours) + '时' + fnTodou(iMinutes) + '分' + fnTodou(iSeconds) + '秒';
                oDiv.innerHTML = sTr;
            }

            fnTimeleft();

            setInterval(fnTimeleft, 1000);
            
            function fnTodou(n) {
                if (n < 10) {
                    return '0' + n;
                } else {
                    return n;
                }
            }
        }
    </script>

    <style type="text/css">
        div {
            text-align: center;
            font-size: 30px;
            color: pink;
        }
    </style>
</head>
<body>
    <div id="div1"></div>

</body>
</html>

封闭函数

封闭函数时JavaScript中匿名函数的另外一种写法，创建一个一开始就执行而不用命名的函数。

<!DOCTYPE html>
<html>
<head>
    <title>封闭函数</title>
    <script type="text/javascript">
        // 封闭函数 可以防止命名冲突的问题
        (function() {
            alert('hello world!');
        })();
        // 封闭函数的其他写法 加！或者~
        !function() {
            alert('hello world!');
        }();

        ~function() {
            alert('hello world!');
        }();

        var iNum01 = 12;

        function myalert() {
            alert(iNum01);
        }

        // 在封闭函数前面加一个“；”，可以避免js压缩时出错
        (function() {
            var iNum01 = 24;
            function myalert()  {
                alert("hello python");
            }

            myalert();
        })();

        alert(iNum01);
        myalert();

    </script>
</head>
<body>

</body>
</html>

常用内置对象

1、document

document.getElementById // 通过id获取元素
document.getElementByTagName // 通过标签名获取元素
document.referrer // 获取上一个跳转页面的地址（需要服务器环境）

2、location

window.location.href // 获取或者重定url地址
window.location.search // 获取地址参数部分
window.location.hash // 获取页面锚点或者哈希值

<!DOCTYPE html>
<html>
<head>
    <title>location属性</title>
    <script type="text/javascript">
        window.onload = function() {
            // 存储上一个页面的地址：
            // var sUrl = document.referrer;

            var oBtn = document.getElementById('btn01');

            oBtn.onclick = function() {
                // var sUrl = document.referrer;
                window.location.href = 'http://www.baidu.com';
            }

            var oBody = document.getElementById('body');


            var sData = window.location.search;

            var sHash = window.location.hash;
            alert(sHash);
            
            if (sData != '') {
                var aRr = sData.split('=');

                var iNum = aRr[1];

                if (iNum == 1) {
                    oBody.style.backgroundColor = 'gold';
                } else if (iNum == 2) {
                    oBody.style.backgroundColor = 'green';
                } else if (iNum == 3) {
                    oBody.style.backgroundColor = 'pink';
                }
            }


        }

    </script>
</head>
<body id="body">
    <input type="button" name="" value="跳转" id="btn01">

</body>
</html>

3、Math

Math.random 获取0-1随机数
Math.floor 向下取整
Math.ceil 向上取整

<!DOCTYPE html>
<html>
<head>
    <title>math</title>

    <script type="text/javascript">
        var iPi = Math.PI;
        alert(iPi);

        
        var arr = []
        for (var i = 0; i < 20; i++) {
            // 返回0-1之间的随机数 不包括1
            var iNum = Math.random();
            arr.push(iNum);
        }

        console.log(arr)

        // 向下取整 去掉小数部分
        alert(Math.floor(5.6));
        // 向上取整 去掉小数 部分
        alert(Math.ceil(5.6));


        // 10 - 20之间的随机数
        var iN01 = 10;
        var iN02 = 20;
        var arr2 = [];

        for (var i = 0; i < 30; i++) {
            var iNum02 = Math.floor((iN02-iN01)*Math.random()) + iN01;
            arr2.push(iNum02);
        }

        console.log(arr2);
            
         

    </script>
</head>
<body>

</body>
</html>

调试程序的方法

1、alert()
2、console.log()
3、document.title()

<!DOCTYPE html>
<html>
<head>
    <title>js</title>
    <script type="text/javascript">
        window.onload = function() {
            var oBody = document.getElementById('body01');
            var iNum01 = 12;

            //alert会阻止程序的运行
            alert(iNum01);

            oBody.style.backgroundColor = 'gold';
            var iNum02 = 24;
            console.log(iNum02);

            document.title = iNum02;
        }

    </script>
</head>
<body id="body01">


</body>
</html>