需要使用 HTML/CSS 和 Javascript 從頭開始制作計算器

Question

Javascript 的新手需要通過應用 HTML CSS 和 Javascript 來制作計算器。放置所有按鈕后，需要通過調用 onclick function 來制作一個這樣的計算器應用程序，方法是在每個傳遞給按鈕的按鈕上調用 onclick function wti26.818 828 請幫助開始使用它。 計算器當前設計：

這是 HTML 和 CSS 代碼：

 body { font-family: 'Open Sans', sans-serif; background-color: black; } #container { width: 1000px; height: 550px; background-image: linear-gradient(#0000004d, rgba(0, 0, 0, 0.3)), url(bgcalc.png); margin: 20px auto; } #calculator { width: 320px; height: 520px; background-color: #eaedef; margin: 0 auto; top: 20px; position: relative; border-radius: 5px; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); } #result { height: 120px; margin-bottom: 20px; } #history { text-align: right; height: 20px; margin: 0 20px; padding-top: 20px; font-size: 15px; color: #919191; } #output { text-align: right; height: 60px; margin: 10px 20px; font-size: 30px; background-color: #afbec4; } #keyboard { height: 400px; }.operator, .number, .empty { width: 67px; height: 50px; margin: 6px; float: left; border-width: 0; font-weight: bold; font-size: 15px; } #clear { background-color: #cb4e4d; border-radius: 45%; }.number, .empty { background-color: #5f7d8c; border-radius: 10px; color: white; }.number, .operator { cursor: pointer; background-color: #5f7d8c; border-radius: 10px; color: white; }.operator:active, .number:active { font-size: 13px; }.operator:focus, .number:focus, .empty:focus { outline: 0; } button:nth-child(4) { font-size: 9px; background-color: #cb4e4d; border-radius: 10px; } button:nth-child(8) { font-size: 20px; background-color: #ffa500; border-radius: 10px; } button:nth-child(12) { font-size: 20px; background-color: #f08080; border-radius: 10px; } button:nth-child(16) { font-size: 20px; background-color: #7d93e0; border-radius: 10px; } button:nth-child(20) { font-size: 20px; background-color: #9477af; border-radius: 10px; }

 <html> <head> <link rel="stylesheet" type="text/css" href="style.css"> <link href="https://fonts.googleapis.com/css?family=Open+Sans:600,700" rel="stylesheet"> <title>A simple calculator</title> </head> <body> <div id="container"> <div id="calculator"> <div id="result"> <div id="history"> <p id="history-value"></p> </div> <div id="output"> <p id="output-value"></p> </div> </div> <div id="keyboard"> <button class="operator" id="clear">C</button> <button class="operator" id="backspace">+-</button> <button class="operator" id="%">%</button> <button class="operator" id="/">Console <br>Log</button> <button class="number" id="7">7</button> <button class="number" id="8">8</button> <button class="number" id="9">9</button> <button class="operator" id="*">&divide</button> <button class="number" id="4">4</button> <button class="number" id="5">5</button> <button class="number" id="6">6</button> <button class="operator" id="-">&times;</button> <button class="number" id="1">1</button> <button class="number" id="2">2</button> <button class="number" id="3">3</button> <button class="operator" id="+">-</button> <button class="empty" id="empty">0</button> <button class="number" id="0">.</button> <button class="empty" id="empty">=</button> <button class="operator" id="=">+</button> </div> </div> </div> <script src="script.js"></script> </body> </html>

Answer 1

作為開始，您可以使用 go：

為所有按鈕分配一個 onclick 屬性，並作為參數傳遞它們的值，並添加一個主輸入，所有值都將添加到其中：

<input type="text" id="mainInput" readonly>
<button class="operator" id="clear">C</button>
                <button class="operator" id="backspace" onclick="addChar("-")">+-</button>
                <button class="operator" id="%" onclick="addChar("%")">%</button>
                <button class="operator" id="/">Console <br>Log</button>
                <button class="number" id="7" onclick="addChar("%")">7</button>
                <button class="number" id="8" onclick="addChar("%")">8</button>
                <button class="number" id="9" onclick="addChar("%")">9</button>
                <button class="operator" id="*" onclick="addChar("%")">&divide</button>
                <button class="number" id="4" onclick="addChar("%")">4</button>
                <button class="number" id="5" onclick="addChar("%")">5</button>
                <button class="number" id="6" onclick="addChar("%")">6</button>
                <button class="operator" id="-" onclick="addChar("%")">&times;</button>
                <button class="number" id="1" onclick="addChar("1")">1</button>
                <button class="number" id="2" onclick="addChar("2")">2</button>
                <button class="number" id="3" onclick="addChar("3")">3</button>
                <button class="operator" id="+" onclick="addChar("-")">-</button>
                <button class="empty" id="empty" onclick="addChar("%")">0</button>
                <button class="number" id="0" onclick="addChar(".")">.</button>
                <button class="empty" id="empty" onclick="addChar("=")">=</button>
                <button class="operator" id="=" onclick="addChar("+")">+</button>

然后在JS中創建onclick function：

    function addChar(val) {
        document.getElementById("mainInput").value += val
}

我在這里所做的就是獲取 mainInput 的值並將單擊的按鈕的值添加到其中。

這應該讓你開始，祝你好運！

需要使用 HTML/CSS 和 Javascript 從頭開始制作計算器

問題描述

1 個解決方案

解決方案1
2 2022-03-02 05:50:19

需要使用 HTML/CSS 和 Javascript 從頭開始制作計算器

問題描述

1 個解決方案

解決方案1 2 2022-03-02 05:50:19

解決方案1
2 2022-03-02 05:50:19