今日学习任务

  • [ ] 1.数组

  • [ ] a.语法应用

  • b.数组长度

  • [ ] 02-能够使用循环结构解决代码重复执行的需求

  • [ ] a.for循环

  • [ ] b.循环控制

  • [ ] continue

  • break

  • [x] 03-能够使用循环遍历数组

  • [ ] for循环

  • 04-案例：动态生成柱状图
  • 05-案例：动态遍历数组生成新闻列表

01-课后代码调试介绍

  • 本小节主要介绍
  • 1.程序出错的原因
  • 2.代码调试好处

  • 之前我们的调试方式主要通过打印变量的值来查看代码是否出现问题，这是js中最简单基本的调试

    • alert();
    • console.log();
  • 断点调试：断点调试是指自己在程序的某一行设置一个断点，调试时，程序运行到这一行就会停住，然后你可以一步一步往下调试，调试过程中可以看各个变量当前的值，出错的话，调试到出错的代码行即显示错误，停下

  • 1.断点调试是一种非常经典的调试方法，在其他编程语言中也经常使用这种调试方法，只不过不同的语言使用的工具不同而已

    • 前端开发中的js代码主要使用谷歌浏览器的开发者工具进行断点调试
  • 2.代码调试的能力非常重要，只有学会了代码调试，才能学会自己解决bug的能力。初学者不要觉得调试代码麻烦就不去调试，知识点花点功夫肯定学的会，但是代码调试这个东西，自己不去练，永远都学不会。
  • 3.今天学的代码调试非常的简单，只要求同学们记住代码调试的这几个按钮的作用即可，后面还会学到很多的代码调试技巧。
  • 使用步骤
  • 1.浏览器中按F12进入开发者控制台
  • 2.选择sources找到要调试的文件

day03 - 图1

  1. <script>
  2.     //1.程序报错：浏览器停止工作，后面的代码都不会执行
  3.     //程序报错在js中主要有两个原因
  4.     //1.1  语法错误
  5.     //let let = 10;//报错：变量命名不符合规则
  6.     //consol.log('111');//报错：关键字单词拼写错误
  8.     //1.2  数据类型错误
  9.     //console.log ( abc );//abc既不是变量，也不是直接量（符合数据类型的数据）
  11.     //2.程序bug：程序能够正常运行，但是产生的结果达不到预期的要求
  12.     //产生原因：代码不熟悉，粗心大意，逻辑不严谨
  13.     //需求：弹出一个确认框
  14.     //prompt();//写成了弹出一个输入框
  16.     //3.代码调试：  打断点
  17.     //F12 - source -  可以选择某一句话前面打上断点
  18.     /*好处：（1）可以逐行的检查代码执行的顺序
  19.     （2）可以随时查看一个变量的值，有利于分析代码（鼠标放到变量上自动显示）
  20.      */
  21.     let num = 10;
  22.     num++;
  23.     num++;
  24.     if(num++ >= num++){
  25.         console.log ( "你猜我执不执行？" );
  26.     }
  27.     console.log ( num );
  29. </script>

02-分支结构案例练习

1.1-简单计算器

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8.     <title>Document</title>
  9. </head>
  11. <body>
  12.     <script>
  13.         /* 需求：
  14.             (1)让用户输入 想要的操作   + - * /
  15.             (2)让用输入   想要计算的数字
  16.             (3)告诉用户计算结果
  17.          */
  19.         //(1)让用户输入 想要的操作   + - * /
  20.         let caozuo = prompt('欢迎使用简易计算器：\n + 加法运算；\n - 减法运算；\n * 乘法运算；\n / 除法运算；\n 请输入您的选项：');
  22.         //(2)让用输入   想要计算的数字
  23.         let num1 = +prompt('请输入第1个数值：');
  24.         let num2 = +prompt('请输入第2个数值：');
  26.         //(3)告诉用户计算结果
  27.         let res = null; //声明变量，用于保存结果
  29.         if(caozuo == '+'){
  30.             res = num1 + num2;
  31.         }else if(caozuo == '-'){
  32.             res = num1 - num2;
  33.         }else if(caozuo == '*'){
  34.             res = num1 * num2;
  35.         }else if(caozuo == '/'){
  36.             res = num1 / num2;
  37.         }else{
  38.             res = '不可识别的操作符';
  39.         }
  41.         alert('运算结果：' + num1 + ' ' + caozuo + ' ' + num2 + ' = ' + res);
  43.     </script>
  44. </body>
  46. </html>

网页版计算器：按照需求分析、思路设计、代码实现、做完总结的四步自我实现

1.2-猜拳游戏

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8.     <title>Document</title>
  9. </head>
  11. <body>
  12.     <script>
  13.         /* 
  14.             规则 ： //规则： 剪刀(1) 　< 石头(2) < 布(3)
  15.             思路 ：
  16.                 (1)生成机器人结果 :   1 2 3 随机数
  17.                 (2)生成用户结果  :  用户输入 1 2 3
  18.                 (3)开始PK
  19.                     * 用户结果     -   机器人结果  =   最终结果
  20.                          1 剪刀          1 剪刀         0  平局     
  21.                          1 剪刀          2 石头         -1 用户输
  22.                          1 剪刀          3 布           -2 用户赢
  23.                          2 石头          1 剪刀         1  用户赢
  24.                          2 石头          2 石头         0  平局
  25.                          2 石头          3 布           -1 用户输
  26.                          3 布            1 剪刀         2  用户输
  27.                          3 布            2 石头         1  用户赢
  28.                          3 布            3 布           0  平局
  29.          */
  31.         //(1)生成机器人结果 :   1 2 3 随机数
  32.         let robNum = Math.floor(Math.random() * 3) + 1;
  33.         console.log(robNum);
  35.         //(2)生成用户结果  :  用户输入 1 2 3
  36.         let usrNum = +prompt('请输入 剪刀(1) 石头(2) 布(3):');
  37.         console.log(usrNum);
  38.         //(3)开始PK
  39.         let res = usrNum - robNum;
  41.         if (res == -1 || res == 2) {
  42.             alert('你输了哟！出师不利，再接再厉');
  43.         } else if (res == 0) {
  44.             alert('好棒棒呀，平局~');
  45.         } else {
  46.             alert('你赢了哟！大吉大利，今晚吃鸡');
  47.         }
  49.     </script>
  50. </body>
  52. </html>

猜拳核心逻辑：用户如何出手，如何得到锤子、剪刀、布？系统怎么产生锤子、剪刀、布？ —— 如果系统无法产生字符串（随机）Math.random()，能否转到数字上进行内部比较？

03-数组(语法学习)

数组作用：一个变量存储多个数据

1.1-数组介绍

  • 1.数组：多个数据的组合，在一起但是又拥有数据的独立性

  • 2.声明一个数组：let 数组名 = [元素1，元素2，元素3…………]

    • 数组名其实就是变量名，只是习惯上称之为数组名
    • 元素其实就是数组中保存的数据，只是习惯上称之为元素
    • 元素是独立的（数据独立性），但是多个元素又在一起（数据组合）

  • 3.获取数组中某一个数据:数组名[下标]

  • 4.获取数组中元素的数量:数组名.length

  • 5.总结：数组主要由三要素构成

    • 元素：数组中的数据
    • 下标：元素在数组中的位置(从0开始按照顺序递增)

    • 长度：数组中元素的数量

      1. //吉泽老师有五位关门大弟子，一次考试将这五位弟子的分数存储起来(25,98,100,89,88)
      3. //使用多个变量弊端：（1）代码冗余 （2）不便于维护
      4. // let s1 = 25;
      5. // let s2 = 98;
      6. // let s3 = 100;
      7. // let s4 = 89;
      8. // let s5 = 99;
      10. //数组：数据的组合，一个变量可以存储多个数据
      12. //1.声明数组  语法： let 数组名 = [元素1，元素2，元素3]
      13. let array = [25,98,100,89,99,5];
      14. console.log ( array );//
      16. //2.下标：记录元素的位置   注意：数据中元素的下标是从0开始
      17. //可以获取数组中的元素  语法：  数字名[下标]
      19. console.log ( array[ 0 ] );
      20. let a = array[0];//将数组中的第一个元素存储到变量a中
      21. console.log ( a );
      23. //3.长度：数组中元素的数量
      24. //语法：数组名.length
      25. console.log ( array.length );//6

day03 - 图2

day03 - 图3

1.2-数组取值与赋值

  • 1.取值：数组名[下标]

    • 取第一个元素:
      1. 数组名[0]
  1.   - 下标从0开始
  • 取最后一个元素:
    1. 数组名[数组名.length - 1]
  1.   - 最后一个元素下标（最大下标） = 长度 - 1
  • 如果下标超过数组最大下标，得到的是undefined

  • 2.赋值：数组名[下标] = 值

    • 如果下标有对应的值，会把原来的值覆盖
    • 如果下标不存在，会给数组新增元素
  1. <script>
  2.     /**
  3.      * 数组取值：  `数组变量名[下标]`
  4.      *      * 1.数组的下标是从0开始的
  5.      *      * 2.数组的最大下标 = 长度 - 1
  6.      *      * 3.如果数组的的下标超过最大下标时，则得到undefined
  7.      *
  8.      * 数组赋值：`数组变量名[下标] = 值;`
  9.             * 1.：如果下标有对应的值，会把原来的值覆盖
  10.             * 2.如果下标不存在，会给数组新增一个元素，并且数组的长度发生变化
  11.      */
  13.     //下标的作用：数组的取值与赋值
  14.     //数组的下标是从0开始的
  16.     let arr = [20,65,78,90];
  18.     //1.数组的取值: 数组名[下标]
  20.     //a.如果没有超过最大下标：获取该下标对应元素的值
  21.     console.log ( arr[ 2 ] );//78 第三个元素的值
  22.     console.log ( arr[ 0 ] );//20 第0个元素
  24.     //b.如果取值下标超出最大下标则会得到undefined
  25.     console.log ( arr[ 4 ] );//undefined
  27.     //2.数组的赋值   语法：数组名[下标] = 值
  29.     //a.如果没有超过最大下标：则将旧值给覆盖
  30.     arr[0] = 100;//将100这个值赋给数组的第1一个元素
  31.     console.log ( arr );
  33.     //b.如果超过最大下标：则将往数组后面添加元素（用法不多）
  34.     arr[5] = 88;
  35.     console.log ( arr );
  36.     console.log ( arr[ 4 ] );
  38.     //数组赋值用的最多的是往数组后面只添加一个元素
  41. </script>

1.3-数组长度

  • 1.获取数组的长度:数组名.length
  • 2.修改数组的长度会改变数组的元素数量:数组名.length = 值
  • 3.删除数组的最后一个元素:数组名.length--
  1. <script>
  2.     /*获取数组的长度：数组中数据（元素）的个数
  3.     获取：数组名.length
  4.     赋值：  数组名.length = 值
  5.         * 改变数组的长度会改变数组的元素数量
  6.      */
  8.     //1.往数组后面添加一个元素
  9.     let arr = [10,20,30,40];
  10.     arr[arr.length] = 50;    //arr.length = 最大下标 + 1
  11.     console.log ( arr );    //[10,20,30,40,50]
  13.     //2.删除数组最后的一个元素
  14.     arr.length--;            //长度-1，相当于把最后一个元素删除了
  15.     console.log ( arr );    //[10,20,30,40]
  17.     //3.设置数组的长度会修改数组的元素
  18.     arr.length = 2;
  19.     console.log ( arr );    //相当于只保留前面两个元素，后面元素全部被删除了
  20. </script>

1.4-数组另一种声明方式

  • 1.简洁方式:let 数组名 = [元素1，元素2，元素3，……]

    • 最常用
  • 2.标准方式：let 数组名 = new Array(元素1，元素2，元素3……)

  • 3.两种方式唯一区别：创建时如果数组的元素只有一个时含义不同

    • 简洁方式：[10]; 代表数组长度为1，元素是10
    • 标准方式：new Array(10); 代表数组长度为10，没有元素
    • day03 - 图4
  1. /**
  2.      * js中复杂的数据类型在初始化的编译器要做的事情远多于基本数据类型
  3.      * 所以为了方便开发者，ECMAJavascript为负责数据类型提供了简洁的创建方式
  4.      *
  5.      * 数组的创建方式有两种:
  6.      *      * 简洁方式：[]
  7.      *      * 标准方式： new Array()
  8.      *      * 它们最大的区别就是创建时如果数组的元素只有一个时含义不同
  9.      *          * 简洁方式：[10]; 代表数组长度为1，元素是10
  10.      *          * 标准方式：new Array(10)； 代表数组长度为10，没有元素
  11.      */
  12. //1.创建一个空数组
  14. //1.1简洁方式：最常用
  15. let nums = [];
  16. //1.2 标准方式
  17. let array = new Array();
  19. //2.创建有多个元素的数组
  20. //2.1 简洁方式
  21. let nums1 = [10,20,30,40,50];            //创建一个长度为5的数组，元素分别为10，20，30，40，50
  22. //2.2 标准方式
  23. let array1 = new Array(10,20,30,40,50);    //创建了一个长度为5的数组，元素分别为10,20,30,40,50
  24. //2.3 这两种方式只是创建的区别，取值和获取长度都是一致
  25. console.log ( nums1[ 2 ], array1[ 3 ]);
  26. console.log ( array1.length, nums1.length );
  28. //3.创建只有一个元素的数组
  29. //3.1简洁方式
  30. let nums2 = [10];            //创建一个长度为1的数组，元素是10
  31. let array2 = new Array(10);    //创建一个长度为10的数组，没有元素。这是一个空数组
  32. console.log ( nums2 );
  33. console.log ( array2 );

04-循环结构

循环结构作用：代码重复执行

1.1-for循环结构

  • 1.for循环语法
  1. for( 语句1;语句2;语句3 ){
  2.     循环体：需要反复执行的代码;
  3. }

  • 2.执行步骤：

    • 1.执行语句1（定义一个循环变量）

      • 2.执行语句2，判断语句2条件是否成立（条件表达式）

        • 2.1 如果条件成立，则执行循环体代码

          • 执行语句3（循环变量自增），重复步骤2
        • 2.2 如果不成立，结束循环，执行大括号后面的代码

  • 3.for循环好处及注意点

    • 好处：循环变量的声明与循环变量自增在一个小括号中，可以更好的避免死循环
    • 注意点：原则上语句1，语句2，语句3可以是任意代码，但是不建议乱写，因为会导致死循环
    • 语句1：通常是定义循环变量
    • 语句2：条件表达式
    • 语句3：通常都是循环变量自增/自减（视需求而定）
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <title>Document</title>
  8. </head>
  9. <body>
  10.     <script>
  11.         /* 
  12.         1. for循环语法
  14.         for(代码1;代码2;代码3){
  15.             循环体代码
  16.         };
  18.         执行步骤
  19.             1.执行代码1（声明循环变量）
  20.             2.判断代码2 （循环条件）
  21.                 2.1 成立，执行循环体代码。
  22.                     执行完毕之后会执行代码3（循环变量自增），重复步骤2
  23.                 2.2 不成立，结束循环，执行大括号后面的代码
  24.          */
  26.          //需求：打印三次 大前端爱你们么么哒
  27.          for(let i = 1;i <= 3;i++){
  28.             console.log('大前端爱你们么么哒');        
  29.          };
  31.          /* 
  32.          for循环注意点 ： 原则上代码1，代码2，代码3可以写任意代码,但是一般不会乱写
  33.          代码1 ： 声明循环变量
  34.          代码2 ： 循环条件
  35.          代码3 ： 循环变量自增
  36.           */
  38.     </script>
  39. </body>
  40. </html>

1.2-for循环练习(箩筐思想求和)

箩筐思想求和

  1. a.声明空箩筐
  3. b.遍历萝卜堆数
  5. c.将萝卜放入箩筐中
  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8.     <title>Document</title>
  9. </head>
  11. <body>
  12.     <script>
  13.          //4.求累加和/ 平均值 = 累加和/数量
  15.          /* 
  16.          箩筐思想 ： 三步法
  17.          1.声明空箩筐
  18.          2.遍历萝卜堆数
  19.          3.将萝卜放入箩筐
  20.           */
  21.         //1.声明空箩筐
  22.         let sum = 0;
  23.         // 2.遍历萝卜堆数
  24.         for(let i = 1;i<=100;i++){
  25.             // 3.将萝卜放入箩筐
  26.             sum += i;
  27.         };
  29.         console.log(sum);
  33.         //老师演示：打印1-10之间所有整数的和
  37.         /*学生练习：
  38.         a.打印1-100之间所有整数的和
  39.         b.打印1-100之间所有偶数的和
  40.         c.用户输入学生的人数，然后依次输入每一个学生的成绩，输入完毕后计算平均成绩
  41.         */
  44.     </script>
  45. </body>
  47. </html>

1.3-for循环练习(擂台思想求最大/小值)

擂台思想求最大/小值

  1. a.声明擂主
  3. b.遍历挑战者
  5. c.依次与擂主PK，交换位置
  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8.     <title>Document</title>
  9. </head>
  11. <body>
  12.     <script>
  14.         //5.求最大值与最小值
  15.         //老师演示：请用户输入5个数, 将最大的那个数打印出来
  17.         /* 
  18.         擂台思想 ： 三步法
  20.         1.声明空擂主 : （第一次挑战者无条件坐擂主）
  21.         2.遍历挑战者
  22.         3.依次和擂主PK
  23.          */
  25.         //1.声明空擂主
  26.         let max = -Infinity; //第一个挑战者一定要比默认擂主大，保证无条件坐擂主
  27.         //2.遍历挑战者
  28.         // for(let i = 1;i<=5;i++){
  29.         //     let num = prompt('请输入第' + i + '个挑战者');
  30.         //     //3.依次和擂主PK
  31.         //     if(num > max){
  32.         //         max = num;
  33.         //     };
  34.         // };
  36.         // console.log(max);
  40.         /*学生练习：请用户输入5个数, 将最小的那个数打印出来*/
  42.         //1.声明空擂主 : （第一次挑战者无条件坐擂主）
  43.         let min = Infinity;
  44.         //2.遍历挑战者
  45.         for (let i = 1; i <= 5; i++) {
  46.             let num = prompt('请输入第' + i + '个挑战者');
  47.             //3.依次和擂主PK
  48.             if (num < min) {
  49.                 min = num;
  50.             };
  51.         };
  52.         console.log(min);
  55.     </script>
  56. </body>
  58. </html>

1.4-break与continue关键字

  • 1.break：结束整个语句

    • break既可以用于循环结构也可以用于switch分支结构

  • 2.continue：结束本次循环体，进入下一次循环判断

    • continue只能用于循环结构语句
  1. <script>
  2.     /**
  3.      * break：结束整个语句
  4.         * break既可以用于循环结构也可以用于switch分支结构
  5.      * continue：结束本次循环体，进入下一次循环判断
  6.         * continue只能用于循环结构语句
  7.      */
  11.     //示例：吃包子：我买了十个包子，包子每次只能吃一个，需要循环吃十个
  12.         //break：假如吃到第五个我吃饱了，后面的包子就都不用吃了
  13.         //continue:假如吃到第五个吃出来小强，那我第五个不吃了，但是我没吃饱，后面还是要继续吃
  14.     let sum = 0;
  15.     for(let i = 1;i<=10;i++){
  17.         //continue
  18.         // if(i == 5) {
  19.         //     console.log ( "吃到小强了，这个包子我不吃了" );
  20.         //      continue;//结束本次循环体（后面的代码不会执行），循环没有结束，还是会依次执行语句3和语句2
  21.         // };
  23.         //break
  24.         if(i==5){
  25.             console.log ( "我吃饱了，后面的包子都不想吃了" );
  26.             break;//结束整个循环语句
  27.         }
  29.         console.log ( "我吃的是第" + i + "个包子" );
  30.     }
  32. </script>

1.5-循环次数不固定02：穷举

穷举：从1遍历到无穷大，找出符合条件的数

  1. <script>
  2. //需求：有一群人，如果3个人站一排多出1个人，如果4个人站一排多出2个人，如果5个人站一排多出3个人
  3.     //请问这群人有多少人
  5.     for(let i = 1;i < Infinity;i++){//从1循环到无穷大，也是一种死循环
  6.         if(i % 3 == 1 && i % 4 ==2 && i % 5 == 3){
  7.             console.log ( "人数为" + i );
  8.             break;//找到答案，结束循环
  9.         }
  10.     }
  12. </script>

1.6-数组遍历

  • 1.数组的遍历：获取数组中每一个元素的值，称之为遍历该数组

    • 如果想要获取数组中每一个元素的值，则需要通过循环语法来获取
  • 2.一般使用for循环来遍历数组，只不过数组的遍历是一种固定格式的for循环

  • 3.固定循环语句格式:for(let i = 0; i < arr.length; i++) {// 数组遍历的固定结构}

    • 思考：为什么循环变量let i = 0 而不是1呢？
  1. <script>
  3.     /**
  4.      * * 1.数组的遍历：获取数组中每一个元素的值，称之为遍历该数组
  5.      *          * 如果想要获取数组中每一个元素的值，则需要通过循环语法来获取
  6.      *    2.一般使用for循环来遍历数组，只不过数组的遍历是一种固定格式的for循环
  7.      *    3.固定循环语句格式:
  8.      *    `for(let i = 0; i < arr.length; i++) {
  9.      *    // 数组遍历的固定结构
  10.      *    }`
  11.      */
  13.     let arr = [10,20,30,40,50];
  15.     for(let i = 0;i<arr.length;i++){
  16.         let element = arr[i];            //获取数组的每一个元素
  17.         console.log ( element );
  18.     }
  19. </script>
  1. 课堂小彩蛋 ： 要求将数组 [2,0,6,1,77,0,52,0,25] 中的 0 去掉后 形成一个不包含 0 的新数组。[2,6,1,77,52,25]

05-课后作业

课后作业

  • 1.请用户输年份，输出该年是平年还是闰年。 （★）

    • 闰年的计算方法：能被400整除 或者 能被4整除且不能被100整除
    • if（ （year % 400 == 0）|| （ year % 4 == 0 && year % 100 != 0 ） ）{ 闰年 }else{ 平年 }

  • 2.请用户输入年份和月份，打印出这个月有多少天（★）

    • 1，3，5，7，8，10，12月有31天
    • 4，6，9，11有30天
    • 2月，如果是平年就是28天，闰年就是29天
  • 3.请用户输入1个星期数. 就将对应的英文的星期打印出来. 英文自己查有道.1 monday 2 tuesday（★）
  • 5.要求用户输入两个数a、b，如果a能被b整除或者a加b大于100，则输出a的值，否则输出b的值（★）

  • 6.编一个程序，从键盘上输入三个数，把最大数找出来。（★★）

    • 不能用Math.max

    • 要自己用if-else来判断

      • 难度提升：也可以尝试分别用三种分支结构来实现,仅当锻炼自己的逻辑思维
  • 7.接收用户输入的分数，根据分数输出对应的等级字母 A、B、C、D、E。其中：（★）
    a. 90分(含)以上 ，输出：A；
    b. 80分(含)~ 90 分(不含)，输出：B；
    c. 70分(含)~ 80 分(不含)，输出：C；
    d. 60分(含)~ 70 分(不含)，输出：D；
    e. 60分(不含) 以下，输出 E。

  • 8.拯救网瘾少年

    • （1）弹出输入框，让用户输入年龄
    • （2）如果年龄在18岁以上，就打印“这个网站可以给你看
    • （3）如果年龄在14-18岁中间， 就用 选择框 询问是否真的要继续查看 （let a = confirm() -> 返回 bool）
    • 如果用户按的是确认，就提示‘给你看了，后果自负’
    • 如果用户按的是取消，就提示‘好孩子，不看也好
    • （4）如果年龄在14岁以下，就提示‘sorry，请回家找妈妈’。