学习笔记之JS（0830）

尸僵打怪兽

已于 2024-08-30 17:15:34 修改

阅读量599

点赞数 3

分类专栏： JaveScript 文章标签：学习笔记 javascript

于 2024-08-30 16:49:00 首次发布

本文链接：https://blog.csdn.net/m0_70630166/article/details/141721847

版权

JaveScript 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

1、介绍

1.1 JavaScript （是什么？）

javascript是一种运行在客户端（浏览器）的编程语言，实现人机交互效果。
作用（做什么？）
- 网页特效（监听用户的一些行为让万叶做出对应的反馈
  - 表单验证（针对表单数据的合法性进行判断）
  - 数据交互（获取后台的数据，渲染到前端
  - 服务端编程（node.js)
JavaScript的组成（有什么？）

ECMAScript:规定了js基础语法核心知识。如：变量，分支语句，循环语句，对象等。
Web APIs:
- DOM操作文档，比如对页面元素进行移动、大小、添加删除等操作
- BOM操作浏览器，比如页面弹窗，检测窗口宽度，存储数据到浏览器等
JS权威网站：MDN

请添加图片描述

内部JavaScript

直接写在html文件里，用script标签包住

规范：script标签写在</body>上面

拓展：alert(‘你好，js’)页面弹出警告对话框

注意事项：我们将<script>放在HTML文件底部的附近的原因是浏览器会按照代码在文件中的顺序加载HTML。如果我们先加载的JavaScript期望修改其下方的HTML，那么可能由于HTML尚未被加载而失败。

外部JavaScript

代码卸载以 .js 结尾的文件里
语法：通过script 标签引入到html页面中

注意事项：

script标签中间无需写代码，否则会被忽略！
外部JavaScript会使代码更加有序，且没有了脚本的混合，HTML也会更加易读，因此这个是个好的习惯。

内联Javascript

代码写在标签内部
语法：注意（此处了解即可，但是后面Vue 框架会用这种模式

代码：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  

  <!-- 内部js -->
  <script>
alert("你好，JS！")
  </script>

  <script src="../第一天/js/02-书写位置.js">
    // 中间不能写代码
  </script>

<!-- 行内部js -->
  <button onclick="alert('逗你玩呢~~~')">点我月薪过万</button>



</body>
</html>

js:

alert("努力，奋斗")

1.3 注释和结束符

单行注释
- 符号： //
- 作用： // 右边这一行的代码会被忽略
- 快捷键： CTRL + /
块注释
- 符号： /* */
- 作用：符号之间的所有内容都会被忽略
- 快捷键： shift + alt + a
结束符
- 作用：使用英文的 ;表示语句的结束
- 实际情况：实际开发中，可写可不写，浏览器（JavaScript引擎自动变更推断语句的结束位置
- 现状：在实际开发中，越来越多的人主张，书写JavaScript代码时省略结束符
- 约定：为了风格统一，结束符要么每句都写，要么每句都不写（按照团队要求）
1.5 JavaScript输入输出语法

目标：能写出常见JavaScript输入输出语法
输出和输入也可理解为人和计算机的交互，用户通过键盘、鼠标等向计算机输入信息，计算机处理后再展示结果，这便是一次输入和输出的过程。

输出语法

语法1

document.write（要出的内容'）

作用：向body内输出内容
注意：如果输出的内容写的是标签，也会被解析成网页元素
语法2

alert('hello js')

作用：页面弹出警告对话框
语法3

console.log("控制台打印")

作用：控制台输出语法，程序员测试使用

输入语法

语法

prompt("请输入您的姓名")

作用：显示一个对话框，对话框中包含一条文字信息，用来提示用户输入文字

JavaScript代码执行顺序：

按HTML文档流顺序执行JavaScript代码
alert(）和prompt(）它们会跳过页面渲染先被执行（目前作为了解，后期讲解详细执行过程）

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
  <script>
    // 1.文档输出内容
    document.write('我是div标签')
    document.write('<h1>我是一级标题</h1>')
    alert('我是alert')
    console.log('我是console' );


    // 输入
    let age =  prompt("请输入你的年龄：")
    document.write(age)
  </script>
</body>
</html>

1.6 字面量

目标：能说出什么是字面量
在计算机科学中，字面量（literal）是在计算机中描述事/物
我们工资是：1000此时1000就是数字字面量
黑马程序员字符串字面量
还有接下来我们学的【】数组字面量对象字面量等等

练习- 输出用户信息

需求：让用户输入自己的名字、年龄、性别，再输出到网页
分析：
- 弹出输入框（prompt）：请输入您的姓名(uname)：用变量保存起来。
- 弹出输入框（prompt）：请输入您的年龄(age)：用变量保存起来。
- 弹出输入框（prompt）：请输入您的性别(gender)：用变量保存起来。
- 页面分别输出（document.write）刚才的3个变量。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script>

    let uname = prompt('请输入您的姓名')
    let age = prompt('请输入您的年龄')
    let gender = prompt('请输入您的性别')
    document.write('<h1>欢迎您，'+uname+'</h1>')
    document.write('<h1>您的年龄是'+age+'</h1>')
    document.write('<h1>您的性别是'+gender+'</h1>')

    // 模板字符串
    document.write(`
    <h1>欢迎您，${uname}</h1>
    <h1>您的年龄是${age}</h1>
    <h1>您的性别是${gender}</h1>
    `)
 
  </script>
</body>
</html>

运行结果

请添加图片描述

2、变量

2.1 变量是什么？

目标：理解变量是计算机存储数据的“容器”

变量

白话：变量就是一个装东西的盒子。
通俗：变量是计算机中用来存储数据的“容器”，它可以让计算机变得有记忆。

请添加图片描述

注意：变量不是数据本身，它们仅仅是一个用于存储数值的容器。可以理解为是一个个用来装东西的纸箱子。

2.2 变量的基本使用

目标：能够声明一个变量并完成赋值操作

变量的声明：要想使用变量，首先需要创建变量（也称为声明变量或者定义变量）

语法：

let 变量名

声明变量有两部分构成：声明关键字、变量名（标识）
let即关键字（let:允许、许可、让、要)，所谓关键字是系统提供的专门用来声明（定义）变量的词语

变量的赋值：定义了一个变量后，你就能够初始化它（赋值）。在变量名之后跟上一个“=”，然后是数值。

请添加图片描述

注意：是通过变量名来获得变量里面的数据
简单点，也可以声明变量的时候直接完成赋值操作，这种操作也称为变量初始化。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script>
    // 1.声明一个年龄变量
    let age 
    // 2.赋值 =
    age = 18

    // 3.输出age变量


    // 声明的同时，赋值
    let Age = 19
    alert(age)
  </script>
</body>
</html>

课堂练习
- 需求：
- 声明一个变量，用于存放用户购买的商品数量（num）为20件
- 声明一个变量，用于存放用户的姓名（uname）为’张三
- 依次控制台打印输出两个变量

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script>
    let num = 20
    let uname = '张三'
    console.log(num,uname)
  </script>
</body>
</html>

运行结果

请添加图片描述
3. 更新变量：变量赋值后，还可以通过简单地给它一个不同的值来更新它。

目标：掌握变量的更新以及了解同时声明多个变量的写法

Code

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script>
     /* 3.声明的同时直接赋值变量的初始化 */
    let age = 18
    console.log(age);
      age  = 19
    console.log(age);
    
    // 声明多个变量
    let name = '张三', Age = 18, height = 1.88
    console.log(name,Age,height);
    
    
  </script>
</body>
</html>

声明多个变量：变量赋值后，还可以通过简单地给它一个不同的值来更新它

语法：多个变量中间用逗号隔开

let age = 19,uname = 'pink'

练习1

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script>
    let name = prompt("请输入姓名")
    document.write("您的姓名是",name)
  </script>
</body>
</html>

运行结果：
练习2
交换两个变量的值

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script>
    let num1 = 10,num2 = 20,num
    document.write(num1,"  ",num2)
    document.write("<br>")
    num = num1
    num1 = num2
    num2 = num
    document.write(num1,"  ",num2)
    document.write('<br>')
    document.write(num)
  </script>
</body>
</html>

运行结果

2.3变量的本质

目标：能够说出变量的本质是什么
内存：计算机中存储数据的地方，相当于一个空间
变量本质：是程序在内存中申请的一块用来存放数据的小空间

请添加图片描述

2.4 变量命名规则与规范

目标：能写出符合规范的变量名
规则：必须遵守，不遵守会报错（法律层面）
规范：建议，不遵守不会报错，但不符合业内通识（道德层面）

规则：
- 能用关键字
  - 关键字：有特殊含义的字符，JavaScript内置的一些英语词汇。例如：let、var、if、for等
- 能用下划线、字母、数字、$组成，且数字不能开头
- 字母严格区分大小写，如Age和age是不同的变量
规范：
- 名要有意义
- 遵守小驼峰命名法
  - 一个单词首字母小写，后面每个单词首字母大写。例：userName

2.5 变量let和var的区别：

在较l旧的JavaScript，使用关键字var来声明变量，而不是let。var现在开发中一般不再使用它，只是我们可能再老版程序中看到它，let为了解决var的一些问题。
var声明：

可以先使用在声明（不合理）
var声明过的变量可以重复声明（不合理）
比如变量提升、全局变量、没有块级作用域等等

3、变量扩展-数组

3.1 数组的基本使用

目标：够声明数组并且能够获取里面的数据

声明语法

let 数组名= [数据1，数据2，... , 数据n]
eg:
let names=['小明'，‘小刚'，'小红'，‘小丽'，‘小米']

数组是按顺序保存的，所以每个数据都有自己的编号
计算机中的编号从0开始
在数组中，数据的编号业绩哦啊索引或下标
数组可以存储任意类型的数据

取值语法

//数组名[下标]

通过下标取数据
取出来是什么类型的，就根据这种类型特点来访问

一些术语

元素：数组中保存的每个数据都叫数组元素
下标：数组中数据的编号
长度：数组中数据的个数，通过数组的length属性获得

练习

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script>
    // 数组取值案例
    // 需求：定义一个数组，里面存放星期一、星期二....直直到星期日（共7天），在控制台输出：星期日
    let  data = ["星期一",'星期二','星期三','星期四','星期五','星期六','星期日']
    document.write(data[6])
    document.write(data.length)
 </script>
</body>
</html>

运行结果：请添加图片描述

4、数据类型

目标：能说出JS中基本数据类型有哪些

计算机世界中的万事万物都是数据
计算机程序可以处理大量的数据，为什么要给数据分类？

更加充分和高效的利用内存
也更加方便程序员的使用数据

JS 数据类型整体分为两大类

基本数据类型

类型名称	表示
number	数字型
string	字符串型
boolean	布尔型
undefined	未定义型
null	空类型

引用数据类型

类型名称	表示
object	对象

4.1 数据类型-数字类型（Number）

即我们数学中学习到的数字，可以是整数、小数、正数、负数。

JavaScript中的正数、负数、小数等统一称为数字类型。

注意事项：

- JS是弱数据类型，变量到底属于那种类型，只有赋值之后，我们才能确认。
- Java是强数据类型，例如`int a=3`必须是整数

数字可以有很多操作，比如，乘法＊、除法／、加法+、减法－等等，所以经常和算术运算符一起。
数学运算符也叫算术运算符，主要包括加、减、乘、除、取余（求模）。

+：求和
-：求差
*：求积
/：求商
%：取模（取余数）
- 开发中经常作为某个数字是否被整除

优先级

目标：能说出JavaScript算术运算符执行的优先级顺序

同时使用多个运算符编写程序时，会按着某种顺序先后执行，我们称为优先级。
JavaScript中优先级越高越先被执行，优先级相同时以书从左向右执行。

乘、除、取余优先级相同
加、减优先级相同
乘、除、取余优先级大于加、减
使用（）可以提升优先级
总结：先乘除后加减，有括号先算括号里面的~~~
提问：

NaN

NaN代表一个计算错误。它是一个不正确的或者一个未定义的数学操作所得到的结果

console.log('老师' - 2)

NaN 是粘性的。任何对NaN的操作都会返回NaN（包括NaN）

console.log(NaN +2) // NaN

练习

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script>
    // 弱数据类型的语言 只有赋值了才知晓是什么数据类型
    let num = 2
//     计算圆的面积
// 需求：对话框中输入圆的半径，算出圆的面积并显示到页面
     let r = prompt('请输入圆的半径')
     let area = 3.14*r*r
     document.write(area)
     document.write('<br>')
     //not a number(NAN)   document.write('<br>')
     document.write("'pink' - 2",'pink' - 2)
     document.write('<br>')
     document.write('NaN - 1=',NaN - 1)
     document.write('<br>')
    document.write('NaN + 1=',NaN + 1)
    document.write('<br>')
    document.write('NaN+NaN=',NaN + NaN)
    // 输出为false
    // document.write(NaN === NaN)
  </script>
</body>
</html>

运行结果：

请添加图片描述

4.2 数据类型-字符串类型（String）

通过单引号（“）、双引号（”"）或反引号（）包裹的数据都叫字符串，单引号和双引号没有本质上的区别，推荐使用
单引号。

注意事项

无论单引号或是双引号必须成对使用
单引号/双引号可以互相嵌套，但是不以自已嵌套自已（口诀：外双内单，或者外单内双）
必要时可以使用转义符\，输出单引号或双引号

练习：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script>
    let str = 'pink'
    let str1 = "pink1"
    let str2 = `pink3`
    console.log(str2);
    console.log('数字：',11); //蓝色
    console.log('字符串','11'); //黑色
    
    
    // 引号必须成对出现
    console.log('pink老师讲课非常有"基情" ' );
    console.log("pink老师讲课非常有'基情' " );
    console.log("pink老师讲课非常有\"基情\" " ); //转义符
    

    // 字符串拼接
    document.write(1+1);
    document.write('<br>')
document.write('pink'+'老师')
document.write('<br>')
let age = 20
document.write('我今年'+age+'岁了(拼接)')
document.write('<br>')
document.write(`我今年${age}岁了（模版字符串)`)





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

运行结果：请添加图片描述
模板字符串

使用场景：

拼接字符串和变量
在没有它之前，要拼接变量比较麻烦

document.write（'大家好，我叫’+name+'，今年’+age+‘岁'）

语法：

``(反引号)
在英文输入模式下的按键盘的tab键上方的那个键（1左边那个键）
内容拼接变量是，用${变量名}包住变量

练习

页面输出用户信息案例

需求：页面弹出对话框，输入名字和年龄，页面显示：大家好，我叫xxx，今年xx岁了

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
  // 页面输出用户信息案例
  // 需求：页面弹出对话框，输入名字和年龄，页面显示：大家好，我叫xxx，今年xx岁了
  let name = prompt('请输入您的名字')
  let age = prompt('请输入您的年龄')
  document.write(`大家好！我叫${name},今年${age}岁了`)
</script>
</body>
</html>

运行结果请添加图片描述

4.3 数据类型-布尔型（boolean)

表示肯定或否定时在计算机中对应的是布尔类型数据。它有两个固定的值true和false，表示肯定的数据用true（真），表示否定的数据用false（假）。

4.4 数据类型-未定义类型（undefined)

未定义是比较特殊的类型，只有一个值undefined

声明情况出现未定义类型？

只声明变量，不赋值的情况下，变量的默认值为undeifed,一般很少【直接】为某个值为undefined

let age //声明未赋值
document.write(age) //输出undefined

工作中的使用场景

我们开发中经常声明一个变量，等待传送过来的数据。

如果我们不知道这个数据是否传递过来，此时我们可以通过检测这个变量是不是undefined就判断用户是否有数据传递过来。

4.5 数据类型- null （空类型）

JavaScript中的null仅仅是一个代表“无”，“空”或“值未知”的特殊值。

let obj = null
console.log(obj) // null

null和undefined的区别：

undefined表示没有赋值
null 表示赋值了，但是内容为空

null开发中的使用场景

官方解释：把null作为尚未创建的对象
大白话：将来有个变量里面存放的是一个对象，但是对象还没创建好，可以先给个null

练习

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script>
    // 布尔
    let isCool  = true
    console.log(isCool);

    // 声明一个变量未给值就是undefined
    let gg 
    console.log(gg);
    
    // 空
    let obj = null
    console.log(obj);
    
    // null 和 undefined区别：null是空值，undefined是未定义
    console.log("null == undefined? ",null == undefined);
    console.log("null === undefined? ",null === undefined);
    console.log('undefined + 1=',undefined + 1) ; //NaN
    console.log('null + 1=',null + 1);
    
  </script>
</body>
</html>

Result:

请添加图片描述

4.6 数据类型-检测数据类型

通过typeof关键字检测数据类型

typeof运算符可以返回被检测的数据类型。它支持两种语法形式：

作为运算符：typeof x(常用的写法)
函数形式：typeof(x)

换言之，有括号和无括号，得到的结果是一样的，所以我们直接使用运算符的写法。

练习

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script>
    let age = 19
    let uname = '刘德华'
    let flag = false
    let buy
    let obj = null
    console.log(age);
    console.log(uname);
    console.log(flag);
    console.log(buy);

    console.log(typeof age);
    console.log(typeof uname);
    console.log(typeof flag);
    console.log(typeof buy);
    console.log(typeof obj);
  
  </script>
</body>
</html>

Result:

请添加图片描述

5、类型转换

5.1 为什么要类型转换

JavaScript是弱数据类型：JavaScript也不知道变量到底属于那种数据类型，只有赋值了才清楚。
坑：使用表单、prompt获取过来的数据默认是字符串类型的，此时就不能直接简单的进行加法运算。

console.log('10000' + '2000') //输出结果 100002000

类型转换：把一种数据类型的变量转换成我们需要的数据类型。

练习：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script>
    let num1 = prompt("请输入第一个数")
    document.write('num1的数据类型是：',typeof num1);
    document.write('<br>')
    let num2 = +prompt("请输入第二个数")
    document.write('num2的数据类型是：',typeof num2);
    
  </script>
</body>
</html>

运行结果：请添加图片描述

5.2 隐式转换

某些运算符被执行时，系统内部自动将数据类型进行转换，这种转换称为隐式转换。

规则：

+号两边只要有一个是字符串，都会把另外一个转成字符串
除了+以外的算术运算符比如－*/等都会把数据转成数字类型

缺点：

转换类型不明确，靠经验才能总结

小技巧：

+号作为正号解析可以转换成数字型
任何数据和字符串相加结果都是字符串

练习

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script>
    // 隐式转换
    document.write('<br>')
    document.write(1 + 1)
    document.write('<br>')
    document.write('pink' + 1)
    document.write('<br>')
    document.write(2 + '2') //22
    document.write('<br>')
    document.write(2 - '2') // 0
    document.write('<br>')
    document.write('2' - 2)
    document.write('<br> "2" + 2  ' )
    document.write('2' + 2)
    document.write('<br>')
    document.write("+12:",+12)
    document.write('<br>')
    document.write("+'123':",+123,typeof +123) // numbe 

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

Result

请添加图片描述

5.3 显示转换

编写程序时过度依靠系统内部的隐式转换是不严禁的，因为隐式转换规律并不清晰，大多是靠经验总结的规律。为了避免因隐式转换带来的问题，通常根逻辑需要对数据进行显示转换。

概念：自己写代码告诉系统该转成什么类型

转换为数字型：

格式：Number(数据):
- 转成数字类型
- 如果字符串内容里有非数字，转换失败时结果为NaN（Not a Number)既不是一个数字
- NaN也是number类型的数据，代表非数字
parsetInt(数据)
- 只保留整数
parsetFloat(数据)
- 可以保留小数

练习

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script> 

    // 显式转换
    let str = '123'
    console.log(str);
    
    console.log(Number(str));
    console.log(Number('pink')); //NaN
    
    let num = +prompt('请输入你的年薪1')//隐式转换
    let num1 = Number(prompt('请输入你的年薪2'))
    console.log('年薪：',typeof num)
    console.log('年薪2：',typeof num1);
    
    // 自动取前面的数字（整数部分） (12)
    console.log(parseInt('12px'));
    console.log(parseInt('12.3px'));
    console.log(parseInt('12.9876px'));
    console.log(parseInt('abc12.9876px')); //错误
    console.log('float');
    
    console.log(parseFloat('12px'));
    console.log(parseFloat('12.3px'));
    console.log(parseFloat('12.9876px'));
    console.log(parseFloat('abc12.9876px')); //错误
  </script>
</body>
</html>

运行结果：

请添加图片描述

6、综合案列

用户订单信息案例

需求——用户输入商品价格和商品数量，以及收货地址，可以自动打印订单信息。

图示：请添加图片描述

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>综合案例</title>
  <style>
  * {
    padding: 0;
    margin: 0;
  }
  .app {
    width: 800px;
    height: 600px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .title {
    width: 100%;
    height: 50px;
    line-height: 50px;
    text-align: center;
    background-color: #ccc;
  }
  .title,table,th,td,tr {
    border-collapse: collapse;
  }
  .container {
    width: 100%;   
    display: flex;
    flex-direction: column;
    border: 1px solid black;
    th,td { 
      padding: 0;
      margin: 0;
      text-align: center;
    }
  }
  </style>
</head>
<body>
     

  <script>
    let price = +prompt('请输入商品价格')
    let num = +prompt('请输入商品数量')
    let address = prompt('请输入收货地址')
    let total = price * num
    document.write(`
    <div class="app">
      <!-- 大标题 -->
      <div class="title">
        <h2>订单确认</h2>
      </div>

      <div class="container">
        <table>
          <!-- 表头 -->
          <thead>
            <tr>
              <th>商品名称</th>
              <th>商品价格</th>
              <th>商品数量</th>
              <th>总价</th>
              <th>收货地址</th>
            </tr>
          </thead>

          <tbody>
            <tr>
              <td>小米手机青春PLUS </td>
              <td>${price}元 </td>
              <td>${num} </td>
              <td>${total}元</td>
              <td>${address}</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
    `)
  </script>
</body>
</html>