渲染表格
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
h1 {
text-align: center;
}
table {
border-collapse: collapse;
height: 80px;
margin: 0 auto;
}
th,
td {
text-align: center;
padding: 5px 10px;
}
table,
th,
td {
border: 1px solid #000;
}
</style>
</head>
<body>
<h1>订单确认</h1>
<script>
let price = +prompt('请输入商品价格:')
let num = +prompt('请输入商品数量:')
let address = prompt('请输入收货地址:')
let sum = price * num
document.write(`
<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>${sum}元</td>
<td>${address}</td>
</tr>
</tbody>
</table>
`)
</script>
</body>
</html>
打印乘法表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
span {
display: inline-block;
padding: 5px 10px;
width: 65px;
border: 1px solid skyblue;
margin: 2px;
border-radius: 5px;
box-shadow: 2px 2px 2px rgba(157, 230, 247, 0.4);
background-color: #fff;
text-align: center;
}
</style>
</head>
<body>
<script>
for (let i = 1; i <= 9; i++) {
for (let j = 1; j <= i; j++) {
document.write(`<span>${j}×${i}=${i * j}</span>`)
}
document.write('<br>')
}
</script>
</body>
</html>
渲染柱状图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
display: flex;
width: 500px;
height: 300px;
margin: 100px auto;
border-left: 2px solid skyblue;
border-bottom: 2px solid skyblue;
justify-content: space-around;
align-items: flex-end;
text-align: center;
}
.box>div {
display: flex;
flex-direction: column;
width: 40px;
background-color: skyblue;
justify-content: space-between;
}
.box div span {
margin-top: -20px;
}
.box div h5 {
width: 60px;
margin-bottom: -30px;
margin-left: -10px;
}
</style>
</head>
<body>
<script>
let height = []
for (let i = 1; i <= 4; i++) {
height.push(prompt(`请输入第${i}季度的数据:`))
}
document.write(`<div div class="box" >`)
for (let i = 0; i < height.length; i++) {
document.write(`
<div style="height: ${height[i]}px;">
<span>${height[i]}</span>
<h5>第${i + 1}季度</h5>
</div>
`)
}
document.write(`</div>`)
</script>
</body>
</html>