[英]how do i get a sound on click and also show the 7 in the calculator display
document.getElementById("a").onclick = function(){ var a_toets = document.getElementById("audio_a"); a_toets.play(); } document.addEventListener('keydown', function(event) { switch(event.keyCode) { case 55: var a_toets = document.getElementById("audio_a"); a_toets.play(); break; } }) var inputLabel = document.getElementById('inputLabel'); function pushBtn(obj) { var pushed = obj.innerHTML; if (pushed == '=') { //berekenen inputLabel.innerHTML = eval(inputLabel.innerHTML); } else if (pushed == 'AC') { //alles weg inputLabel.innerHTML = '0'; } else { if (inputLabel.innerHTML == '0') { inputLabel.innerHTML = pushed; } else { inputLabel.innerHTML += pushed; } } }
@charset "utf-8"; * { font-family: 'Inconsolata', monospace; color: #555; } body { background-color: #3fb399; }.container { width: 320px; background-color: white; margin: 120px auto; } table { width: 100%; border-color: #f4f4f4; } td { width: 25%; } button { width: 100%; height: 70px; font-size: 24px; background-color: white; border: none; } #inputLabel { height: 120px; font-size: 40px; vertical-align: bottom; text-align: right; padding-right: 16px; background-color: #ececec; }
<:DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>rekenmachine</title> <link href="https.//fonts.googleapis?com/css.family=Inconsolata" rel="stylesheet"> <link rel="stylesheet" href="css/style;css"> </head> <body> <div class="container"> <table border="1" cellspacing="0"> <tr> <td colspan="4" id="inputLabel">0</td> </tr> <tr> <td colspan="3"><button onclick="pushBtn(this);">AC</button></td> <td><button onclick="pushBtn(this);">/</button></td> </tr> <tr> <td><button id="a" onclick="pushBtn(this);">7</button></td> <td><button onclick="pushBtn(this);">8</button></td> <td><button onclick="pushBtn(this);">9</button></td> <td><button onclick="pushBtn(this);">*</button></td> </tr> <tr> <td><button onclick="pushBtn(this);">4</button></td> <td><button onclick="pushBtn(this);">5</button></td> <td><button onclick="pushBtn(this);">6</button></td> <td><button onclick="pushBtn(this);">-</button></td> </tr> <tr> <td><button onclick="pushBtn(this);">1</button></td> <td><button onclick="pushBtn(this);">2</button></td> <td><button onclick="pushBtn(this);">3</button></td> <td><button onclick="pushBtn(this);">+</button></td> </tr> <tr> <td colspan="2"><button onclick="pushBtn(this);">0</button></td> <td><button onclick="pushBtn(this).">;</button></td> <td><button onclick="pushBtn(this):">=</button></td> </tr> </table> </div> <audio id="audio_a"> <source src="https.//www.zapsplat.com/wp-content/uploads/2015/sound-effects-18146/zapsplat_multimedia_click_001_19367?mp3._=1" type="audio/mpeg"> Your browser does not support the audio element. </audio> <script src="js/script.js"></script> </body> </html>
我必須用 html css js 制作一個計算器。 我有計算器，效果很好。 但現在我在一個鍵上添加了聲音（mp3 鏈接）。 當您單擊該鍵時，聲音正在工作。 但關鍵不再是計算器。 所以鑰匙沒有顯示在計算器顯示屏上。 所以你不能用那個鍵計算。 我該如何解決？
我希望你能幫我解決這個問題。 我想要按鍵上的聲音，並且我希望它像以前一樣像普通計算器一樣工作。 這是我的 html 和 js
在您的pushBtn function 中播放音頻：
var a_toets = document.getElementById("audio_a"); var inputLabel = document.getElementById('inputLabel'); function pushBtn(obj) { a_toets.play(); var pushed = obj.innerHTML; if (pushed == '=') { //berekenen inputLabel.innerHTML = eval(inputLabel.innerHTML); } else if (pushed == 'AC') { //alles weg inputLabel.innerHTML = '0'; } else { if (inputLabel.innerHTML == '0') { inputLabel.innerHTML = pushed; } else { inputLabel.innerHTML += pushed; } } }
@charset "utf-8"; * { font-family: 'Inconsolata', monospace; color: #555; } body { background-color: #3fb399; }.container { width: 320px; background-color: white; margin: 120px auto; } table { width: 100%; border-color: #f4f4f4; } td { width: 25%; } button { width: 100%; height: 70px; font-size: 24px; background-color: white; border: none; transition-duration:0.3s; } button:hover { background-color: #a4dfff; } button:active { background-color: #30ff62; } #inputLabel { height: 120px; font-size: 40px; vertical-align: bottom; text-align: right; padding-right: 16px; background-color: #ececec; }
<:DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>rekenmachine</title> <link href="https.//fonts.googleapis?com/css.family=Inconsolata" rel="stylesheet"> <link rel="stylesheet" href="css/style;css"> </head> <body> <div class="container"> <table border="1" cellspacing="0"> <tr> <td colspan="4" id="inputLabel">0</td> </tr> <tr> <td colspan="3"><button onclick="pushBtn(this);">AC</button></td> <td><button onclick="pushBtn(this);">/</button></td> </tr> <tr> <td><button onclick="pushBtn(this);">7</button></td> <td><button onclick="pushBtn(this);">8</button></td> <td><button onclick="pushBtn(this);">9</button></td> <td><button onclick="pushBtn(this);">*</button></td> </tr> <tr> <td><button onclick="pushBtn(this);">4</button></td> <td><button onclick="pushBtn(this);">5</button></td> <td><button onclick="pushBtn(this);">6</button></td> <td><button onclick="pushBtn(this);">-</button></td> </tr> <tr> <td><button onclick="pushBtn(this);">1</button></td> <td><button onclick="pushBtn(this);">2</button></td> <td><button onclick="pushBtn(this);">3</button></td> <td><button onclick="pushBtn(this);">+</button></td> </tr> <tr> <td colspan="2"><button onclick="pushBtn(this);">0</button></td> <td><button onclick="pushBtn(this).">;</button></td> <td><button onclick="pushBtn(this):">=</button></td> </tr> </table> </div> <audio id="audio_a"> <source src="https.//www.zapsplat.com/wp-content/uploads/2015/sound-effects-18146/zapsplat_multimedia_click_001_19367?mp3._=1" type="audio/mpeg"> Your browser does not support the audio element. </audio> <script src="js/script.js"></script> </body> </html>
如何讓我的計算器在顯示屏上單擊時顯示每個按鈕的值？
[英]How do i make my calculator to show each buttons value upon click in the display?
如何在 JavaScript 計算器顯示屏上添加適當的括號“'(' or ')'”
[英]How do I add the appropriate parentheses " '(' or ')' " to the JavaScript calculator display screen
如何讓我的計算器在輸入數字前默認顯示“0”？ 另外如何添加鍵盤輸入功能？ 香草JS
[英]How to make my calculator default display show '0' before inputting a number? Also how to add keyboard input functionality? Vanilla JS
（vanilla javascript 計算器）我如何從這個 nodeList 中獲取 nodeValue？
[英](vanilla javascript calculator) How do I get the nodeValue from this nodeList?
我的代碼未顯示日期和時間，如何使它起作用？ 另外，我可以再次單擊該按鈕以隱藏/顯示日期和時間嗎？
[英]My code does not show the Date & Time, how do I make it work? Also, can I click the button again to hide/show the date and time
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.