массив объектов
Вложений: 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, время: 20:10. |