<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" type="text/css" href="test.css" /> </head> <body> <div class="container"> <div class="box"> <div class="input" id="txt"> <!-- <span>5</span>--> </div> <div class="fun"> <ul> <li class="store">存储</li> <li class="save">取存</li> <li class="back">退格</li> <li class="del">清屏</li> </ul> </div> <div class="bottom"> <ul class="num"> <li>7</li> <li>8</li> <li>9</li> <li>4</li> <li>5</li> <li>6</li> <li>1</li> <li>2</li> <li>3</li> <li>0</li> <li class="point">.</li> <li class="equal">=</li> </ul> <ul class="operation"> <li>÷</li> <li>×</li> <li>+</li> <li>-</li> </ul> </div> </div> </div> <script src="jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> //文本框内容 var $li = $("li"); var flag = 0; $li.each(function() { $(this).click(function() { //获取输入框中的内容 var Text = $(".input").text().trim(); console.log($(this).text()); //判断第一个数是否为0 var txt = $(this).text(); if(flag == 0) { txt = txt.replace(/^0*/g, ''); flag = 1; } // if(txt.match(/0d{1-9}/)) { //if(Text.match(/^0*/g)) //判断小数点，最多只能有一个小数点 if($(this).text() == ".") { var n = Text.indexOf("."); if(n > -1) { //console.log("***"); return false; } } $(".input").append(txt); //运算符 switch($(this).text()) { case "退格": $(".input").text(Text.substr(0, Text.length - 1)); break; case "清屏": $(".input").text(""); break; case "=": function compute(content) { //加 var index = content.indexOf("+"); if(index > -1) { return parseFloat(compute(content.substring(0, index))) + parseFloat(compute(content.substring(index + 1))); } //减 index = content.lastIndexOf("-"); if(index > -1) { return compute(content.substring(0, index)) - compute(content.substring(index + 1)); } //乘 index = content.indexOf("×"); if(index > -1) { return compute(content.substring(0, index)) * compute(content.substring(index + 1)); } //除 index = content.lastIndexOf("÷"); if(index > -1) { return compute(content.substring(0, index)) / compute(content.substring(index + 1)); } if(content == "") { return 0; } else { return Number(content); } } $(".input").text(compute(Text)); } }); }); </script> </body> </html>