基本步骤为:1.在按钮点击时触发函数 获取 input1、 input 2与 计算符 通过 switch 判断计算符 进行计算,最后将结果放置到占位符中
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>计算器</title> </head> <body> <label>数一<input type="number" id="num1"></label> <label for="num"> <select name="" id="num"> <option value="ca">*</option> <option value="cu">/</option> <option value="ja">+</option> <option value="jn">-</option> </select> </label> <label>数二<input type="number" id="num2"></label> <button id="btn">计算器</button> <p></p> <script> var btn = document.getElementById('btn'); var p = document.getElementsByTagName('p')[0]; btn.onclick = function(){ var num1 = document.getElementById('num1').value; var num2 = document.getElementById('num2').value; var math = document.getElementsByTagName('option')[0].value; switch(math){ // p.innerHTML 为改变 p 的 HTML文本 case 'ca': p.innerHTML = num1 * num2;break; case 'cu': p.innerHTML = num1 / num2;break; case 'ja': p.innerHTML = num1 + num2;break; case 'jn': p.innerHTML = num1 - num2;break; } } </script> </body> </html>