Kosten |
Воскресенье, 24 Января 2021, 23:15 | Сообщение 1 |
|
Сейчас не редко можно встреть калькулятор, ведь очень много тематических сайтов, где он просто необходим в онлайн режиме. И здесь вашему вниманию стильный калькулятор с функцией нажатия клавиши, который идет в темном дизайне. Отличным решением его поставить на услуги или интернет магазине, где для пользователя или гостей сайта будет предоставлен калькулятор с понятной панелью.
Где не спеша можно подсчитать все что вы выставили в табло под значение, как прибавить или отнять, все необходимые функции на нем закреплены, но и по своему стилю выглядит великолепно.
Так выглядит после установочного процесса:
HTML
Код <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Calculator</title> </head> <body> <div id="calculator" class="calculator"> <div id="display" class="display"></div> </div> </body> </html>
CSS
Код html, body {
width: 100vw;
height: 100vh;
margin: 0;
padding: 0;
background: #212126;
color: #ddd;
display: flex;
justify-content: center;
align-items: center;
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
font-size: 1.2em;
cursor: default;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
p, h1, h2, h3, h4, h5, h6 {
margin: 0;
font-weight: normal;
}
.calculator {
padding: 0.5em;
background: #161621;
border-radius: 6px;
box-shadow: 0 0 1em rgba(0, 0, 0, 0.4);
}
.calculator > * {
width: 2em;
height: 2em;
margin: 0 0.25em;
background: #212121;
border-radius: 3px;
display: inline-block;
text-align: center;
vertical-align: center;
line-height: 2em;
}
.calculator .button {
margin-bottom: 0.5em;
cursor: pointer;
transition: box-shadow 0.3s;
}
.calculator .button[text="on"] {
background: #00c853;
}
.calculator .button[text="off"] {
background: #f44336;
}
.calculator .button::before {
content: attr(text);
}
.calculator .button:hover {
box-shadow: 0 0.1em 0.5em rgba(0, 0, 0, 0.4);
}
.calculator .button:active {
box-shadow: 0 0.1em 0.4em rgba(0, 0, 0, 0.5) inset;
}
.calculator .display {
width: initial;
margin: 0.5em 0.25em 1em;
padding: 0 0.5em;
background: #262631;
display: block;
text-align: right;
font-family: monospace;
font-size: 1.2em;
box-shadow: 0 0.1em 0.2em rgba(0, 0, 0, 0.4) inset;
transition: background 0.2s, color 0.2s;
}
.calculator .display.off {
background: #212121;
color: transparent;
}
JS
Код const body = document.getElementById("calculator");
const display = document.getElementById("display");
class Button {
constructor(text, callback) {
if (!callback) {
callback = () => {
if (display.innerText == "ERROR")
display.innerText = "";
display.innerText += text;
}
}
this.element = document.createElement("div");
this.element.classList.add("button");
this.element.setAttribute("text", text);
this.element.addEventListener("click", callback);
}
create() {
body.appendChild(this.element);
}
}
function calculate() {
let result = "";
try {
if (display.innerText.length > 0)
result = eval(display.innerText);
} catch {
result = "ERROR";
}
display.innerText = result;
}
function backspace() {
if (display.innerText.length > 0) {
display.innerText =
display.innerText.substring(0, display.innerText.length - 1);
}
}
function power(action) {
if (action) {
display.innerText = ""
display.classList.remove("off");
} else {
setTimeout(() => display.innerText = "", 200);
display.classList.add("off");
}
}
[
new Button("=", calculate),
new Button("←", backspace),
new Button("on", () => power(true)),
new Button("off", () => power(false)),
new Button(7), new Button(8), new Button(9), new Button("*"),
new Button(4), new Button(5), new Button(6), new Button("/"),
new Button(1), new Button(2), new Button(3), new Button("-"),
new Button(0), new Button("("), new Button(")"), new Button("+"),
].forEach((button, i) => {
button.create();
if ((i + 1) % 4 == 0)
body.appendChild(document.createElement("br"));
});
Как можно заметить, что код изначально выстроен под страницу для сайта.
Демонстрация
|
| [ RU ] |
|
|
