js基础-day1-all

2026-07-01 16:37:55 +08:00
parent c3f10f72a3
commit 8c27a8133e
1 changed files with 104 additions and 0 deletions
@@ -0,0 +1,104 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>用户订单信息打印</title>
+    <style>
+        /*h1 {*/
+        /*    text-align: center;*/
+        /*}*/
+        /*table {*/
+        /*    !* 左右外边距自动，实现块级元素居中 *!*/
+        /*    margin: 0 auto;*/
+        /*    !* 可选：让表格更美观，和标题保持一点距离 *!*/
+        /*    margin-top: 20px;*/
+        /*}*/
+             /* 全局基础样式，统一字体和边距 */
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+            font-family: "Microsoft YaHei", "微软雅黑", sans-serif;
+        }
+
+        body {
+            /* 让内容整体垂直水平居中，背景色更柔和 */
+            min-height: 100vh;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            background-color: #f5f7fa;
+            padding: 20px;
+        }
+
+        h1 {
+            /* 标题样式，更大气 */
+            color: #333;
+            margin-bottom: 30px;
+            font-size: 32px;
+            font-weight: 600;
+        }
+
+        table {
+            /* 表格居中 + 美化 */
+            border-collapse: collapse;
+            width: 800px; /* 固定宽度，更规整 */
+            background-color: #fff;
+            box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1); /* 加个阴影，更有层次感 */
+        }
+
+        th, td {
+            border: 1px solid #ccc;
+            padding: 15px 10px;
+            text-align: center; /* 核心：让单元格内容居中 */
+            font-size: 16px;
+        }
+
+        th {
+            /* 表头样式，区分度更高 */
+            background-color: #409eff;
+            color: #fff;
+            font-weight: 500;
+        }
+
+        td {
+            color: #666;
+        }
+    </style>
+</head>
+<body>
+    <h1>订单付款确认页面</h1>
+
+    <script>
+        let spmc = prompt('输入商品名称:')
+        let spdj = prompt('输入上面单价')
+        let spsl = prompt('输入购买的数量')
+        let shdz = prompt('输入收获地址')
+        zj = spdj * spsl
+        //document.getElementById('spdj').innerText = spdj
+        document.writeln(`
+            <table border="1" cellpadding="8" cellspacing="0">
+        <thead>
+            <tr>
+                <th>商品名称</th>
+                <th>商品价格</th>
+                <th>商品数量</th>
+                <th>总价</th>
+                <th>收货地址</th>
+            </tr>
+        </thead>
+        <tbody>
+            <tr>
+                <td id="spmc">${spmc}</td>
+                <td id="spdj">${spdj}</td>
+                <td id="spsl">${spsl}</td>
+                <td id="zj">${zj}</td>
+                <td id="shdz">${shdz}</td>
+            </tr>
+        </tbody>
+    </table>
+        `)
+    </script>
+</body>
+</html>