Добавить в корзинуПозвонить
Найти в Дзене
Мухамат Газизов
3 подписчика

Простой калькулятор на JavaScript

1
3 мин
Очень простой код Javascript . В интернете калькуляторов очень много , найти нужный не проблема . Здесь даются коды для изучающих html , css, javascript , желающих лучше понимать как всё работает. Работу калькулятора можно посмотреть здесь . <!DOCTYPE html> <html lang="ru" > <head> <meta charset="UTF-8"> <title>Простой калькулятор</title> <style> body { background: url(https://avatars.mds.yandex.net/i?id=97555913c0b0f7803114aeb1580db6b17a5539bb-9217732-images-thumbs&n=13); background-color: ; font-family: Tahoma; background-size: cover; } .container { display: flex; align-items: center; justify-content: center; height: 100vh; width: 100vw; } #container { width: 200px; padding: 8px 8px 20px 8px; margin: 20px auto; background-color: #ABABAB; border-radius: 4px; border-top: 2px solid #FFF; border-right: 2px solid #FFF; border-bottom: 2px solid #C1C1C1; border-left: 2px solid #C1C1C1; box-shadow: -3px 3px 7px rgba(0, 0, 0, .6), inset -100px 0px 100px rgba(255, 255, 255, .5); } #display {/

Очень простой код Javascript . В интернете калькуляторов очень много , найти нужный не проблема . Здесь даются коды для изучающих html , css, javascript , желающих лучше понимать как всё работает.

Работу калькулятора можно посмотреть здесь .

<!DOCTYPE html>

<html lang="ru" >

<head>

<meta charset="UTF-8">

<title>Простой калькулятор</title>

<style>

body {

background: url(https://avatars.mds.yandex.net/i?id=97555913c0b0f7803114aeb1580db6b17a5539bb-9217732-images-thumbs&n=13);

background-color: ;

font-family: Tahoma;

background-size: cover;

}

.container {

display: flex;

align-items: center;

justify-content: center;

height: 100vh;

width: 100vw;

}

#container {

width: 200px;

padding: 8px 8px 20px 8px;

margin: 20px auto;

background-color: #ABABAB;

border-radius: 4px;

border-top: 2px solid #FFF;

border-right: 2px solid #FFF;

border-bottom: 2px solid #C1C1C1;

border-left: 2px solid #C1C1C1;

box-shadow: -3px 3px 7px rgba(0, 0, 0, .6), inset -100px 0px 100px rgba(255, 255, 255, .5);

}

#display {/

display: block;

margin: 15px auto;

height: 42px;

width: 174px;

padding: 0 10px;

border-radius: 4px;

border-top: 2px solid #211c1c;

border-right: 2px solid #211c1c;

border-bottom: 2px solid #040303;

border-left: 2px solid #040303;

background-color: #81979a;

box-shadow: inset 0px 0px 10px #030303, inset 0px -20px 1px rgba(75, 75, 75, 0.2);

font-size: 28px;

color: #000000;

text-align: right;

font-weight: 400;

}

.button {

display: inline-block;

margin: 2px;

width: 42px;

height: 42px;

font-size: 16px;

font-weight: bold;

border-radius: 4px;

}

.mathButtons {

margin: 2px 2px 6px 2px;

color: #FFF;

text-shadow: -1px -1px 0px #44006F;

background-color: #434343;

border-top: 2px solid #C1C1C1;

border-right: 2px solid #C1C1C1;

border-bottom: 2px solid #181818;

border-left: 2px solid #181818;

box-shadow: 0px 0px 2px #030303, inset 0px -20px 1px #2E2E2E;

}

.digits {

color: #181818;

text-shadow: 1px 1px 0px #FFF;

background-color: #EBEBEB;

border-top: 2px solid #FFF;

border-right: 2px solid #FFF;

border-bottom: 2px solid #C1C1C1;

border-left: 2px solid #C1C1C1;

border-radius: 4px;

box-shadow: 0px 0px 2px #030303, inset 0px -20px 1px #DCDCDC;

}

#clearButton {

color: #FFF;

text-shadow: -1px -1px 0px #44006F;

background-color: #D20000;

border-top: 2px solid #FF8484;

border-right: 2px solid #FF8484;

border-bottom: 2px solid #800000;

border-left: 2px solid #800000;

box-shadow: 0px 0px 2px #030303, inset 0px -20px 1px #B00000;

}

.digits:hover,

.mathButtons:hover,

#clearButton:hover {

background-color: #FFBA75;

box-shadow: 0px 0px 2px #FFBA75, inset 0px -20px 1px #FF8000;

border-top: 2px solid #FFF;

border-right: 2px solid #FFF;

border-bottom: 2px solid #AE5700;

border-left: 2px solid #AE5700;

}

</style>

</head>

<body>

<div class="container">

<fieldset id="container">

<form name="calculator">

<input id="display" type="text" name="display" >

<input class="button digits" type="button" value="7">

<input class="button digits" type="button" value="8">

<input class="button digits" type="button" value="9">

<input class="button mathButtons" type="button" value="+">

<br />

<input class="button digits" type="button" value="4">

<input class="button digits" type="button" value="5">

<input class="button digits" type="button" value="6">

<input class="button mathButtons" type="button" value="-">

<br />

<input class="button digits" type="button" value="1">

<input class="button digits" type="button" value="2">

<input class="button digits" type="button" value="3">

<input class="button mathButtons" type="button" value="*">

<br />

<input id="clearButton" class="button" type="button" value="C">

<input class="button digits" type="button" value="0">

<input class="button mathButtons" type="button" value="=" >

<input class="button mathButtons" type="button" value="/">

</form>

</fieldset

</div>

<script>

const display = document.getElementById('display');

const buttons = document.querySelectorAll('.button');

let currentInput = '';

buttons.forEach(button => {

button.addEventListener('click', (e) => {

const value = e.target.value;

if (value === '=') {

currentInput = eval(currentInput).toString();

} else if (value === 'C') {

currentInput = '';

} else {

currentInput += value;

}

display.value = currentInput;

});

});

</script>

</body>

</html>