计算器
难点就是将字符串类型转换为数据类型
注意点：隐式转换，放加号的值是正数，放减号的值会变成负数，放乘除会代码错误
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
let num1 = +prompt('请输入第一个数'),
num2 = + prompt('请输入第一个数');
// 数据转换解决默认变成字符串的问题，前面放+-/*都可以
document.write(num1 + num2)
</script>
</body>
</html>
反引号用法案例
说了一下反引号的强大之处，无所不包，不过变量在他里面有固定写法，${} 英语的钱符号加大括号，案例如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
let nome = prompt("叫什么名字"), age = prompt('今年多少岁')
// 反字符串的用法，字符串模板就是这反字符串
document.write(`大家好，我叫${nome},今年${age}岁`)
</script>
</body>
</html>
变量的一些简写加输入案例
就是简化了写法，使用一下，熟悉怎么写，起变量名字不规范，认错 案例如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
let name = prompt('请输入姓名'),
t = prompt('请输入年龄'),
n = prompt('请输入身高');
document.write(name, t, t)
</script>
</body>
</html>
表单练习案例
这是今天做的最难的案例，表单都忘得差不多了，然后回去翻笔记，丢脸啊，大体写好了的时候，灵机一动想起了无所不包的反引号大佬，然后劈里啪啦一顿输出成功做出来了，不满意的就是，我还想做表格固定在网页的，然后弹窗输入的时候在格子显示输入的东西，但是百度了一下有点深奥，加油吧，你迟早都可以的，足够技术支持才能做自己想要的东西，废话多了上正片案例如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
table {
border-collapse: collapse;
text-align: center;
margin: 0 auto;
}
</style>
</head>
<body>
<!-- 案例思路,先正常建一个表格,然后剪切到js输出到body里面的代码,然后赋值,嵌入想要的位置,最后通过js弹窗输入,计算结果 -->
<script>
let commodity = prompt('请输入商品名称'), commodity1 = prompt('请输入商品价格'), commodity2 = prompt('请输入商品数量'), commodity3 = commodity1 * commodity2, commodity4 = prompt('请输入收货地址');
document.write(` <table border="1" width="400" height="100">
<caption>
<h3>订单付款确认页面</h3>
</caption>
<thead>
<th>商品名称</th>
<th>商品价格 </th>
<th>商品数量</th>
<th>总价</th>
<th>收货地址</th>
</thead>
<tbody>
<td>${commodity}</td>
<td>${commodity1}元</td>
<td>${commodity2}</td>
<td>${commodity3}元</td>
<td>${commodity4}</td>
</tbody>
</table>`)
</script>
</body>
</html>
