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 相关文章推荐
encode脚本和normal脚本混用的问题与解决方法
Mar 08 Javascript
jQuery DIV弹出效果实现代码
Jul 03 Javascript
javascript 导出数据到Excel(处理table中的元素)
Dec 18 Javascript
jquery.lazyload  实现图片延迟加载jquery插件
Feb 06 Javascript
两个listbox实现选项的添加删除和搜索
Mar 01 Javascript
document.execCommand()的用法小结
Jan 08 Javascript
JavaScript代码性能优化总结(推荐)
May 16 Javascript
Angular4学习教程之HTML属性绑定的方法
Jan 04 Javascript
js实现鼠标单击Tab表单切换效果
May 16 Javascript
从0到1搭建Element的后台框架的方法步骤
Apr 10 Javascript
简单了解Ajax表单序列化的实现方法
Jun 14 Javascript
一些可能会用到的Node.js面试题
Jun 15 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 mkdir()定义和用法
2009/01/14 PHP
使用PHP求两个文件的相对路径
2013/06/20 PHP
PHP导入导出Excel代码
2015/07/07 PHP
PHP+Mysql基于事务处理实现转账功能的方法
2015/07/08 PHP
PHP仿微信多图片预览上传实例代码
2016/09/13 PHP
php使用file函数、fseek函数读取大文件效率对比分析
2016/11/04 PHP
Zend Framework入门教程之Zend_Mail用法示例
2016/12/08 PHP
详解PHP安装mysql.so扩展的方法
2016/12/31 PHP
Laravel中七个非常有用但很少人知道的Carbon方法
2017/09/21 PHP
JavaScript数据类型学习笔记
2016/01/25 Javascript
JavaScript简单验证表单空值及邮箱格式的方法
2017/01/20 Javascript
Vue的路由动态重定向和导航守卫实例
2018/03/17 Javascript
通过实例讲解JS如何防抖动
2019/06/15 Javascript
深入浅出vue图片路径的实现
2019/09/04 Javascript
Vue移动端项目实现使用手机预览调试操作
2020/07/18 Javascript
在vue中使用Echarts利用watch做动态数据渲染操作
2020/07/20 Javascript
js用正则表达式筛选年月日的实例方法
2021/01/04 Javascript
Python学习小技巧之列表项的排序
2017/05/20 Python
快速解决pyqt5窗体关闭后子线程不同时退出的问题
2019/06/19 Python
在Python中预先初始化列表内容和长度的实现
2019/11/28 Python
pytorch 修改预训练model实例
2020/01/18 Python
PyQT5 实现快捷键复制表格数据的方法示例
2020/06/19 Python
Python 创建守护进程的示例
2020/09/29 Python
python中把元组转换为namedtuple方法
2020/12/09 Python
IGK Hair官网:喷雾、洗发水、护发素等
2020/11/03 全球购物
PHP如何删除一个Cookie值
2012/11/15 面试题
Python如何实现单例模式
2016/06/03 面试题
内部类的定义、种类以及优点
2013/10/16 面试题
DELPHI面试题研发笔试试卷
2015/11/08 面试题
大学生毕业求职简历的自我评价
2013/10/24 职场文书
大学生活动策划方案
2014/02/10 职场文书
保安队长职务说明书
2014/02/23 职场文书
共产党员承诺书
2014/03/25 职场文书
公司演讲稿开场白
2014/08/25 职场文书
Python之基础函数案例详解
2021/08/30 Python
MySQL中LAG()函数和LEAD()函数的使用
2022/08/14 MySQL