一：用户订单信息案例
eg：
javascript
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
div {
width: 400px;
margin: 0 auto;
}
table {
border-collapse: collapse;
}
th {
text-align: center;
}
td {
text-align: center;
}
</style>
<body>
<script>
let jiage = +prompt('请输入商品的价格:')
let shuliang = +prompt('请输入商品的数量:')
let dizhi = prompt('请输入您的收货地址:')
let zhongjia = jiage * shuliang
document.write(`
<div>
<table border="1">
<caption><b>您的订单信息</b></caption>
<tr>
<th>商品名称</th>
<th>商品价格</th>
<th>商品数量</th>
<th>总价</th>
<th>收货地址</th>
</tr>
<tr>
<td>小米手机青春PLUS</td>
<td>${jiage}</td>
<td>${shuliang}</td>
<td>${zhongjia}</td>
<td>${dizhi}</td>
</tr>
</table>
</div>
`)
</script>
</body>
</html>二：简易ATM取款机案例
eg：
javascript
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
let key = 1
let yue = 0
while (key) {
let head = prompt(`请选择您的操作:
1.取款
2.存款
3.查看余额
4.退出`)
switch (head) {
case '取款':
{
let qukuan = +prompt('请输入您的取款金额:(元)')
if (qukuan > yue) {
alert('不是老弟,没钱你取个蛋啊!')
}
else {
yue -= qukuan
alert(`取款成功!取款金额为:${qukuan}元`)
}
break
}
case '存款':
{
let chunkuan = +prompt('请输入您的存款金额:(元)')
yue += chunkuan
alert(`恭喜业主存款成功!存款金额为:${chunkuan}元`)
break
}
case '查看余额':
{
alert(`您的卡内余额为:${yue}元,继续努力。`)
break
}
case '退出':
{
alert('即将退出,请确认!!!')
key = 0
break
}
default:
{
alert('输入信息有误,请重新输入!')
break
}
}
}
alert('已退出!')
document.write('已退出!!!')
</script>
</body>
</html>三：根据数据生成柱形图
eg：
javascript
<!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>
div {
display: inline-block;
}
.big {
width: 800px;
height: 500px;
background-color: aqua;
margin: auto;
}
#w {
width: 100px;
background-color: rgb(226, 189, 189);
/* height: 300px; */
margin: 30px;
}
</style>
</head>
<body>
<script>
let a = [4]
for (let i = 0; i < 4; i++) {
a[i] = prompt(`请输入第${i + 1}季度的数据。`)
}
document.write(`
<div class="big">
<div class="one" id="w" style="height: ${a[0]}px;">第一季度:${a[0]}</div>
<div class="two" id="w" style="height: ${a[1]}px;">第二季度:${a[1]}</div>
<div class="there" id="w" style="height: ${a[2]}px;">第三季度:${a[2]}</div>
<div class="flour" id="w" style="height: ${a[3]}px;">第四季度:${a[3]}</div>
</div>
`)
</script>
</body>
</html>效果图：
效果类似，他的样式模仿不来
四：转换时间案例
eg：
javascript
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
let a = +prompt('请输入需要转换的时间：（s）')
function w(b) {
h = parseInt(b / 60 / 60 % 24)
m = parseInt(b / 60 % 60)
s = parseInt(b % 60)
h = h < 10 ? '0' + h : h
m = m < 10 ? '0' + m : m
s = s < 10 ? '0' + s : s
return `转换完毕之后是${h}小时${m}分钟${s}秒`
}
let str = w(a)
document.write(str)
</script>
</body>
</html>五：遍历数组对象
eg：
javascript
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
//1.数据准备
let xinxi = [
{ name: '罗峰', age: 18, gender: '男', hometown: '地球' },
{ name: '萧炎', age: 21, gender: '男', hometown: '斗气大陆' },
{ name: '牧尘', age: 22, gender: '男', hometown: '大千世界' },
{ name: '张大帅', age: 20, gender: '男', hometown: '河南省' },
{ name: '徐欣', age: 17, gender: '女', hometown: '地球' }
]
//渲染页面
for (let i = 0; i < xinxi.length; i++) {
document.write(`
<table>
<tr>
<th>序号</th>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th>住址</th>
</tr>
<tr>
<td>${i + 1}</td>
<td>${xinxi[i].name}</td>
<td>${xinxi[i].age}</td>
<td>${xinxi[i].gender}</td>
<td>${xinxi[i].hometown}</td>
</tr>
</table>
`)
}
</script>
</body>
</html>效果图：
六：随机函数案例
我们将随机颜色和随机名字结合起来做一个：随机抽取数组中的一个名字并放到一个随机颜色的背景板上！
eg：
javascript
<!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>
div {
width: 300px;
height: 300px;
}
</style>
</head>
<body>
<script>
//1.封装一个可以随时随地使用的随机数函数
function getRandom(N, M) {
return Math.floor(Math.random() * (M - N + 1)) + N
}
//2.手搓一个人名数组来
let a = ['张大帅', '广智', '孙悟空', '猪八戒', '沙和尚', '唐僧', '白龙马', '白骨精', '牛魔王', '蜘蛛精',]
//3.随机抽取人名
let renming = getRandom(0, a.length - 1)
let randomName = a[renming] // 存储随机选中的人名
//4.随机抽取颜色
let aa = getRandom(0, 255)
let bb = getRandom(0, 255)
let cc = getRandom(0, 255)
let randomColor = `rgb(${aa},${bb},${cc})`
document.write(`
<div style="background-color: ${randomColor}"</div>
${randomName}
`)
</script>
</body>
</html>效果图：
