WEBLEB
Accueil
Éditeur
Connexion
Pro
Français
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Calculatrice iPhone
2388
Andev.web
Ouvrir dans l'éditeur
Publiez votre code
Recommandé
15 October 2024
Calculatrice iOS
19 November 2024
code de test de l'iPhone 16
1 February 2025
la nouvelle calculatrice de mikey
HTML
Copy
Andev Web
0
AC
±
%
÷
7
8
9
×
4
5
6
−
1
2
3
+
0
.
=
CSS
Copy
* { box-sizing: border-box; margin: 0; padding: 0; user-select: none; } body { font-family: "Helvetica Neue", sans-serif; margin: 0; display: flex; justify-content: center; align-items: center; height: 100vh; background: #f0f0f0; } .calculator { background: black; border-radius: 50px; color: white; height: 609px; padding: 10px; position: relative; width: 282px; } .top-container { display: flex; height: 125px; justify-content: space-between; padding: 0 10px; } .value { font-size: 65px; font-weight: 300; height: 79px; margin-bottom: 10px; margin-right: 10px; text-align: right; } .buttons-container { display: grid; grid-gap: 10px; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(5, 1fr); } .button { align-items: center; background: #333; border-radius: 50%; cursor: pointer; display: flex; font-size: 22.5px; height: 55px; justify-content: center; transition: filter .3s; width: 55px; } .button.function { color: black; background: #a5a5a5; } .button.operator { background: #f1a33c; } .button.number-0 { border-radius: 27.5px; grid-column: 1 / span 2; justify-content: flex-start; padding-left: 21.5px; width: 125px; } .button:active, .button:focus { filter: brightness(120%); } .bottom { width: 100px; height: 2.5px; background: white; border-radius: 2px; position: absolute; bottom: 5px; left: 50%; transform: translateX(-50%); }
JS
Copy
const hourEl = document.querySelector('.hour'); const minuteEl = document.querySelector('.minute'); const valueEl = document.querySelector('.value'); const acEl = document.querySelector('.ac'); const pmEl = document.querySelector('.pm'); const percentEl = document.querySelector('.percent'); const additionEl = document.querySelector('.addition'); const subtractionEl = document.querySelector('.subtraction'); const multiplicationEl = document.querySelector('.multiplication'); const divisionEl = document.querySelector('.division'); const equalEl = document.querySelector('.equal'); const decimalEl = document.querySelector('.decimal'); const number0El = document.querySelector('.number-0'); const number1El = document.querySelector('.number-1'); const number2El = document.querySelector('.number-2'); const number3El = document.querySelector('.number-3'); const number4El = document.querySelector('.number-4'); const number5El = document.querySelector('.number-5'); const number6El = document.querySelector('.number-6'); const number7El = document.querySelector('.number-7'); const number8El = document.querySelector('.number-8'); const number9El = document.querySelector('.number-9'); const numberElArray = [ number0El, number1El, number2El, number3El, number4El, number5El, number6El, number7El, number8El, number9El ]; let valueStrInMemory = null; let operatorInMemory = null; const getValueAsStr = () => valueEl.textContent.split(',').join(''); const getValueAsNum = () => { return parseFloat(getValueAsStr()); }; const setStrAsValue = (valueStr) => { if (valueStr[valueStr.length - 1] === '.') { valueEl.textContent += '.'; return; } const [wholeNumStr, decimalStr] = valueStr.split('.'); if (decimalStr) { valueEl.textContent = parseFloat(wholeNumStr).toLocaleString() + '.' + decimalStr; } else { valueEl.textContent = parseFloat(wholeNumStr).toLocaleString(); } }; const handleNumberClick = (numStr) => { const currentValueStr = getValueAsStr(); if (currentValueStr === '0') { setStrAsValue(numStr); } else { setStrAsValue(currentValueStr + numStr); } }; const getResultOfOperationAsStr = () => { const currentValueNum = getValueAsNum(); const valueNumInMemory = parseFloat(valueStrInMemory); let newValueNum; if (operatorInMemory === 'addition') { newValueNum = valueNumInMemory + currentValueNum; } else if (operatorInMemory === 'subtraction') { newValueNum = valueNumInMemory - currentValueNum; } else if (operatorInMemory === 'multiplication') { newValueNum = valueNumInMemory * currentValueNum; } else if (operatorInMemory === 'division') { newValueNum = valueNumInMemory / currentValueNum; } return newValueNum.toString(); }; const handleOperatorClick = (operation) => { const currentValueStr = getValueAsStr(); if (!valueStrInMemory) { valueStrInMemory = currentValueStr; operatorInMemory = operation; setStrAsValue('0'); return; } valueStrInMemory = getResultOfOperationAsStr(); operatorInMemory = operation; setStrAsValue('0'); }; acEl.addEventListener('click', () => { setStrAsValue('0'); valueStrInMemory = null; operatorInMemory = null; }); pmEl.addEventListener('click', () => { const currentValueNum = getValueAsNum(); const currentValueStr = getValueAsStr(); if (currentValueStr === '-0') { setStrAsValue('0'); return; } if (currentValueNum >= 0) { setStrAsValue('-' + currentValueStr); } else { setStrAsValue(currentValueStr.substring(1)); } }); percentEl.addEventListener('click', () => { const currentValueNum = getValueAsNum(); const newValueNum = currentValueNum / 100; setStrAsValue(newValueNum.toString()); valueStrInMemory = null; operatorInMemory = null; }); additionEl.addEventListener('click', () => { handleOperatorClick('addition'); }); subtractionEl.addEventListener('click', () => { handleOperatorClick('subtraction'); }); multiplicationEl.addEventListener('click', () => { handleOperatorClick('multiplication'); }); divisionEl.addEventListener('click', () => { handleOperatorClick('division'); }); equalEl.addEventListener('click', () => { if (valueStrInMemory) { setStrAsValue(getResultOfOperationAsStr()); valueStrInMemory = null; operatorInMemory = null; } }); for (let i=0; i < numberElArray.length; i++) { const numberEl = numberElArray[i]; numberEl.addEventListener('click', () => { handleNumberClick(i.toString()); }); } decimalEl.addEventListener('click', () => { const currentValueStr = getValueAsStr(); if (!currentValueStr.includes('.')) { setStrAsValue(currentValueStr + '.'); } }); const updateTime = () => { const currentTime = new Date(); let currentHour = currentTime.getHours(); const currentMinute = currentTime.getMinutes(); if (currentHour > 12) { currentHour -= 12; } hourEl.textContent = currentHour.toString(); minuteEl.textContent = currentMinute.toString().padStart(2, '0'); } setInterval(updateTime, 1000); updateTime();