js简单综合案例之简易ATM取款机、渲染表格案例、封装时间函数

本文主要是介绍js简单综合案例之简易ATM取款机、渲染表格案例、封装时间函数，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

这里写目录标题

简易ATM取款机
- 要求
- 代码实现
渲染表格案例
- 要求
- 代码实现
封装时间函数
- 要求
- 代码实现

简易ATM取款机

要求

1.弹出弹窗，让用户输入数字选择操作
2.初始值金额为100，计算每次操作后的剩余金额变化
3.一直弹出弹窗直到用户输入4，跳出

代码实现

<!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 money=100while(true){let re = +prompt(`请您选择操作：1.存钱2.取钱3.查看余额4.直接退出`)if(re===4)breakswitch(re){case 1: let cun = +prompt('请输入存款金额')money+=cun breakcase 2:let qu =+prompt('请输入取钱金额')money-=qubreakcase 3:alert(`您的银行卡余额是${money}`)}}</script>
</body>
</html>

渲染表格案例

要求

1.设置一个可动态改变数据的好看的表格
2.让用户输入表格中的数据，并填入表格中

代码实现

<!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>h2 {text-align: center;}table {margin:0 auto;height: 80px;border-collapse:collapse;/* outline:none; */text-align: center;}th {padding:5px 30px;}table,th,td {border:1px solid #222;}</style>
</head>
<body><script>let price = +prompt('请输入价格')let num = +prompt('请输入数量')let address = prompt('请输入地址')let total = price*numdocument.write(`<h2>订单确认</h2><table><tr><th>商品名称</th><th>商品价格</th><th>商品数量</th><th>总价</th><th>收货地址</th></tr><tr><td>小米手机青春PLUS</td><td>${price}元</td><td>${num}</td><td>${total}元</td><td>${address}</td></tr></table>`)</script>
</body>
</html>

封装时间函数

要求

1.输入总秒数
2.运用函数计算总秒数转换的小时分钟秒数并输出

代码实现

<!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 second =+prompt('请输入秒数：')function getTime(t){let h=parseInt(t/60/60%24)let m=parseInt(t/60%60)let s=parseInt(t%60)h=h<10?'0'+h:hm=m<10?'0'+m:ms=s<10?'0'+s:sreturn `转换后${h}小时${m}分${s}秒`}let num=getTime(second)document.write(num)</script>
</body>
</html>