路飞学城Python-Day50

05-运算符

常用运算符

算数运算符

赋值运算符

比较运算符

逻辑运算符

        // 赋值运算符

         var money = prompt('请输入金额');

         var saveMoney = money * (1+0.02);

         console.log(saveMoney);

        document.write(saveMoney);

        // 算数运算

        var a = 10;

        var b = 4;

        var sum = a + b;

        document.write(sum);

        var min = a - b;

        document.write(min);

        // 组合运算符

        var c = 7 , d = 8;

        // d = c + d;

        // d +=c;

        // console.log(d);

        // 自增和自减

        //x++就是先赋值后自增

        var c1 = d++;

        console.log(c1);

        console.log(d);

        // ++x就是先自增再赋值

        var c2 = ++d;

        console.log(c2);

        // 比较运算符: > < = <= >= ==  ===

        console.log(a > b);

        // 浏览器解析的时候，存在隐式转换，比较的是值的大小，===是类型和值都进行比较

        // 逻辑运算符

        // && 和 || 或

        // and就是都真为真，只要有一个为假就是假，两个都是假就都是假

---

06-字符串处理

很多时候的后台的运算采用的是数字运算，但是实际上展示的时候需要转换为字符串显示

<script type="text/javascript">

<script type="text/javascript">

        // 字符串的运算

        // 字符串的运算就是通过 '+' 来进行拼接

        // 字符串只能是拼接，不能是加减运算

        var firstName = 'panda';

        var lastName = 'boy';

        console.log(firstName+ ' ' + lastName);

        var str = '2003啊'+firstName+'实打实大框架爱不是的gas打瞌睡的男篮的尴尬';

        console.log(str);

        var a1 = '1';

        var a2 = 'panda';

        var a3 = '4';

        var a4 = '6';

        // 不能对字符串进行加减运算，会报NaN -> Not a Number ->实际上NaN就是number类型

        console.log(parseInt(a1) + parseInt(a2));

        console.log(a3 * a4);

    </script>

---

07-数据类型转换

<script type="text/javascript">

        // 在JS中所有的数据类型，都被归为boolean

        // 1.将数字类型转换为字符串类型

        var n1 = 123;

        var n2 = '';

        var n3 = n1 + n2;

        console.log(n3);

        console.log(typeof (n3));

        // 隐式转换 -> 数字和字符串相加会变成字符串优先变化，转换为字符串类型

        // 强制类型转换 ->String(n1) -> num.toString()

         var str1 = String(n1);

         console.log(str1);

         console.log(typeof (str1));

         var num = 234;

         console.log(num.toString());

        console.log(typeof (num));

        // 字符串转换为数字类型 -> Number(stringNum) -> parseInt(num3) ->parseFloat浮点数

        // parseInt()可以解析一个字符串，并且返回一个整数

        var stringNum = '789';

        var num2 = Number(stringNum);

        console.log(num2);

        console.log(typeof (num2));

        var num3 = '456';

        console.log(parseInt(num3));

        console.log(typeof (num3));

        console.log(parseFloat(stringNum));

        console.log(typeof (stringNum));

    //    -------------------------------------------------

    //     布尔值 NaN 0 null undefined都是false 所有的数据类型都可以转换为数字类型

        var b1 = '123';

        console.log(Boolean(b1));

    </script>

---

08-流程控制语句if

<script type="text/javascript">

        // if 语句就是如果...然后...

        /*

        * var ji = 10;

        if (ji >= 20){

            console.log('恭喜你')

        }else {

            console.log('失败')

        }*/

 

        // 浏览器解析代码的顺序，是从上往下执行

        // 考试系统录入

        var math = 99;

        var english = 85;

        var sum = 485;

        // 1. 模拟 总分大于400 并且数学成绩大于89分，被清华大学录取

        // if (sum > 400 && math > 89) {

        //     console.log('恭喜你被录取了')

        // }else {

        //     console.log('没有完成条件，不能被录取')

        // }

        // 2.模拟 如果总分大于400或者数学成绩大于85 就被复旦大学录入

        // if (sum > 400 || math >=85){

        //     alert('你的成绩已经达标')

        // }else{

        //     alert('成绩未达标')

        // }

 

---

09-switch

<script type="text/javascript">

        // switch 开关

        var gameScore = 'better';

        // switch 和 case做比较 ，遇到break就跳出，后面的代码会继续执行，

        // 运行方式类型于if else,只不过用法比较单一

        switch (gameScore){

            case 'good':

                alert('case用来做比较');

                break;

            case 'better':

                alert('case就是比较对不对');

                break;

        }

    </script>

---

10-while

<!--循环的时候一定有三个步骤-->

    <!--1.要初始化循环变量-->

    <!--2.判断循环条件-->

    <!--3.更新循环变量-->

    <script type="text/javascript">

        // var i = 1;

        // while (i < 10){

        //     i++;

        //     console.log(i);

        // }

        // 练习：将1到100之间所有的是3的倍数输出出来

        var i = 100;

        while (i >= 1){

            if (i % 3 === 0){

                console.log(i);

            }

            // console.log(i);

            i--;

        }

---

11-do_while

var i = 0;

        do{

            i++;

            console.log(i);

        }while (i < 3)

---

12-for循环

<script type="text/javascript">

        // for 循环

        // for(var i = 1;i <= 10;i++){

        //     console.log(i);

        // }

    //    打印1-100之间所有的偶数

    //     for (var i = 1; i<=100;i++ ){

    //         if(i % 2 ===0){

    //             console.log(i);

    //         }

    //     }

    //     计算1-100之间的数字的和

    //     var sum = 0;

    //     for (var i = 1;i <= 100;i++ ){

    //         sum += i;

    //     }

    //     console.log(sum)

    //      打印在页面上3行6个*

    //     for (var i = 0;i<=2;i++){

    //         document.write('******'+'<br>');

    //     }

    //     在浏览器中输出直角三角形

    //     *

    //     **

    //     ***

    //     ****

    //     *****

    //     ******

        String.prototype.times = function(n) {

            return Array.prototype.join.call({length:n+1}, this);

    };

        for(var i = 1;i<=6;i++){

            document.write('*'.times(i)+'<br>');

        }

    </script>

---

13-for循环练习

---

14-数组的创建和使用

<!--数组的含义就是存储数据用的一个容器，用来装载东西-->

    <!--创建数组-->

    <!--1.字面量方式-->

    <script type="text/javascript">

        // <!--推荐使用字面量方式创建数组-->

        var colors = ['red','color','yellow'];

        console.log(colors);

        console.log(typeof (colors));

        //    空数组

        var emptyAray = [];

        //    使用构造函数去创建，使用new关键词，对构造函数进行创建

        var colors2 = new Array();

        var col = new Array('red','123','yelow');

        console.log(col);

        // 数组的赋值

        var arr = [];

        arr[0] = 123;

        arr[1] = '456';

        console.log(arr);

---

15-数组的常用方法

<script type="text/javascript">

        // 1.数组的合并

        var north = ['beijing','shandong','tianjin1'];

        var sorth = ['dong','xi','shanghai1','nanfang1'];

        var newArray = north.concat(sorth);

        console.log(newArray);

        // 2.数组转换为字符串

        var numArray = [100,101,102,103];

    //    toString直接转换为字符串,每个元素使用逗号隔开

        var str = numArray.toString();

        console.log(str);

    //    join方法 将数组中的方法是用指定的字符串连接，形成一个新的字符串

        var str2 = numArray.join('|');

        console.log(str2);

    // 查找下标,如果查找的值不再数组内，则返回-1,正向查找

        var index = numArray.indexOf(100);

        console.log(index);

        // 反向查找

         var lastIndex = numArray.lastIndexOf(102);

         console.log(lastIndex);

         // 数组的排序

        var names = ['panda', 'boy', 'zombie', 'engo'];

        // 反向排序

        var newName = names.reverse();

        console.log(newName);

        // 正向排序 sort按照26个字母顺序排序

        var newName1 = names.sort();

        console.log(newName1);

        // 移除元素和添加元素,返回的结果是移除的第一个元素，原来数组中的第一个元素，被移除了

        var firstName = names.shift();

        console.log(firstName);

        console.log(names);

        // unshift()向数组添加一个元素,返回的新数组长度

        var lastname = names.unshift(names);

        console.log(lastname);

        console.log(names);

        // push()添加元素,往数组的最后一个位置添加元素

        var newN = names.push('123');

        console.log(newN);

        console.log(names);

        // pop()移除元素,从数组的最后去删除元素

        var newN1 = names.pop();

        console.log(newN1);

        console.log(names);

---

16-函数的使用

函数是由事件驱动的，当它执行的时候是可重复使用的代码块

函数就是为了让代码更简洁

<script type="text/javascript">

        // 函数的创建

        // 有函数的声明就一定有调用

        function add(){

            alert('函数被调用')

        }

        add();

        // 声明函数的时候带参数

        function add2(a, b) {

            alert(a + b)

        }

        add2(3, 4);

        function add3(x,y) {

            return x+y

        }

        n = add3(4,5);

        alert(n)

---

17-Object_构造函数

<!--一切皆对象，没有对象就new-->

    <!--JS是使用构造函数使用对象-->

    <script type="text/javascript">

        // 对象的创建

 

        //字面量方式的创建，推荐使用

        // 存储的方式就是key value

        // var stu = {

        //     'name':'panda',

        //     'age':22,

        //     'fav':'soup'

        // };

        // console.log(stu);

        // 点语法,相当于get和set语法

        // alert(stu.name);

        // 使用Object创建对象

        // function add() {

        //

        // }

        // add()

        // Object构造函数的特点

        // 1.首字母大写

        // 碰见构造函数，要想创建对象就是用new

        // var obj = new Object();

        // obj.name = 'xiaoming';

        // obj.age = 45;

        // console.log(obj);

    //    ----------------------------------构造函数--------------------------------------

    //     1.函数名首字母要大写

    //     2.构造函数不需要return

    //     3.为对象添加成员变量 this.name = 'panda'

    //     var Stu = function () {

    //         this.name = 'panda';

    //         this.age = 18;

    //         this.fav = function(){

    //             console.log('boy')

    //         }

    //     };

    //     // 以上的方式每次new一个对象，各种属性都是相同的，不推荐这样去使用

    //     // 创建这个对象

    //     var s = new Stu();

    //     console.log(s);

    //     var s1 = new Stu();

    //     console.log(s1);

        // ---------------------推荐使用的构造函数方式-------------------------

        function Animal() {

            this.name = 'hua';

            this.age = 18;

            this.fav = function () {

                console.log(this.age)

            }

        }

        var a = new Animal();

        a.fav();

    </script>

---

18-String_Number

<script type="text/javascript">

        // 内置对象

        // String 字符串对象

        var str = 'hello panda';

        console.log(str.length);

        // 大写转换

        var bigstr = str.toUpperCase();

        console.log(bigstr);

        // 小写转换

        console.log(bigstr.toLowerCase());

        // 两个参数，一个是分割的符号依据，一个是限制的长度

        console.log(str.split(' ',2));

        // 提取哪个字符到哪个字符之间的长度显示为字符串

        console.log(str.substring(1,7));

        // number

        // 1.将bumber类型转换为字符串类型

        var num = 123.23;

        var numStr = num.toString();

        console.log(numStr);

        console.log(typeof (numStr));

        // 2.保留一位小数，可以设置保留几位小数

        var newNum = num.toFixed(1);

        console.log(newNum);

    </script>

---

19-Date的使用

<script type="text/javascript">

        // 创建日期对象

        var myDate = new Date();

        // 获取一个月中的某一天

        myDate.getDate();

        console.log(myDate);

        // 获取当天的日期和时间

        console.log(Date());

        // 获取月份

        console.log(myDate.getMonth()+1);

        console.log(myDate.getDay());

        console.log(myDate.getFullYear());

        console.log(myDate.getTime());

    </script>

---

20-Math对象的使用

<script type="text/javascript">

        // math对象用来执行数学的一些简单运算

        // ceil向上取整数

        var x = 1.234;

        y = Math.ceil(x);

        console.log(y);

        // floor向下取整数

        var a = Math.floor(x);

        console.log(a);

        // 求这两个输入的最大值和最小值

        console.log(Math.max(1,5,6));

        console.log(Math.min(1,56,8));

        // 经常使用 随机数 包含0 不包含1

        var ran = Math.random();

        console.log(Math.floor(ran*100)+100);

        // min~max之间的随机数 min+Math.random()*(max-min)

        

    </script>

---

21-定时器的用法

  <script type="text/javascript">

        // setInterval()方法可以根据指定的周期来调用函数或计算表达式

        // setInterval()会不停的调用函数，直到直到clearInterval被调用或窗口被关闭

        // 由setInterval()返回的ID值可用作直到clearInterval()方法的参数

        // setTimeout()在指定了毫秒数之后调用函数或计算表达式

        // setTimeout()本身只执行一次，如果想多次调用请执行setInterval()或者在code中进行多次调用

        var n = 0;

        var ti = window.setInterval(function () {

            n++;

            console.log(n);

        },1000);

        // var a = 0;

        setTimeout(function () {

            // a ++;

            console.log(ti);

            clearInterval(ti);

        },5000);

    </script>

---

22-正则表达式创建

<!--正则表达式的规则都是一样的，只是写法不同-->

    <script type="text/javascript">

        var str = 'panda boy';

        var reg = new RegExp('panda', 'g');

        console.log(reg.test(str));

        var reg1 = /ccc/g;

        console.log(reg1.test(str));

        console.log(str.match(reg));

        // 正则表达式内有 replace test match search spilt

    </script>

---

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

---

24-模态框案例

什么是dom？

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

规定把浏览器的所有的标签设置为树状结构，每个标签看做文档中的节点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>模态框</title>
    <style type="text/css">
        *{
            padding: 0;
            margin: 0;
        }
        html,body{
            height: 100%;
            width: 100%;
        }
        button{
            margin: 0 auto;
            display: block;
            color: #333333;
            font-size: 28px;
        }
        #box{
            width: 100%;
            height: 100%;
            background-color: #999999;
        }
        #content{
            position: relative;
            top: 150px;
            width: 400px;
            height: 200px;
            line-height: 200px;
            text-align: center;
            color: black;
            background-color: #E6E6FA;
            margin: 0 auto;
        }
        #span1{
            position: absolute;
            color: red;
            top: 0;
            right: 0;
            width: 40px;
            height: 40px;
            line-height: 40px;
            text-align: center;
            background-color: #FFFFFF;
        }
    </style>
</head>
<body>
    <button id="btn">弹出</button>
</body>
<script type="text/javascript">
        // console.log(document);
        // 获取dom元素
        var btn = document.getElementById('btn');
        // console.log(btn);
        // 创建div dom元素
        var oDiv = document.createElement('div');
        var oP = document.createElement('p');
        var oSpan = document.createElement('span');
        oDiv.id = 'box';
        oP.id = 'content';
        oSpan.id = 'span1';
        oP.innerHTML = '模态框启动！';
        oSpan.innerHTML = 'X';
        oDiv.appendChild(oP);
        oP.appendChild(oSpan);
    btn.onclick = function () {
       // 动态的添加标签到body中
        this.parentNode.insertBefore(oDiv,btn);
    };
    oSpan.onclick = function () {
        oDiv.parentNode.removeChild(oDiv)
    };
</script>
</html>