<!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(/0\d{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>
浙公网安备 33010602011771号