简单的ATM实现
2018年10月28日
本文是博主帮助同学做的大作业，现学现做的，部分借鉴了其他博主的思路代码。
<!DOCTYPE html> /*ATM2.html*/
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style type="text/css">
div{
width: 300px;
height:200px;
margin: 0 auto;
border: 1px solid black;
border-radius: 5px;
text-align: center;
}
p{
font-size: 20px;
}
input{
width: 150px;
height:20px;
}
button{
border: 0px;
padding: 5px;
background-color: green;
color: white;
}
</style>
<body>
<div>
<p>ATM机</p>
<p><label>账号：</label><input type="text" id="account"></p>
<p><label>密码：</label><input type="password" id="passwordatm"></p>
<p><button onclick="login()">登录</button> <button onclick="shut()">取消</button></p>
</div>
</body>
</html>
<script>
function setCookie(account,passwordatm){
document.cookie=account+"="+passwordatm+";";
}
function getCookie(account) {
name = account+"=";
var ca = document.cookie.split(';');
for(var i=0; i<ca.length; i++) {
var c = ca[i].trim();
if (c.indexOf(name)==0) { return c.substring(name.length,c.length); }
}
return "";
}
function shut(){
window.location.href="ATM2.html";
}
var i=2;//输入的次数
//判断卡号是否位数字
function isNaNAccount(account){
return isNaN(account);
}
//判断输入的卡号和密码是否为空
function isNaNAccountAndPwd(account,passwordatm){
if((account.length>0)&&(passwordatm.length>0)){
return true;
}
return false;
}
//登录事件
function login(){
var account = document.getElementById("account").value;
var passwordatm = document.getElementById("passwordatm").value;
console.log(typeof account);
console.log(passwordatm);
if(isNaNAccount(account)){
alert("卡号必须是数字");
return;
}
if(!(isNaNAccountAndPwd(account,passwordatm))){
alert("卡号和密码都不能为空");
return;
}
if(getCookie(account)==""){
setCookie(account,passwordatm);
}
if((i>0)&&getCookie(account)==passwordatm){
window.location.href="ATM3.html";
}else{
if(i==0){
alert("你的账号已被锁定！");
return;
}
alert("你还剩"+i+"次机会！");
i--;
return ;
}
}
</script>
<!DOCTYPE html> /*ATM3.html*/
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style type="text/css">
div{
width: 300px;
height:200px;
margin: 0 auto;
border: 1px solid black;
border-radius: 5px;
text-align: center;
}
p{
font-size: 20px;
text-align: left;
}
input{
width: 150px;
height:20px;
}
button{
border: 0px;
padding: 5px;
background-color: green;
color: white;
}
</style>
<body>
<div>
<p><label>余额：</label><input type="text" id="balance" value=0 disabled="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>
<p ><label></label> <button onclick="shut()">取消</button></p>
</div>
</body>
</html>
<script>
function shut(){
window.location.href="ATM2.html";
}
//输入的是否为数字
function isNumber(number){
return isNaN(number);
}
//存款操作
function checkCookie(){
var user=getCookie("username");
if(user!=""){
document.getElementById("balance").value = parseFloat(user);
}else{
setCookie("username","0");
document.getElementById("balance").value = 0;
}
}
function setCookie(cname,cvalue){
document.cookie=cname+"="+cvalue+";";
}
function getCookie(cname){
var name = cname+"=";
var ca =document.cookie.split(';');
for(var i=0;i<ca.length;i++){
var c = ca[i].trim();
if(c.indexOf(name)==0){
return c.substring(name.length,c.length);
}
}
return "";
}
function deposit(){
var balance = parseFloat(document.getElementById("balance").value);
var deposit = document.getElementById("deposit").value;
if(!deposit.length>0){
alert("请输入你要存款的金额..");
return;
}
if(isNumber(deposit)){
alert("请输入数字！");
return;
}
balance += parseFloat(deposit);
document.getElementById("balance").value = balance;
setCookie("username",balance.toString());
}
//取款操作
function withDraw(){
var balance = parseFloat(document.getElementById("balance").value);
console.log(typeof balance);
var withdraw =document.getElementById("withdraw").value;
if(!withdraw.length>0){
alert("请输入你要取款的金额..");
return;
}
if(isNumber(withdraw)){
alert("请输入数字！");
return;
}
if(parseFloat(withdraw) >balance){
alert("余额不足请重新输入！");
return;
}
balance -=withdraw;
document.getElementById("balance").value = balance;
setCookie("username",balance.toString());
}
setTimeout("checkCookie()",10);
</script>