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

　　介绍

这篇文章将为大家详细讲解有关js如何实现ATM机存取款功能,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。

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

ATM机案例功能需求:

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

登录界面代码:

& lt; ! DOCTYPE  html> 　　& lt; html  lang=癳n"祝辞 　　& lt; head> 　　,& lt; meta  charset=癠TF-8"比; 　　,& lt; title> ATM 　　,& lt; https://www.yisu.com/zixun/script  src=" ATM.js "> 　　<时尚> 　　div { 　　宽度:300 px; 　　身高:200 px; 　　保证金:0汽车; 　　边界:1 px固体黑色; 　　border - radius: 5 px; 　　text-align:中心; 　　} 　　p { 　　字体大小:20 px; 　　} 　　按钮{ 　　边界:0 px; 　　填充:5 px; 　　背景颜色:绿色; 　　颜色:白色; 　　}> 头 　　<身体> 　　
　　ATM机

　　

<标记>卡号:

　　

<标记>密码:

　　

<按钮onclick="登录()">登录

　　
　　 　　

主页界面代码:

& lt; ! DOCTYPE  html> 　　& lt; html  lang=癳n"祝辞 　　& lt; head> 　　,& lt; meta  charset=癠TF-8"比; 　　,& lt; title> ATM 　　,& lt; https://www.yisu.com/zixun/script  src=" ATM.js "> 　　<时尚> 　　div { 　　宽度:300 px; 　　身高:200 px; 　　保证金:0汽车; 　　边界:1 px固体黑色; 　　border - radius: 5 px; 　　text-align:中心; 　　} 　　p { 　　字体大小:20 px; 　　} 　　按钮{ 　　边界:0 px; 　　填充:5 px; 　　背景颜色:绿色; 　　颜色:白色; 　　}> 头 　　<身体> 　　
　　ATM机

　　

<标记>余额:

　　

<标记>存款: <按钮onclick="存款()">存款

　　

<标记>取款: <按钮onclick="撤回()">取款

　　 　　
　　 　　

js代码:

var 小姐:=,2,,//定义密码输错的次数//判断输入的卡号是不是数字类型//返回真,证明不是数字;返回假,证明是数字 　　 　　,function  checkNumber(账户){ 　　,var 模式=/^ [0 - 9]* [1 - 9][0 - 9]* $/; 　　,return  pattern.test(账户); 　　,//return  isNaN(账户); 　　,}//判断输入的卡号和密码是否为空 　　,function  checkNull(帐户、密码){ 　　,如果(account.length> 0,,,, password.length> 0) { 　　,return 真实; 　　,} 　　,return 假; 　　,}//登录事件 　　,function 登录(){ 　　,var 帐户=. getelementbyid (“account") value; 　　,var 密码=. getelementbyid (“password") value; 　　 　　,如果(! checkNull(帐户、密码)){ 　　,警报(“卡号和密码不能为空!“); 　　,返回;//终止登录方法、下面的代码不会执行 　　,} 　　,如果(! checkNumber(账户)){ 　　,警报(“卡号必须为数字!“); 　　,返回; 　　,} 　　,如果(i> 0,,,,账户==?23456789“,,,,密码==?23“){ 　　,window.location.href=https://www.yisu.com/zixun/index . html”rel=巴獠縩ofollow”; 　　其他}{ 　　如果(i==0) { 　　alert("当前卡号被锁定!”); 　　返回; 　　} 　　alert("你还剩下“我+ +”次输入卡号和密码的机会”); 　　我,; 　　返回; 　　} 　　}//存款 　　函数存款(){ 　　var=parseFloat平衡(. getelementbyid(“平衡”)value);//获取余额,并将其转换为数字 　　var存款=. getelementbyid(“存款”)value; 　　 　　如果(! deposit.length> 0) { 　　警报(“请输入您要存款的金额”); 　　返回; 　　} 　　如果(checkNumber(存款)){ 　　警报(“请输入数字”); 　　返回; 　　} 　　 　　平衡+=parseFloat(存款); 　　. getelementbyid(“平衡”)value=平衡;//修改存款完成以后显示的余额 　　 　　}//取款 　　函数取(){ 　　var=parseFloat平衡(. getelementbyid(“平衡”)value);//获取余额,并将其转换为数字 　　var撤回=. getelementbyid(“撤回”)value; 　　 　　如果(! withdraw.length> 0) { 　　警报(“请输入您要取款的金额”); 　　返回; 　　} 　　如果(checkNumber(撤销)){ 　　警报(“请输入数字”); 　　返回; 　　}//判断取款是否大于余额 　　如果(parseFloat(撤销)>平衡){ 　　alert("余额不足!”); 　　} 　　 　　平衡-=parseFloat(退出); 　　. getelementbyid(“平衡”)value=平衡; 　　}

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