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 对输入框进行限制(常用的都有)
Jul 30 Javascript
jquery定时滑出可最小化的底部提示层特效代码
Oct 02 Javascript
使用原生js实现页面蒙灰(mask)效果示例代码
Jun 20 Javascript
js获取iframe中的window对象的实现方法
May 20 Javascript
移动端翻页插件dropload.js(支持Zepto和jQuery)
Jul 27 Javascript
Seajs是什么及sea.js 由来,特点以及优势
Oct 13 Javascript
重新理解JavaScript的六种继承方式
Mar 24 Javascript
node.js操作MongoDB的实例详解
Oct 11 Javascript
vue组件中iview的modal组件爬坑问题之modal的显示与否应该是使用v-show
Apr 12 Javascript
关于ckeditor在bootstrap中modal中弹框无法输入的解决方法
Sep 11 Javascript
JS实现随机抽选获奖者
Nov 07 Javascript
一看就会的vuex实现登录验证(附案例)
Jan 09 Javascript
详解基于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处理大量表单字段的便捷方法
2015/02/07 PHP
Ubuntu VPS中wordpress网站打开时提示”建立数据库连接错误”的解决办法
2016/11/03 PHP
PHP实现对数字分隔加千分号的方法
2019/03/18 PHP
JS类库Bindows1.3中的内存释放方式分析
2007/03/08 Javascript
jquery1.4后 jqDrag 拖动 不可用
2010/02/06 Javascript
flexigrid 类似ext grid的JS表格代码
2010/07/17 Javascript
js操作checkbox遇到的问题解决
2013/06/29 Javascript
js单例模式详解实例
2013/11/21 Javascript
JavaScript实现简单图片滚动附源码下载
2014/06/17 Javascript
jQuery在ul中显示某个li索引号的方法
2015/03/17 Javascript
浅谈使用MVC模式进行JavaScript程序开发
2015/11/10 Javascript
使用EVAL处理jqchart jquery 折线图返回数据无效的解决办法
2015/11/26 Javascript
JavaScript中定义类的方式详解
2016/01/07 Javascript
酷炫jQuery全屏3D焦点图动画效果
2016/03/22 Javascript
详解vue express启动数据服务
2017/07/05 Javascript
关于JavaScript语句后面的分号问题
2017/12/07 Javascript
vuejs 制作背景淡入淡出切换动画的实例
2018/09/01 Javascript
js canvas实现画图、滤镜效果
2018/11/27 Javascript
node.js express框架简介与实现
2019/07/23 Javascript
Vue3 响应式侦听与计算的实现
2020/11/11 Javascript
Vue 实现可视化拖拽页面编辑器
2021/02/01 Vue.js
python操作excel文件并输出txt文件的实例
2018/07/10 Python
Django进阶之CSRF的解决
2018/08/01 Python
Python求两个圆的交点坐标或三个圆的交点坐标方法
2018/11/07 Python
Matplotlib中文乱码的3种解决方案
2018/11/15 Python
python使用suds调用webservice接口的方法
2019/01/03 Python
简单了解python中的与或非运算
2019/09/18 Python
python 操作mysql数据中fetchone()和fetchall()方式
2020/05/15 Python
阿玛尼美妆加拿大官方商城:Giorgio Armani Beauty加拿大
2017/10/24 全球购物
Tirendo比利时:在线购买轮胎
2018/10/22 全球购物
英国最大的笔记本电脑直销专家:Laptops Direct
2019/07/20 全球购物
struct与class的区别
2014/02/03 面试题
实习护士自荐信
2014/06/21 职场文书
大学生预备党员自我评价
2015/03/04 职场文书
学雷锋感言
2015/08/03 职场文书
只需要100行Python代码就可以实现的贪吃蛇小游戏
2021/05/27 Python