Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 0401作业
Blogger Information
Blog 13
fans 0
comment 0
visits 5894
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
0401作业
　
Original
583 people have browsed it

模板面量

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>Document</title>
  8.   </head>
  9.   <body>
  10.     <script>
  11.       //1.模板字面量>表达式潜入字符串  使用反引号声明字符串内容即可
  12.       //   let name = "朱老师";
  13.       //   let str = "hello" + name;
  14.       //   console.log(str);
  15.       //   let mk = `Hello${name}`;
  16.       //   console.log(mk);
  17.       //模板字面量>表达式潜入字符串  使用反引号声明字符串内容即可
  19.       //**案例  通过数组控制html输出且写入dom
  20.       //   let menus = ["首页", "Video", "Article"];声明数组
  21.       //   let htmStr = `   使用模板字面量声明代码并用数组替换加载内容
  22.       //      <nav>
  23.       //   <a href="">${menus[0]}</a>
  24.       //   <a href="">${menus[1]}</a>
  25.       //   <a href="">${menus[2]}</a>
  26.       //       </nav>
  27.       //   `;
  28.       //   console.log(htmStr);输出html代码
  29.       //   document.body.insertAdjacentElement("beforEnd", htmStr);把html代码写入body页面
  30.       //**案例  通过数组控制html输出且写入dom
  32.       //2.标签函数,自定义模板字面量的一些行为
  33.       let hello = function (x) {
  34.         alert(x);
  35.       };
  36.       hello("牛逼666");
  37.       hello`wwww`;
  38.     </script>
  39.   </body>
  40. </html>

格式化输出

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>Document</title>
  8.   </head>
  9.   <body>
  10.     <script>
  11.       // 1:赋值
  12.       let a = 1;
  13.       let b = a;
  14.       console.log("a = %d , b = %d", a, b);
  15.       //   占位符格式化输出：%s字符串  %d十进制  %o八进制  %x十六进制 %f浮点数  %e/E科学记数法  %转义字符
  16.       //   在字符串中使用上述占位符进行书写，在输出最后用逗号分隔填充变量，最终控制台输出时为变量
  17.       //   a = %d  b = %d ,a,b 演示
  19.       // 2:值传递
  20.       a = 2;
  21.       //a=2只是a等于2，b已经在第13行赋值了，20行并未刷新d
  22.       console.log("a = %d , b = %d", a, b);
  24.       //   3.引用传递，适用于引用类型，对象，数组
  25.       let obj = {
  26.         ID: "kowal",
  27.         Name: "tyler",
  28.       };
  29.       console.log("obj1=%o", obj);
  30.       let obj2 = obj;
  31.       console.log(obj2);
  32.       //   console.log(obj2 === obj);
  33.       // 更新obj成员
  34.       obj.ID = 10;
  35.       console.log(obj2);
  36.       //   4.传参  始终是值传递
  37.       //   const F1 = (x) => (x = 10);
  38.       //   const F1 = function (z) {
  39.       //     x = z;
  40.       //   };
  41.       //   F1("asdasdd");
  42.       //   alert(x);
  43.       const F1 = (x) => ((c = x), (bn = 6));
  44.       F1(10);
  45.       console.log(c, bn);
  46.     </script>
  47.   </body>
  48. </html>

数组解构

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>Document</title>
  8.   </head>
  9.   <body>
  10.     <script>
  11.       // 数组的声明与对应变量赋值
  12.       //   let shuzu = [1, 2, 3, "撒大苏打撒旦"];
  13.       //   console.log(shuzu);
  14.       //   let a = shuzu[0];
  15.       //   let b = shuzu[1];
  16.       //   let c = shuzu[2];
  17.       //   console.log(a, b, c);
  19.       //   解构写法
  20.       //   let [a, b] = [1, 2, 3];
  21.       //   console.log(a, b);
  23.       //   全部拿到
  24.       //   [a, b, c, ...d] = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11];
  25.       //   console.log(typeof d);
  26.       //   console.log(typeof c);
  28.       //只拿第7个值
  29.       //   [, , , , , , , , , , v] = [10, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11];
  30.       //   console.log(v);
  32.       let a = 1,
  33.         b = 2;
  34.       [b, aa] = [a, b];
  35.       console.log(aa, b);
  36.     </script>
  37.   </body>
  38. </html>

对象 数组解构

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>Document</title>
  8.   </head>
  9.   <body>
  10.     <script>
  11.       //常规对象定义
  12.       let Object_First_One = {
  13.         a: 1,
  14.         b: 2,
  15.         c: 3,
  16.       };
  17.       a = Object_First_One.a;
  18.       b = Object_First_One.b;
  19.       c = Object_First_One.c;
  20.       console.log(a, b, c);
  22.       //   对象解构
  23.       ({ id, name } = { id: 40541, name: "电脑" });
  24.       console.log(id, name);
  26.       //数组传参
  27.       //   let Sum = function ([a, b]) {
  28.       //     return a + b;
  29.       //   };
  30.       //   console.log(Sum([10, 80]));
  32.       //   箭头函数+数组传参
  33.       //   let Sum = ([a, b]) => a + b;
  34.     </script>
  35.   </body>
  36. </html>

if else

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>Document</title>
  8.   </head>
  9.   <body>
  10.     <script>
  11.       let score = 64;
  12.       if (score >= 60) {
  13.         console.log("及格");
  14.       }
  15.       if (score >= 0 && score <= 68) {
  16.         console.log("不及格");
  17.       } else {
  18.         ("优秀");
  19.       }
  20.     </script>
  21.   </body>
  22. </html>

switch

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>Document</title>
  8.   </head>
  9.   <body>
  10.     <script>
  11.       let score = 64;
  12.       if (score >= 60) {
  13.         console.log("及格");
  14.       }
  15.       if (score >= 0 && score <= 68) {
  16.         console.log("不及格");
  17.       } else {
  18.         ("优秀");
  19.       }
  20.     </script>
  21.   </body>
  22. </html>

switch-字符匹配

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>Document</title>
  8.   </head>
  9.   <body>
  10.     <script>
  11.       let count = 60;
  12.       switch (true) {
  13.         case count >= 60 && count <= 75:
  14.           console.log("合格");
  15.           breake;
  16.         case count >= 60 && count <= 75:
  17.           console.log("合格");
  18.           breake;
  19.         case count >= 60 && count <= 75:
  20.           console.log("合格");
  21.           breake;
  22.         case count >= 60 && count <= 75:
  23.           console.log("合格");
  24.           breake;
  25.         case count >= 60 && count <= 75:
  26.           console.log("合格");
  27.           breake;
  28.         case count >= 60 && count <= 75:
  29.           console.log("合格");
  30.           breake;
  31.         case count >= 60 && count <= 75:
  32.           console.log("合格");
  33.           breake;
  34.       }
  35.     </script>
  36.   </body>
  37. </html>
  38. <!DOCTYPE html>
  39. <html lang="en">
  40.   <head>
  41.     <meta charset="UTF-8" />
  42.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  43.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  44.     <title>Document</title>
  45.   </head>
  46.   <body>
  47.     <script>
  48.       let status = "super";
  49.       switch (status) {
  50.         case "super":
  51.           console.log("成功");
  52.           break;
  53.         case "error":
  54.           console.log("失败");
  55.           break;
  56.       }
  57.     </script>
  58.   </body>
  59. </html>
Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post