массив объектов
Вложений: 3
Добрый вечер! не выходит сделать д/з
мини банкомат с тремя пользователями ( массив объекта) суть понимаю что при правильном ведении пароля и нажатии кнопки "ок"должны попадать во второе окно где виден баланс и транзакции снятия пользователя при не верном вводе на экране появляется div error . не могу сделать логику чтобы связать действия ввода пароля и дальнейшее отображения данных пользователя <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>ATM</title> <script src="bank.js" defer></script> <script src="jquery-3.2.1.min.js"></script> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwi cKwpJf9c9IpFgh" crossorigin="anonymous"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W 1povHYgTpBfshb" crossorigin="anonymous"> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKj NkCk9SaVuEZflJ" crossorigin="anonymous"></script> <style> body{ padding: 0px; margin: 0px; display: flex; background: #808080; flex-direction: row; justify-content: center; } #screen1{ /*display: none;*/ display: flex; flex-direction: column; align-items: center; margin-top: 10px; width: 230px; height: 190px; background: #cdeb8b; border-radius: 6px; } #screen2{ display: none; flex-direction: column; /*display: flex;*/ margin-top: 10px; width: 230px; height: 190px; background: #cdeb8b; border-radius: 6px; justify-content: space-between; align-items: center; } #login_to_the_system{ margin: 0px; padding: 0px; display: flex; flex-direction: row; justify-content: space-between; background: #e0f0d6; width: 230px; height: 30px; border-top-left-radius: 6px; border-top-right-radius: 6px; text-align: center; } #buttonRes{ text-align: center; margin-bottom: 20px; border-radius: 6px; color: white; width: 60px; height: 30px; background:#3c88c9; border: 6px solid #3d8bcd; } .login{ padding-left: 12px; margin-top: 6px; color: #5dba5c; font-size: 16px; } #error{ display: none; margin-top: 20px; background: red; width: 153px; height: 40px; border-radius: 6px; color: white; text-align: center; font-size: 16px; } #one, #two, #three, #four, #five, #six, #seven, #eight, #nine, #zero, #ok, #del{ margin:6px; border-radius: 6px; color: white; width: 60px; height: 30px; background:#3c88c9; border: 6px solid #3d8bcd; } #Pass{ border-radius: 0px 6px 6px 0px; height: 30px; width: 125px; border:#f0f0f0; } #passbutton{ margin-top: 35px } .block_pin{ width: 30px; height: 30px; background: #f0f0f0; border-radius: 6px 0px 0px 6px; } .block{ display: flex; } .block>img { position: absolute; vertical-align: middle; border-style: none; margin: 5px; } .size{ padding: 0; margin: 0; font-size: 12px; } table{ margin-bottom: 7px; } .user{ display: flex; flex-direction: row; align-items: center; } .user>img{ margin: 5px; } .balans{ background: #ffffff; width: 68px; height: 20px; border-radius: 6px; color: #4283e2; text-align: center; font-size: 12px; } .sum{ background: #ffffff; width:70px; height: 40px; color: #4283e2; border: 3px solid #3d8bcd; border-radius: 6px; font-size: 12px; text-align: center; } .sum_number{ width:70px; border-radius:12px; height: 25px; margin: 3px; } .balans_text{ width:70px; height: 25px; border-radius: 6px; border: 3px solid #fff; background: #d5e8d4; margin: 3px; } .conteiner_user{ flex-direction: row; display: flex; justify-content: flex-end; align-items: center; } #X{ margin-top: -9px; margin-left: 82px; } </style> </head> <body> <div id ="container_ATM"> <!--первый экран--> <div id ="screen1"> <div id ="login_to_the_system"> <p class="login"><b>Вход в систему</b></p> <form> <button id ="buttonRes">restart</button> </form> </div> <div id ="passbutton"> <form> <div class ="block"><img src="e.png" width="20" height="20"class="showpass" /><div class ="block_pin"></div><input type="text" placeholder="pin" id = "Pass"></div> </form> <div id="error"> <b>ошибка</b></div> </div> </div> <!--второй экран--> <div id = "screen2"> <div id ="login_to_the_system"> <div id = "loginX"> <p class="login"><b>Имя фамилия</b><img src ="x.png" width="20" height="20" id = "X"></p> </div> </div> <div class = "user"><img src="bankimg.png" width=60px" height="60px"> <div class ="conteiner_user"> <div> <div class ="balans"><b>Баланс</b></div> <div class ="sum"><b>Сумма для снятия</b></div> </div> <div> <div><input type="text" class = "balans_text"></div> <div><input type="number" size="3" name="num" min="1" max="1000" value="0" class = "sum_number"></div> </div> </div> </div> <div><table border="2" width="210px" height ="40px" bgcolor = "#fff" cellpadding="10" > <tr class = "size"> <td>Сумма </td> <td>Время</td> </tr> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> </table> </div> </div> <div> <table> <tr> <td><button value ="1" id ='one'>1</button></td> <td><button value ="2" id ='two'>2</button></td> <td><button value ="3" id ='three'>3</button></td> </tr> <tr> <td><button value ="4" id ='four'>4</button></td> <td><button value ="5" id ='five'>5</button></td> <td><button value ="6" id ='six'>6</button></td> </tr> <tr> <td><button value ="7"id ='seven'>7</button></td> <td><button value ="8"id ='eight'>8</button></td> <td><button value ="9"id ='nine'>9</button></td> </tr> <tr> <td><button id ='del'>del</button></td> <td><button value ="0" id ='zero'>0</button></td> <td><button id ='ok'>ok</button></td> </tr> </table> </div> </body> </html>
$('.showpass').click(function(){
var type = $('#Pass').attr('type') == "text" ? "password" : 'text',
c = $(this).text() == "Скрыть пароль" ? "+" : "- ";
$(this).text(c);
$('#Pass').prop('type', type);
});
//кнопки 1,2,3,4,5,6,7,8,9,0,del
var Pass = document.getElementById('Pass');
var button1 = document.querySelectorAll("button")[1];
button1.addEventListener("click", function() {
Pass.value += 1;
});
var button2 = document.querySelectorAll("button")[2];
button2.addEventListener("click", function() {
Pass.value += 2;
});
var button3 = document.querySelectorAll("button")[3];
button3.addEventListener("click", function() {
Pass.value += 3;
});
var button4 = document.querySelectorAll("button")[4];
button4.addEventListener("click", function() {
Pass.value += 4;
});
var button5 = document.querySelectorAll("button")[5];
button5.addEventListener("click", function() {
Pass.value += 5;
});
var button6 = document.querySelectorAll("button")[6];
button6.addEventListener("click", function() {
Pass.value += 6;
});
var button7 = document.querySelectorAll("button")[7];
button7.addEventListener("click", function() {
Pass.value += 7;
});
var button8 = document.querySelectorAll("button")[8];
button8.addEventListener("click", function() {
Pass.value += 8;
});
var button9 = document.querySelectorAll("button")[9];
button9.addEventListener("click", function() {
Pass.value += 9;
});
var buttondel = document.querySelectorAll("button")[10];
buttondel.addEventListener("click", function() {
document.getElementById("Pass").value = "";
});
var button0 = document.querySelectorAll("button")[11];
button0.addEventListener("click", function() {
Pass.value += 0;
});
//смена экрана
var screen1 = document.getElementById('screen1')
var buttonok = document.querySelectorAll("button")[12];
buttonok.onclick = function() {
screen1.style.display="none";
screen2.style.display="flex";
};
var screen2 = document.getElementById('screen2')
var X = document.getElementById('X')
X.onclick = function() {
screen2.style.display="none";
screen1.style.display="flex";
};
//user
user1=[{ name:'marina',pass:'1111', balans:'500',
T:[{Date:"2017-11-12", Sum:250},{Date:"2017-11-13", Sum:-100}]}]
user2=[{ name:'daha',pass:'2222', balans:'800',
T:[{Date:"2017-11-14", Sum:50},{Date:"2017-11-15", Sum:-50}]}]
user3=[{ name:'saha',pass:'3333', balans:'1000',
T:[{Date:"2017-11-15", Sum:150},{Date:"2017-11-16", Sum:-150}]}]
//провера пароля
//
// if (Pass.value != 1111) {
// error.style.display = "flex"
// }
// else {
// var buttonok = document.querySelectorAll("button")[12];
// buttonok.onclick = function () {
// screen1.style.display = "none";
// screen2.style.display = "flex";
// };
// }
|
mar,
то есть разрешение на вход (проверка пароля) дает клиент и это нормально? :) |
простой пример авторизации, данные должны хранится или в БД или в файле на сервере без прямого доступа, но если это счас не важно, то просто пример
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="hello"></div>
<br> Ваш ид:
<br>
<input type="text">
<br> Пароль:
<br>
<input type="text">
<br>
<button>Войти</button>
<script>
/**
* clientData[0] - ид пользователя
* clientData[id][0] - данные пользователя
* clientData[id][1] - история
*/
var clientData =
[
[{ name: "Marina", pass: "123456", balans: "500" }, []],
[{ name: "Irina", pass: "121212", balans: "500" }, []],
[{ name: "Esmeralda", pass: "787878", balans: "1000" }, []]
]
document.querySelector('button').onclick = function () {
var inp = document.querySelectorAll('input');
if (clientData[inp[0].value][0]['pass'] == inp[1].value) {
document.getElementById('hello').innerHTML =
'Привет, ' + clientData[inp[0].value][0]['name'] +
', Ваш баланс: ' + clientData[inp[0].value][0]['balans'];
}else {
document.getElementById('hello').innerHTML = 'Ошибка авторизации !!!';
setTimeout(() => document.getElementById('hello').innerHTML = '', 3000);
}
}
</script>
</body>
</html>
|
| Часовой пояс GMT +3, время: 11:31. |