zencart 网站入侵,网络推广讲师培训,做网站的哪里好,经营性 网站备案案例示例如下所示#xff1a; 登录之后就会出现下面所示#xff1a;
项目案例流程图如下
● 首先我们建立四个账号对象#xff0c;用于登录
const account1 {owner: ItShare,movements: [200, 450, -400, 3000, -650, -130, 70, 1300],interestRate: 1.2, // %pin: 11…案例示例如下所示 登录之后就会出现下面所示
项目案例流程图如下
● 首先我们建立四个账号对象用于登录
const account1 {owner: ItShare,movements: [200, 450, -400, 3000, -650, -130, 70, 1300],interestRate: 1.2, // %pin: 1111,
};const account2 {owner: Jessica Davis,movements: [5000, 3400, -150, -790, -3210, -1000, 8500, -30],interestRate: 1.5,pin: 2222,
};const account3 {owner: Steven Thomas Williams,movements: [200, -200, 340, -300, -20, 50, 400, -460],interestRate: 0.7,pin: 3333,
};const account4 {owner: Sarah Smith,movements: [430, 1000, 700, 50, 90],interestRate: 1,pin: 4444,
};● 上述我们模拟数据都是来自与Web API再将四个账户数据存储到一个数组中
const accounts [account1, account2, account3, account4];● 其中HTML代码如下
!DOCTYPE html
html langenheadmeta charsetUTF-8 /meta nameviewport contentwidthdevice-width, initial-scale1.0 /meta http-equivX-UA-Compatible contentieedge /link relshortcut icon typeimage/png hreficon.png /linkhrefhttps://fonts.googleapis.com/css?familyPoppins:400,500,600displayswaprelstylesheet/link relstylesheet hrefstyle.css /titleBankist/title/headbody!-- TOP NAVIGATION --navp classwelcomeLog in to get started/pimg srclogo.png altLogo classlogo /form classlogininputtypetextplaceholderuserclasslogin__input login__input--user/!-- In practice, use typepassword --inputtypetextplaceholderPINmaxlength4classlogin__input login__input--pin/button classlogin__btnrarr;/button/form/navmain classapp!-- BALANCE --div classbalancedivp classbalance__labelCurrent balance/pp classbalance__dateAs of span classdate05/03/2037/span/p/divp classbalance__value0000€/p/div!-- MOVEMENTS --div classmovementsdiv classmovements__rowdiv classmovements__type movements__type--deposit2 deposit/divdiv classmovements__date3 days ago/divdiv classmovements__value4 000€/div/divdiv classmovements__rowdiv classmovements__type movements__type--withdrawal1 withdrawal/divdiv classmovements__date24/01/2037/divdiv classmovements__value-378€/div/div/div!-- SUMMARY --div classsummaryp classsummary__labelIn/pp classsummary__value summary__value--in0000€/pp classsummary__labelOut/pp classsummary__value summary__value--out0000€/pp classsummary__labelInterest/pp classsummary__value summary__value--interest0000€/pbutton classbtn--sortdownarrow; SORT/button/div!-- OPERATION: TRANSFERS --div classoperation operation--transferh2Transfer money/h2form classform form--transferinput typetext classform__input form__input--to /input typenumber classform__input form__input--amount /button classform__btn form__btn--transferrarr;/buttonlabel classform__labelTransfer to/labellabel classform__labelAmount/label/form/div!-- OPERATION: LOAN --div classoperation operation--loanh2Request loan/h2form classform form--loaninput typenumber classform__input form__input--loan-amount /button classform__btn form__btn--loanrarr;/buttonlabel classform__label form__label--loanAmount/label/form/div!-- OPERATION: CLOSE --div classoperation operation--closeh2Close account/h2form classform form--closeinput typetext classform__input form__input--user /inputtypepasswordmaxlength6classform__input form__input--pin/button classform__btn form__btn--closerarr;/buttonlabel classform__labelConfirm user/labellabel classform__labelConfirm PIN/label/form/div!-- LOGOUT TIMER --p classlogout-timerYou will be logged out in span classtimer05:00/span/p/main!-- footercopy; by Jonas Schmedtmann. Dont claim as your own :)/footer --script srcscript.js/script/body
/html● CSS代码如下 /* * Use this CSS to learn some intersting techniques,* in case youre wondering how I built the UI.* Have fun! */* {margin: 0;padding: 0;box-sizing: inherit;
}html {font-size: 62.5%;box-sizing: border-box;
}body {font-family: Poppins, sans-serif;color: #444;background-color: #f3f3f3;height: 100vh;padding: 2rem;
}nav {display: flex;justify-content: space-between;align-items: center;padding: 0 2rem;
}.welcome {font-size: 1.9rem;font-weight: 500;
}.logo {height: 5.25rem;
}.login {display: flex;
}.login__input {border: none;padding: 0.5rem 2rem;font-size: 1.6rem;font-family: inherit;text-align: center;width: 12rem;border-radius: 10rem;margin-right: 1rem;color: inherit;border: 1px solid #fff;transition: all 0.3s;
}.login__input:focus {outline: none;border: 1px solid #ccc;
}.login__input::placeholder {color: #bbb;
}.login__btn {border: none;background: none;font-size: 2.2rem;color: inherit;cursor: pointer;transition: all 0.3s;
}.login__btn:hover,
.login__btn:focus,
.btn--sort:hover,
.btn--sort:focus {outline: none;color: #777;
}/* MAIN */
.app {position: relative;max-width: 100rem;margin: 4rem auto;display: grid;grid-template-columns: 4fr 3fr;grid-template-rows: auto repeat(3, 15rem) auto;gap: 2rem;/* NOTE This creates the fade in/out anumation */opacity: 0;transition: all 1s;
}.balance {grid-column: 1 / span 2;display: flex;align-items: flex-end;justify-content: space-between;margin-bottom: 2rem;
}.balance__label {font-size: 2.2rem;font-weight: 500;margin-bottom: -0.2rem;
}.balance__date {font-size: 1.4rem;color: #888;
}.balance__value {font-size: 4.5rem;font-weight: 400;
}/* MOVEMENTS */
.movements {grid-row: 2 / span 3;background-color: #fff;border-radius: 1rem;overflow: scroll;
}.movements__row {padding: 2.25rem 4rem;display: flex;align-items: center;border-bottom: 1px solid #eee;
}.movements__type {font-size: 1.1rem;text-transform: uppercase;font-weight: 500;color: #fff;padding: 0.1rem 1rem;border-radius: 10rem;margin-right: 2rem;
}.movements__date {font-size: 1.1rem;text-transform: uppercase;font-weight: 500;color: #666;
}.movements__type--deposit {background-image: linear-gradient(to top left, #39b385, #9be15d);
}.movements__type--withdrawal {background-image: linear-gradient(to top left, #e52a5a, #ff585f);
}.movements__value {font-size: 1.7rem;margin-left: auto;
}/* SUMMARY */
.summary {grid-row: 5 / 6;display: flex;align-items: baseline;padding: 0 0.3rem;margin-top: 1rem;
}.summary__label {font-size: 1.2rem;font-weight: 500;text-transform: uppercase;margin-right: 0.8rem;
}.summary__value {font-size: 2.2rem;margin-right: 2.5rem;
}.summary__value--in,
.summary__value--interest {color: #66c873;
}.summary__value--out {color: #f5465d;
}.btn--sort {margin-left: auto;border: none;background: none;font-size: 1.3rem;font-weight: 500;cursor: pointer;
}/* OPERATIONS */
.operation {border-radius: 1rem;padding: 3rem 4rem;color: #333;
}.operation--transfer {background-image: linear-gradient(to top left, #ffb003, #ffcb03);
}.operation--loan {background-image: linear-gradient(to top left, #39b385, #9be15d);
}.operation--close {background-image: linear-gradient(to top left, #e52a5a, #ff585f);
}h2 {margin-bottom: 1.5rem;font-size: 1.7rem;font-weight: 600;color: #333;
}.form {display: grid;grid-template-columns: 2.5fr 2.5fr 1fr;grid-template-rows: auto auto;gap: 0.4rem 1rem;
}/* Exceptions for interst */
.form.form--loan {grid-template-columns: 2.5fr 1fr 2.5fr;
}
.form__label--loan {grid-row: 2;
}
/* End exceptions */.form__input {width: 100%;border: none;background-color: rgba(255, 255, 255, 0.4);font-family: inherit;font-size: 1.5rem;text-align: center;color: #333;padding: 0.3rem 1rem;border-radius: 0.7rem;transition: all 0.3s;
}.form__input:focus {outline: none;background-color: rgba(255, 255, 255, 0.6);
}.form__label {font-size: 1.3rem;text-align: center;
}.form__btn {border: none;border-radius: 0.7rem;font-size: 1.8rem;background-color: #fff;cursor: pointer;transition: all 0.3s;
}.form__btn:focus {outline: none;background-color: rgba(255, 255, 255, 0.8);
}.logout-timer {padding: 0 0.3rem;margin-top: 1.9rem;text-align: right;font-size: 1.25rem;
}.timer {font-weight: 600;
}● 在此之前我们要将我们所有需要的元素存储到变量中方便我们后续使用
const labelWelcome document.querySelector(.welcome);
const labelDate document.querySelector(.date);
const labelBalance document.querySelector(.balance__value);
const labelSumIn document.querySelector(.summary__value--in);
const labelSumOut document.querySelector(.summary__value--out);
const labelSumInterest document.querySelector(.summary__value--interest);
const labelTimer document.querySelector(.timer);const containerApp document.querySelector(.app);
const containerMovements document.querySelector(.movements);const btnLogin document.querySelector(.login__btn);
const btnTransfer document.querySelector(.form__btn--transfer);
const btnLoan document.querySelector(.form__btn--loan);
const btnClose document.querySelector(.form__btn--close);
const btnSort document.querySelector(.btn--sort);const inputLoginUsername document.querySelector(.login__input--user);
const inputLoginPin document.querySelector(.login__input--pin);
const inputTransferTo document.querySelector(.form__input--to);
const inputTransferAmount document.querySelector(.form__input--amount);
const inputLoanAmount document.querySelector(.form__input--loan-amount);
const inputCloseUsername document.querySelector(.form__input--user);
const inputClosePin document.querySelector(.form__input--pin);
