首先你要有一个思路,然后读一遍我的代码,尝试理解我的思路,然后自己试着写一遍. 希望对刚接触JS的你有所帮助.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .divs { width: 500px; height: 600px; border: 1px solid #000000; margin: auto; } .divs > input { width: 460px; height: 45px; margin-left: 18px; margin-top: 10px; font-size: 30px; background-color: white; text-align: right; } .divs > div { width: 100px; height: 100px; float: left; border: 1px solid #000000; margin-left: 18px; margin-top: 25px; font-size: 40px; line-height: 100px; text-align: center; user-select: none; } </style> </head> <body> <div class="divs"> <input type="text" value="0" id="input1" disabled /> <div class="block">7</div> <div class="block">8</div> <div class="block">9</div> <div class="block">-</div> <div class="block">4</div> <div class="block">5</div> <div class="block">6</div> <div class="block">+</div> <div class="block">1</div> <div class="block">2</div> <div class="block">3</div> <div class="block">*</div> <div class="block">C</div> <div class="block">0</div> <div class="block">=</div> <div class="block">/</div> </div> <script> var blocks = document.getElementsByClassName("block");//根据class名获取一类元素 var input = document.getElementById("input1");//通过id获取input1按钮 var firstnum = 0; //用于存放第一组数字的变量 var symbol; //用于存放运算符的变量 var judge = false; for(var i = 0;i < blocks.length;i++){ blocks[i].onclick = function(){ //点击事件 if(!isNaN(this.innerHTML)){ //当点击的内容不是运算符时 if(judge){ //用于清空上一次运算完结果,通过 true 与 false 来控制是否清空 input.value input.value = "0"; judge = false; } input.value = Number(input.value + this.innerHTML).toString() ; }else{ if(this.innerHTML !== "=" && this.innerHTML !== "C"){ //点击了运算符,但不是 = 和 C 时 firstnum =Number(input.value); symbol = this.innerHTML; input.value = "0"; }else{ if(this.innerHTML === "C"){ //当点击 C 时 firstnum = 0; symbol = undefined; input.value = "0"; }else{ //当点击运算符 = 时,input中显示运算结果 switch(symbol){ case "+": input.value = (firstnum + Number(input.value)).toString() ; break; case "-": input.value = (firstnum - Number(input.value)).toString() ; break; case "*": input.value = (firstnum * Number(input.value)).toString() ; break; case "/": if(Number(input.value) ===0) input.value = "0"; //考虑到除法的除数为0的特殊情况,计算机会返回infinity,因此在这里需要加一个if条件语句来判断一下. else{ input.value = (firstnum / Number(input.value)).toString() ; break; } } judge = true; } } } } }; </script> </body> </html>