js实现ATM机存取款功能


Posted in Javascript onOctober 27, 2020

js是一个功能十分强大的脚本语言,通过js能实现很多有意思的demo!而要实现那些功能炫酷、特效美观的东西DOM操作是必不可少且尤为重要的!这个ATM机存取款的案例,就用到js中一些简单的DOM操作来实现其功能。

ATM机案例功能需求:

1.用户最多只能有三次输入卡号和密码的机会,如果超过三次,则提示卡号已被锁定
2.用户取款的金额不能大于卡上的账户余额
3.存取功能完成后,要更新相应的余额信息 

登录界面代码:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>ATM</title>
 <script src="ATM.js"></script>
 <style>
 div{
 width: 300px;
 height: 200px;
 margin: 0 auto;
 border:1px solid black;
 border-radius: 5px;
 text-align: center;
 }
 p {
 font-size: 20px;
 }
 button {
 border: 0px;
 padding: 5px;
 background-color: green;
 color: white;
 }
 </style>
</head>
<body>
 <div>
 <p>ATM机</p>
 <p><label>卡号:</label><input type="text" id="account"></p>
 <p><label>密码:</label><input type="password" id="password"></p>
 <p><button onclick="login()">登录</button></p>
 </div>
</body>
</html>

主页界面代码:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>ATM</title>
 <script src="ATM.js"></script>
 <style>
 div{
 width: 300px;
 height: 200px;
 margin: 0 auto;
 border:1px solid black;
 border-radius: 5px;
 text-align: center;
 }
 p {
 font-size: 20px;
 }
 button {
 border: 0px;
 padding: 5px;
 background-color: green;
 color: white;
 }
 </style>
</head>
<body>
 <div>
 <p>ATM机</p>
 <p><label>余额:</label><input type="text" id="balance" value="2000.00" disabled></p>
 <p><label>存款:</label><input type="text" id="deposit"> <button onclick="deposit()">存款</button></p>
 <p><label>取款:</label><input type="text" id="withdraw"> <button onclick="withdraw()">取款</button></p>
 
 </div>
</body>
</html>

js代码:

var i = 2; //定义密码输错的次数

//判断输入的卡号是不是数字类型
//返回true,证明不是数字;返回false,证明是数字

 function checkNumber(account){
 var pattern=/^[0-9]*[1-9][0-9]*$/;
 return pattern.test(account);
 // return isNaN(account);
 }

//判断输入的卡号和密码是否为空
 function checkNull(account,password){
 if(account.length>0 && password.length>0){
 return true;
 }
 return false;
 }

//登录事件
 function login(){
 var account=document.getElementById("account").value;
 var password=document.getElementById("password").value;

 if(!checkNull(account,password)){
 alert("卡号和密码不能为空!");
 return; //终止登录方法,下面的代码不会执行
 }
 if(!checkNumber(account)){
 alert("卡号必须为数字!");
 return;
 }
 if(i>0 && account=="123456789" && password=="123"){
 window.location.href="index.html" rel="external nofollow" ;
 }else{
 if(i == 0){
 alert("当前卡号被锁定!");
 return;
 }
 alert("你还剩下"+i+"次输入卡号和密码的机会");
 i--;
 return;
 }
 }

//存款
 function deposit(){
 var balance = parseFloat(document.getElementById("balance").value); //获取余额,并将其转换为数字
 var deposit = document.getElementById("deposit").value;

 if(!deposit.length>0){
 alert("请输入您要存款的金额");
 return;
 }
 if(checkNumber(deposit)){
 alert("请输入数字");
 return;
 }

 balance+=parseFloat(deposit);
 document.getElementById("balance").value=balance; //修改存款完成以后显示的余额

 }

 //取款
 function withdraw(){
 var balance = parseFloat(document.getElementById("balance").value); //获取余额,并将其转换为数字
 var withdraw = document.getElementById("withdraw").value;

 if(!withdraw.length>0){
 alert("请输入您要取款的金额");
 return;
 }
 if(checkNumber(withdraw)){
 alert("请输入数字");
 return;
 }

 //判断取款是否大于余额
 if(parseFloat(withdraw)>balance){
 alert("余额不足!");
 }

 balance-=parseFloat(withdraw);
 document.getElementById("balance").value=balance;
 }

运行效果:

js实现ATM机存取款功能
js实现ATM机存取款功能
js实现ATM机存取款功能
js实现ATM机存取款功能

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS获取整个页面文档的实现代码
Dec 15 Javascript
为JavaScript类型增加方法的实现代码(增加功能)
Dec 29 Javascript
一个可拖拽列宽表格实例演示
Nov 26 Javascript
jquery中prop()方法和attr()方法的区别浅析
Sep 06 Javascript
Mac/Windows下如何安装Node.js
Nov 22 Javascript
JS实现跟随鼠标的链接文字提示框效果
Aug 06 Javascript
轻松实现jQuery添加删除按钮Click事件
Mar 13 Javascript
基于JavaScript实现带数据验证和复选框的表单提交
Aug 23 Javascript
JS获取一个表单字段中多条数据并转化为json格式
Oct 17 Javascript
vue+vue-validator 表单验证功能的实现代码
Nov 13 Javascript
送你43道JS面试题(收藏)
Jun 17 Javascript
jQuery实现文本显示一段时间后隐藏的方法分析
Jun 20 jQuery
详解基于electron制作一个node压缩图片的桌面应用
Jan 29 #Javascript
JS实现鼠标拖拽盒子移动及右键点击盒子消失效果示例
Jan 29 #Javascript
JS实现盒子跟着鼠标移动及键盘方向键控制盒子移动效果示例
Jan 29 #Javascript
JS实现的类似微信聊天效果示例
Jan 29 #Javascript
vue实现form表单与table表格的数据关联功能示例
Jan 29 #Javascript
vue input实现点击按钮文字增删功能示例
Jan 29 #Javascript
详解基于webpack&amp;gettext的前端多语言方案
Jan 29 #Javascript
You might like
PHP similar_text 字符串的相似性比较函数
2010/05/26 PHP
php语言流程控制中的主动与被动
2012/11/05 PHP
编写php应用程序实现摘要式身份验证的方法详解
2013/06/08 PHP
php检测用户是否用手机(Mobile)访问网站的类
2014/01/09 PHP
thinkphp实现图片上传功能分享
2014/03/04 PHP
PHP大神的十大优良习惯
2016/09/14 PHP
Yii实现文章列表置顶功能示例
2016/10/18 PHP
取得传值的函数
2006/10/27 Javascript
javascript设置金额样式转换保留两位小数示例代码
2013/12/04 Javascript
高性能JavaScript模板引擎实现原理详解
2015/02/05 Javascript
基于JavaScript实现一定时间后去执行一个函数
2015/12/14 Javascript
Highcharts使用简例及异步动态读取数据
2015/12/30 Javascript
微信小程序-详解数据缓存
2016/11/24 Javascript
jQuery实现的浮动层div浏览器居中显示效果
2017/02/03 Javascript
Vue组件tree实现树形菜单
2017/04/13 Javascript
vuejs使用递归组件实现树形目录的方法
2017/09/30 Javascript
最新Javascript程序员面试试题和解题方法
2017/11/23 Javascript
原生JS forEach()和map()遍历的区别、兼容写法及jQuery $.each、$.map遍历操作
2019/02/27 jQuery
JS获取当前时间戳方法解析
2020/08/29 Javascript
Vue中使用Echarts仪表盘展示实时数据的实现
2020/11/01 Javascript
vant 中van-list的用法说明
2020/11/11 Javascript
[11:44]Ti9 OG夺冠时刻
2019/08/25 DOTA
Python操作使用MySQL数据库的实例代码
2017/05/25 Python
python3+PyQt5 创建多线程网络应用-TCP客户端和TCP服务器实例
2019/06/17 Python
pyqt5使用按钮进行界面的跳转方法
2019/06/19 Python
解决python彩色螺旋线绘制引发的问题
2019/11/23 Python
python3.6.5基于kerberos认证的hive和hdfs连接调用方式
2020/06/06 Python
使用Filters滤镜弥补CSS3的跨浏览器问题以及兼容低版本IE
2013/01/23 HTML / CSS
Three Graces London官网:英国奢侈品牌
2021/03/18 全球购物
餐饮部总监岗位职责范文
2014/02/13 职场文书
《故都的秋》教学反思
2014/04/15 职场文书
国际经济与贸易专业求职信
2014/07/10 职场文书
六五普法宣传标语
2014/10/06 职场文书
离婚协议书范本及离婚须知
2014/10/15 职场文书
医生行业员工的辞职信
2019/06/24 职场文书
8g内存用python读取10文件_面试题-python 如何读取一个大于 10G 的txt文件?
2021/05/28 Python