рд╢реБрдн рджрд┐рди, рджреЛрд╕реНрддреЛрдВ!рдЗрд╕ рд▓реЗрдЦ рдореЗрдВ, рд╣рдо, рдЬреИрд╕рд╛ рдХрд┐ рдирд╛рдо рдХрд╛ рдЕрд░реНрде рд╣реИ, рдПрдХ рд╕рд╛рдзрд╛рд░рдг рдЬрд╛рд╡рд╛рд╕реНрдХреНрд░рд┐рдкреНрдЯ рдХреИрд▓рдХреБрд▓реЗрдЯрд░ рд▓рд┐рдЦреЗрдВрдЧреЗредрдПрдХ рдХреИрд▓рдХреБрд▓реЗрдЯрд░ рд▓рд┐рдЦрдиреЗ рдХреА рдЗрдЪреНрдЫрд╛ рдПрдХ "рд╕рд░рд▓ рдХреИрд▓рдХреБрд▓реЗрдЯрд░" рдмрдирд╛рдиреЗ рдкрд░ рдПрдХ рдЯреНрдпреВрдЯреЛрд░рд┐рдпрд▓ рджреЗрдЦрдиреЗ рдХреЗ рдмрд╛рдж рдореЗрд░реЗ рдкрд╛рд╕ рдЖрдИ, рдЬреЛ рдХрд┐ рд╕рд░рд▓ рд╣реЛрдиреЗ рд╕реЗ рдмрд╣реБрдд рджреВрд░ рд╣реЛ рдЧрдпрд╛ рдФрд░ рд╡рд╛рд╕реНрддрд╡ рдореЗрдВ рдХреБрдЫ рднреА рдирд╣реАрдВ рдХрд░ рд╕рдХрд╛редрд╣рдорд╛рд░рд╛ рдХреИрд▓рдХреБрд▓реЗрдЯрд░ рд╕рд╣реА рд╕рд░рд▓ рд╣реЛрдЧрд╛ (рдХреЛрдб рдХреЗ 42 рд▓рд╛рдЗрди, рдмреНрд▓реЙрдХ рдХреЗ рдмреАрдЪ рд░рд┐рдХреНрдд рд╕реНрдерд╛рди рд╕рд╣рд┐рдд), рд▓реЗрдХрд┐рди рдкреВрд░реА рддрд░рд╣ рдХрд╛рд░реНрдпрд╛рддреНрдордХ рдФрд░ рд╕реНрдХреЗрд▓реЗрдмрд▓ред рдпрд╣ рдЕрджреНрднреБрдд рдкреБрд╕реНрддрдХрд╛рд▓рдп (Math.js)рдЧрдгрдирд╛ рдХреЗ рд▓рд┐рдП рдЙрдкрдпреЛрдЧ рдХрд┐рдпрд╛ рдЬрд╛рдПрдЧрд╛ ред рдЖрдЧреЗ рдкрд░рд┐рдЪрдп рдХреЗ рдмрд┐рдирд╛, рд╣рдо рд╡реНрдпрд╛рдкрд╛рд░ рдХреЗ рд▓рд┐рдП рдиреАрдЪреЗ рдЙрддрд░рддреЗ рд╣реИрдВредрд╣рдорд╛рд░рд╛ рдорд╛рд░реНрдХрдЕрдк рдЗрд╕ рддрд░рд╣ рджрд┐рдЦрддрд╛ рд╣реИ:
<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjs/6.6.4/math.js"></script>
<div class="calculator">
<output></output>
</div>
рдпрд╣рд╛рдВ рд╣рдо рд▓рд╛рдЗрдмреНрд░реЗрд░реА рдХрдиреЗрдХреНрдЯ рдХрд░рддреЗ рд╣реИрдВ, рдХреИрд▓рдХреБрд▓реЗрдЯрд░ рдХреЗ рд▓рд┐рдП рдПрдХ рдХрдВрдЯреЗрдирд░ рдмрдирд╛рддреЗ рд╣реИрдВ рдФрд░ рдЗрдирдкреБрдЯ рдкрд╛рддреНрд░реЛрдВ рдФрд░ рдкрд░рд┐рдгрд╛рдо рдХреЗ рд▓рд┐рдП рдПрдХ рдлрд╝реАрд▓реНрдб рдмрдирд╛рддреЗ рд╣реИрдВредрд╣рдо рд╢реИрд▓рд┐рдпреЛрдВ рдХреЛ рдЬреЛрдбрд╝рддреЗ рд╣реИрдВ:* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
height: 100vh;
background: radial-gradient(circle, skyblue, steelblue);
display: flex;
justify-content: center;
align-items: center;
}
.calculator {
width: 320px;
height: 480px;
background: #eee;
border-radius: 5px;
box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.2), -2px -2px 3px rgba(0, 0, 0, 0.2);
}
output {
display: flex;
justify-content: center;
align-items: center;
width: 300px;
height: 40px;
background: #fff;
margin: 10px auto;
border-radius: 5px;
font-size: 1.4em;
font-weight: bold;
box-shadow: inset 1px 1px 1px rgba(0, 0, 0, 0.3),
inset -1px -1px 1px rgba(0, 0, 0, 0.3);
}
.keyboard {
height: 440px;
display: flex;
flex-wrap: wrap;
justify-content: space-evenly;
align-items: flex-start;
}
button {
margin: 0.5em 1em;
width: 40px;
height: 40px;
display: flex;
justify-content: center;
align-items: center;
background: none;
border: none;
cursor: pointer;
font-size: 1em;
font-weight: bold;
}
рдЗрд╕ рд╕рдордп рд╣рдорд╛рд░реЗ рдкрд╛рд╕ рдХреНрдпрд╛ рд╣реИ:
рдмрдЯрди рдкреНрд░реЛрдЧреНрд░рд╛рдореЗрдЯрд┐рдХ рд░реВрдк рд╕реЗ рдЙрддреНрдкрдиреНрди рд╣реЛрдВрдЧреЗредрд╣рдо рд╕реНрдХреНрд░рд┐рдкреНрдЯ рдкрд╛рд╕ рдХрд░рддреЗ рд╣реИрдВредрд╣рдо рдкрд░рд┐рдгрд╛рдо рдХреЛ рдЖрдЙрдЯрдкреБрдЯ рдХрд░рдиреЗ рдХреЗ рд▓рд┐рдП рдПрдХ рдХреНрд╖реЗрддреНрд░ рдХреЛ рдкрд░рд┐рднрд╛рд╖рд┐рдд рдХрд░рддреЗ рд╣реИрдВ рдФрд░ рдХреАрдмреЛрд░реНрдб рдХреЗ рд▓рд┐рдП рдПрдХ рдХрдВрдЯреЗрдирд░ рдмрдирд╛рддреЗ рд╣реИрдВ:const output = document.querySelector('output')
const div = document.createElement('div')
div.classList.add('keyboard')
document.querySelector('.calculator').appendChild(div)
рдкрд╛рддреНрд░реЛрдВ рдХреЗ рд╕рд╛рде рд╣рдорд╛рд░реА рд▓рд╛рдЗрди рдЗрд╕ рддрд░рд╣ рджрд┐рдЦрддреА рд╣реИ:'C CE % / 7 8 9 * 4 5 6 - 1 2 3 + 0 ( ) ='
рдЗрд╕ рд╕реНрдЯреНрд░рд┐рдВрдЧ рдХреЛ рдПрдХ рд╕рд░рдгреА рдореЗрдВ рдмрджрд▓реЗрдВ рдФрд░ рдмрдЯрди рдмрдирд╛рдПрдВ:
'C CE % / 7 8 9 * 4 5 6 - 1 2 3 + 0 ( ) ='.split(' ')
.map(symbol => {
div.insertAdjacentHTML('beforeend', `<button value="${symbol}">${symbol}</button>`)
})
рд╣рдо рдмрдирд╛рдП рдЧрдП рдмрдЯрди рдвреВрдВрдврддреЗ рд╣реИрдВ рдФрд░ рдЙрди рдкрд░ рдПрдХ рдХреНрд▓рд┐рдХ рдИрд╡реЗрдВрдЯ рд╣реИрдВрдбрд▓рд░ рдЬреЛрдбрд╝рддреЗ рд╣реИрдВ:document.querySelectorAll('button').forEach(button => {
button.addEventListener('click', function () {
calc(this.value)
})
})
рд╣рдо рдХреАрдмреЛрд░реНрдб рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░рдХреЗ рд╡рд░реНрдгреЛрдВ рдореЗрдВ рдкреНрд░рд╡реЗрд╢ рдХрд░рдиреЗ рдореЗрдВ рд╕рдХреНрд╖рдо рд╣реЛрдирд╛ рдЪрд╛рд╣рддреЗ рд╣реИрдВред рдРрд╕рд╛ рдХрд░рдиреЗ рдХреЗ рд▓рд┐рдП, рд╣рдореЗрдВ "рдХреАрд╕реНрдЯреНрд░реЛрдХ" рдИрд╡реЗрдВрдЯ рд╣реИрдВрдбрд▓рд░ рдХреЛ "рдбреЙрдХреНрдпреВрдореЗрдВрдЯ" рдпрд╛ "рд╡рд┐рдВрдбреЛ" рдСрдмреНрдЬреЗрдХреНрдЯ рдореЗрдВ рдЬреЛрдбрд╝рдирд╛ рд╣реЛрдЧрд╛, рдлрд┐рд░ рдХреБрдВрдЬреА рдХреЗ "рдХреА" рдкреНрд░реЙрдкрд░реНрдЯреА рдХреЗ рдЕрдирд╛рд╡рд╢реНрдпрдХ рдорд╛рдиреЛрдВ рдХреЛ рдлрд╝рд┐рд▓реНрдЯрд░ рдХрд░реЗрдВ, рдЙрджрд╛рд╣рд░рдг рдХреЗ рд▓рд┐рдП, рдПрдХ рд░реЗрдЧреБрд▓рд░ рдПрдХреНрд╕рдкреНрд░реЗрд╢рди рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░рддреЗ рд╣реБрдП:document.addEventListener('keydown', event => {
if ((event.key).match(/[0-9%\/*\-+\(\)=]|Backspace|Enter/)) calc(event.key)
})
рдЗрд╕ рдорд╛рдорд▓реЗ рдореЗрдВ рдореИрдЪ рд╡рд┐рдзрд┐ рдПрдХ рдлрд┐рд▓реНрдЯрд░ рдХреА рднреВрдорд┐рдХрд╛ рдирд┐рднрд╛рддреА рд╣реИ: рдпрд╣ рдХреИрд▓реНрдХ рдлрд╝рдВрдХреНрд╢рди рдХреЛ рдПрдХ рддрд░реНрдХ рдкрд╛рд░рд┐рдд рдХрд░рдиреЗ рдХреА рдЕрдиреБрдорддрд┐ рдирд╣реАрдВ рджреЗрддрд╛ рд╣реИ рдЬреЛ рдЗрд╕рдореЗрдВ рдирд┐рд░реНрджрд┐рд╖реНрдЯ рд╢рд░реНрдд рд╕реЗ рдореЗрд▓ рдирд╣реАрдВ рдЦрд╛рддрд╛ рд╣реИредрд╕реНрдерд┐рддрд┐ рд╕реНрд╡рдпрдВ рдЗрд╕ рдкреНрд░рдХрд╛рд░ рд╣реИ: рдпрджрд┐ event.key рдХрд╛ рдорд╛рди рд╡рд░реНрдЧрд╛рдХрд╛рд░ рдХреЛрд╖реНрдардХ ([) рдореЗрдВ 0 рд╕реЗ 9 рддрдХ рдХреА рд╕рдВрдЦреНрдпрд╛, рд╡рд┐рднрд╛рдЬрди рдХреЗ рд╕рдВрдХреЗрдд, рдЧреБрдгрди, рдЬреЛрдбрд╝, рдШрдЯрд╛рд╡, рдЦреБрд▓рдиреЗ, рд╕рдорд╛рдкрди рдХреЛрд╖реНрдардХ рдпрд╛ рд╕рдорддреБрд▓реНрдп рд╡рд░реНрдгреЛрдВ рдореЗрдВ рд╕реЗ рдПрдХ рд╣реИ; рдмреИрдХрд╕реНрд▓реИрд╢) - рднрд╛рдЧрдиреЗ) рдпрд╛ (! - рдкрд░рд┐рд╡рд░реНрддрди) рдмреИрдХрд╕реНрдкреЗрд╕, рдпрд╛ рджрд░реНрдЬ рдХрд░реЗрдВ, рддреЛ рд╣рдо рдПрдХ рдкреИрд░рд╛рдореАрдЯрд░ рдХреЗ рд░реВрдк рдореЗрдВ Event.key рдХреЗ рд╕рд╛рде рдХреИрд▓реНрдХ рдХрд╣рддреЗ рд╣реИрдВ, рдЕрдиреНрдпрдерд╛ рд╣рдо рдХреБрдЫ рднреА рдирд╣реАрдВ рдХрд░рддреЗ рд╣реИрдВ (рд╢рд┐рдлреНрдЯ рднреА рд╕рдлрд▓рддрд╛рдкреВрд░реНрд╡рдХ рдЦрд╛рд░рд┐рдЬ рдХрд░ рджрд┐рдпрд╛ рдЬрд╛рддрд╛ рд╣реИ)редрд╣рдорд╛рд░рд╛ рдореБрдЦреНрдп (рдФрд░ рдХреЗрд╡рд▓) рдХреИрд▓реНрдХ рдлрд╝рдВрдХреНрд╢рди рдирд┐рдореНрдирд╛рдиреБрд╕рд╛рд░ рд╣реИ (рдХреЛрдб рдХреЛ рдиреАрдЪреЗ рд╕реЗ рдКрдкрд░ рддрдХ рдкрдврд╝рд╛ рдЬрд╛рдирд╛ рдЪрд╛рд╣рд┐рдП):
function calc(value) {
if (value.match(/=|Enter/)) {
try {
output.textContent = Math.trunc(math.evaluate(output.textContent))
} catch {
let oldValue = output.textContent
let newValue = ' '
output.textContent = newValue
setTimeout(() => {
output.textContent = oldValue
}, 1500)
}
} else if (value === 'C') {
output.textContent = ''
} else if (value.match(/CE|Backspace/)) {
output.textContent = output.textContent.substring(0, output.textContent.length - 1)
} else {
output.textContent += value
}
}
рдЕрдВрдд рдореЗрдВ, рдШреЛрд╖рд┐рдд рд╕реНрдХреЗрд▓реЗрдмрд┐рд▓рд┐рдЯреА рдФрд░ рдкреВрд░реНрдг рдХрд╛рд░реНрдпрдХреНрд╖рдорддрд╛ рдХреЗ рдмрд╛рд░реЗ рдореЗрдВ рдХреБрдЫ рд╢рдмреНрджредрдореВрд▓реНрдпрд╛рдВрдХрди рд╡рд┐рдзрд┐ (рдкреВрд░реНрд╡ рдореЗрдВ рд╡рд┐рдХрд╕рд┐рдд) рдФрд░ рдЕрдиреНрдп Math.js рд╡рд┐рдзрд┐рдпреЛрдВ рдореЗрдВ рдмрд╣реБрдд рдмрдбрд╝реА рдХреНрд╖рдорддрд╛рдПрдВ рд╣реИрдВред рдЗрди рд╡рд┐рд╢реЗрд╖рддрд╛рдУрдВ рдХреЗ рдЖрдзрд╛рд░ рдкрд░, рд╣рдо рдЖрд╕рд╛рдиреА рд╕реЗ рдЕрдкрдиреЗ рдХреИрд▓рдХреБрд▓реЗрдЯрд░ рдХреА рдХрд╛рд░реНрдпрдХреНрд╖рдорддрд╛ рдХрд╛ рд╡рд┐рд╕реНрддрд╛рд░ рдХрд░ рдЙрд╕рдореЗрдВ рдирдП рдкрд╛рддреНрд░реЛрдВ рдФрд░ рдСрдкрд░реЗрдЯрд░реЛрдВ рдХреЛ рдЬреЛрдбрд╝ рд╕рдХрддреЗ рд╣реИрдВ, рдлреНрд▓реЛрдЯрд┐рдВрдЧ-рдкреЙрдЗрдВрдЯ рдирдВрдмрд░реЛрдВ рдХреЗ рд╕рд╛рде рдХрд╛рдо рдХрд░рдиреЗ рдХреА рд╕рдВрднрд╛рд╡рдирд╛ рдкреНрд░рджрд╛рди рдХрд░рддреЗ рд╣реИрдВ (рд╕реНрд╡рд┐рдЪ рдФрд░ "toFixed" рд╡рд┐рдзрд┐ рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░рдХреЗ рджрд╢рдорд▓рд╡ рд╕реНрдерд╛рдиреЛрдВ рдХреА рд╕рдВрдЦреНрдпрд╛ рдХреЛ рд╕рдорд╛рдпреЛрдЬрд┐рдд рдХрд░ рд╕рдХрддреЗ рд╣реИрдВ), рдЖрджрд┐редрдкрд░рд┐рдгрд╛рдо:рдЧрд┐рдЯрд╣рдм
рдХреЛрдб редрдзреНрдпрд╛рди рджреЗрдиреЗ рдХреЗ рд▓рд┐рдП рдзрдиреНрдпрд╡рд╛рджред рдореБрдЭреЗ рдЖрд╢рд╛ рд╣реИ рдХрд┐ рдЖрдк рдЕрдкрдиреЗ рд▓рд┐рдП рдХреБрдЫ рдЙрдкрдпреЛрдЧреА рдкрд╛рдПрдВрдЧреЗред рдПрдХ рдЕрдЪреНрдЫрд╛ рд╕рдкреНрддрд╛рд╣рд╛рдВрдд рдФрд░ рдЦреБрд╢ рдХреЛрдбрд┐рдВрдЧ рд╣реИред