HTML+CSS+JavaScript
在线预览：简易计算器 不使用eval | 简易计算器 使用eval
需要实现功能：
- 四则混合运算
- 不限长度
- 连续计算
- 计算出结果后输入数字可以自动覆盖
- 退格键
- 清空键
- 不使用eval()
实现方法
按钮布局
先写一个五行四列的表格，。第一行为跨四列的文本框，剩余为按钮，其中“+”与“=”是跨两行，表格内为按钮。
以数字“0”为例，类型为按钮，“class”为了后续写CSS，“value”为当前显示的值，“onclick”点击时执行函数，用来传入按键的值
<td><input type="button" class="number" value="0" onclick="fu('0')"/></td>大概是这个样子
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>简易计算器</title>
</head>
<body>
<br/><br/>
<div align="center">
<fieldset>
<div class="nt"></div>
<table align="center" >
<tr>
<td colspan="4">
<input type="text" class="xs" id="show"/>
</td>
</tr>
<tr>
<td colspan="4">
<div class="nt"></div>
</td>
</tr>
<tr>
<td><input type="button" class="ac" value="Ac" onclick="Ac()"/></td>
<td><input type="button" class="number" value="/" onclick="fu('/')"/></td>
<td><input type="button" class="number" value="*" onclick="fu('*')"/></td>
<td><input type="button" class="number" value="-" onclick="fu('-')"/></td>
</tr>
<tr>
<td><input type="button" class="number" value="7" onclick="fu('7')"/></td>
<td><input type="button" class="number" value="8" onclick="fu('8')"/></td>
<td><input type="button" class="number" value="9" onclick="fu('9')"/></td>
<td rowspan="2"><input type="button" class="sl" value="+" onclick="fu('+')"/></td>
</tr>
<tr>
<td><input type="button" class="number" value="4" onclick="fu('4')"/></td>
<td><input type="button" class="number" value="5" onclick="fu('5')"/></td>
<td><input type="button" class="number" value="6" onclick="fu('6')"/></td>
</tr>
<tr>
<td><input type="button" class="number" value="1" onclick="fu('1')"/></td>
<td><input type="button" class="number" value="2" onclick="fu('2')"/></td>
<td><input type="button" class="number" value="3" onclick="fu('3')"/></td>
<td rowspan="2"><input type="button" class="equal" value="=" onclick="equal()"/></td>
</tr>
<tr>
<td><input type="button" class="number" value="0" onclick="fu('0')"/></td>
<td><input type="button" class="number" value="." onclick="fu('.')"/></td>
<td><input type="button" class="number" value="←" onclick="backspace()"/></td>
</tr>
</table>
</fieldset>
</div>
</body>
</html>然后用CSS简单美化下，变成了这个样子
<style>
fieldset{
width: 250px;
text-align: center;
border-radius: 30px;
background-color: #EFF5F9;
box-shadow: 8px 8px 10px 1px rgba(0, 0, 0, 0.14);
}
.number{
width: 80px;
height: 80px;
margin: 3px;
border-radius: 15px;
border: 0;
font-size: 20px;
box-shadow: 2px 2px 4px 1px rgba(0, 0, 0, 0.24);
}
.number:active{
box-shadow: 1px 1px 2px 1px rgba(0, 0, 0, 0.24);
}
.ac{
width: 80px;
height: 80px;
margin: 3px;
border-radius: 15px;
border: 0;
font-size: 20px;
color: white;
background-color: #ffbc43;
box-shadow: 2px 2px 4px 1px rgba(0, 0, 0, 0.24);
}
.ac:active{
box-shadow: 1px 1px 2px 1px rgba(0, 0, 0, 0.24);
}
.sl{
width: 80px;
height: 168px;
margin: 3px;
border-radius: 15px;
border: 0;
font-size: 20px;
box-shadow: 2px 2px 4px 1px rgba(0, 0, 0, 0.24);
}
.sl:active{
box-shadow: 1px 1px 2px 1px rgba(0, 0, 0, 0.24);
}
.equal{
width: 80px;
height: 168px;
margin: 3px;
border-radius: 15px;
border: 0;
font-size: 25px;
background-color: #3FC0E7;
color: white;
box-shadow: 2px 2px 4px 1px rgba(0, 0, 0, 0.24);
}
.equal:active{
box-shadow: 1px 1px 2px 1px rgba(0, 0, 0, 0.24);
}
.zero{
width: 160px;
height: 80px;
border-radius: 15px;
border: 0;
font-size: 20px;
}
.xs{
width: 320px;
height: 120px;
border-radius: 15px;
border: 2;
font-size: 40px;
background-color: #ffffff;
}
.nt{
height: 20px;
}
</style>按键输入
首先定义一个函数，接收传进来的按键值
function fu(str){}用document.getElementById()获取文本框ID并赋给t
var t=document.getElementById("show");将文本框的内容加上传进来的str，来累加字符串
t.value=t.value+str;代码：
<script>
//输入字符
function fu(str){
var t=document.getElementById("show");//获取指定ID的元素
t.value=t.value+str;//叠加字符串
}
</script>退格
使用同样的方法获取文本框ID，现在文本框的内容是一个字符串，可以使用 substr() 来裁剪字符串，从第0个字符串裁剪到长度-1实现退格功能
function backspace(){
var t=document.getElementById("show");
t.value=t.value.substr(0,t.value.length-1);//使用substr截取字符串，从0开始至总长度-1
}清空
这个比较简单，只需把赋空值就行
function Ac(){
var t=document.getElementById("show");
t.value="";//清空输入框
}等于（计算）使用eval方法
直接用eval就可以了
function equal(){
var t=document.getElementById("show");
t.value=eval(t.value);
Finput=true;
}等于（计算）不使用eval方法
我的想法是把这个字符串转换成数组的形式在进行运算
插入分隔符
为了转换数组，在运算符的左右分别添加分隔符(1"+"2"*"3"-"4"/"5"+"6)，把字符串转换为['1','+','2','*','3','-','4','/','5','+','6'] 这样的一个数组
先使用indexOf查询到运算符
var this_index=edit_str.indexOf(fh[j],old_index);然后在前面和后面用slice各加入一个“#”
edit_str=edit_str.slice(0,this_index)+"#"+edit_str.slice(this_index);//前插#
edit_str=edit_str.slice(0,this_index+2)+"#"+edit_str.slice(this_index+2); //后插#创建一个变量，用来存储当前的索引值，并加3（下一位+两个“#”）来查询下一位
old_index=this_index+3;外层写一个循环查询特定所有的运算符
while(edit_str.indexOf(fh[j],old_index)!==-1){}让这整段代码循环四次来查找所以四则运算符
var fh=["+","-","*","/"];
for(var j=0;j<4;j++){}代码：
var edit_str=t.value;//字符串 edit_str
console.log("input_str="+edit_str);
var fh=["+","-","*","/"];
for(var j=0;j<4;j++){//四则符号，循环四遍
var old_index=0;
while(edit_str.indexOf(fh[j],old_index)!==-1){
var this_index=edit_str.indexOf(fh[j],old_index);//符号索引 this_index
edit_str=edit_str.slice(0,this_index)+"#"+edit_str.slice(this_index);//前插#
edit_str=edit_str.slice(0,this_index+2)+"#"+edit_str.slice(this_index+2); //后插#
old_index=this_index+3;//跳过当前和两个#后，索引下一个符号
}
}
四则运算
使用 split 对字符串进行切片，获得一个数组，例：['1','+','2','*','3','-','4','/','5','+','6']
var arr=edit_str.split("#");以加法为例，查询到“+”号，将它的前一位乘以它的后一位，结果存储在前一位上，然后将这一位和后一位的数组删除，得到一串完整数组
var a3=arr.indexOf("+");
arr[a3-1]=String(Number(arr[a3-1])+Number(arr[a3+1]));
arr_del=arr.splice(a3,2);然后根据四则运算的计算顺序：先除乘，后减加，最外层加一个循环用来不断计算直到计算结束
代码：
var arr=edit_str.split("#");
var arr_del;
// "*"
for(var lss=0;lss<arr.length;lss++){
if(arr.indexOf("/")!==-1){
var a2=arr.indexOf("/");
arr[a2-1]=String(Number(arr[a2-1])/Number(arr[a2+1]));
arr_del=arr.splice(a2,2);
console.log("index = "+a2+" arr = "+arr);//log
}
if(arr.indexOf("*")!==-1){
var a1=arr.indexOf("*");
arr[a1-1]=String(Number(arr[a1-1])*Number(arr[a1+1]));
arr_del=arr.splice(a1,2);
console.log("index = "+a1+" arr = "+arr);//log
}
}
// "-"
for(var lss=0;lss<arr.length;lss++){
if(arr.indexOf("-")!==-1){
var a4=arr.indexOf("-");
arr[a4-1]=String(Number(arr[a4-1])-Number(arr[a4+1]));
arr_del=arr.splice(a4,2);
console.log("index = "+a4+" arr = "+arr);//log
}
// "+"
if(arr.indexOf("+")!==-1){
var a3=arr.indexOf("+");
arr[a3-1]=String(Number(arr[a3-1])+Number(arr[a3+1]));
arr_del=arr.splice(a3,2);
console.log("index = "+a3+" arr = "+arr);//log
}
}输出结果
直接将数组第一位的值给文本框就好了
t.value=arr[0];计算出结果后输入自动覆盖
计算出结果后如果继续输入数字则覆盖文本框内容，创建个变量用来记录是否是第一次登录
var Finput=false;在输入的函数里面写两个判断实现功能
if(str=="+"||str=="-"||str=="*"||str=="/"){//计算后继续根据结果计算
Finput=false;
}
if(Finput){//如果是第一次输入数字则清空输入框
t.value="";
Finput=false;
}完整代码
不使用 eval 方法的计算器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
fieldset{
width: 250px;
text-align: center;
border-radius: 30px;
background-color: #EFF5F9;
box-shadow: 8px 8px 10px 1px rgba(0, 0, 0, 0.14);
}
.number{
width: 80px;
height: 80px;
margin: 3px;
border-radius: 15px;
border: 0;
font-size: 20px;
box-shadow: 2px 2px 4px 1px rgba(0, 0, 0, 0.24);
}
.number:active{
box-shadow: 1px 1px 2px 1px rgba(0, 0, 0, 0.24);
}
.ac{
width: 80px;
height: 80px;
margin: 3px;
border-radius: 15px;
border: 0;
font-size: 20px;
color: white;
background-color: #ffbc43;
box-shadow: 2px 2px 4px 1px rgba(0, 0, 0, 0.24);
}
.ac:active{
box-shadow: 1px 1px 2px 1px rgba(0, 0, 0, 0.24);
}
.sl{
width: 80px;
height: 168px;
margin: 3px;
border-radius: 15px;
border: 0;
font-size: 20px;
box-shadow: 2px 2px 4px 1px rgba(0, 0, 0, 0.24);
}
.sl:active{
box-shadow: 1px 1px 2px 1px rgba(0, 0, 0, 0.24);
}
.equal{
width: 80px;
height: 168px;
margin: 3px;
border-radius: 15px;
border: 0;
font-size: 25px;
background-color: #3FC0E7;
color: white;
box-shadow: 2px 2px 4px 1px rgba(0, 0, 0, 0.24);
}
.equal:active{
box-shadow: 1px 1px 2px 1px rgba(0, 0, 0, 0.24);
}
.zero{
width: 160px;
height: 80px;
border-radius: 15px;
border: 0;
font-size: 20px;
}
.xs{
width: 320px;
height: 120px;
border-radius: 15px;
border: 2;
font-size: 40px;
background-color: #ffffff;
}
.nt{
height: 20px;
}
</style>
<script>
//输入字符
var Finput=false;//是否为第一次输入
function fu(str){
var t=document.getElementById("show");//获取指定ID的元素
if(str=="+"||str=="-"||str=="*"||str=="/"){//计算后继续根据结果计算
Finput=false;
}
if(Finput){//如果是第一次输入数字则清空输入框
t.value="";
Finput=false;
}
t.value=t.value+str;//叠加字符串
}
//退格
function backspace(){
var t=document.getElementById("show");
t.value=t.value.substr(0,t.value.length-1);//使用substr截取字符串，从0开始至总长度-1
}
//清空
function Ac(){
var t=document.getElementById("show");
t.value="";//清空输入框
}
//等于
function equal(){
var t=document.getElementById("show");
//将字符串插入分隔符
var edit_str=t.value;//字符串 edit_str
console.log("input_str="+edit_str);
var fh=["+","-","*","/"];
for(var j=0;j<4;j++){//四则符号，循环四遍
var old_index=0;
while(edit_str.indexOf(fh[j],old_index)!==-1){
var this_index=edit_str.indexOf(fh[j],old_index);//符号索引 this_index
edit_str=edit_str.slice(0,this_index)+"#"+edit_str.slice(this_index);//前插#
edit_str=edit_str.slice(0,this_index+2)+"#"+edit_str.slice(this_index+2); //后插#
old_index=this_index+3;//跳过当前和两个#后，索引下一个符号
}
}
//计算
// var arr=['1','+','2','*','3','-','4','/','5','+','6'];
var arr=edit_str.split("#");
var arr_del;
// "*"
for(var lss=0;lss<arr.length;lss++){
if(arr.indexOf("/")!==-1){
var a2=arr.indexOf("/");
arr[a2-1]=String(Number(arr[a2-1])/Number(arr[a2+1]));
arr_del=arr.splice(a2,2);
console.log("index = "+a2+" arr = "+arr);//log
}
if(arr.indexOf("*")!==-1){
var a1=arr.indexOf("*");
arr[a1-1]=String(Number(arr[a1-1])*Number(arr[a1+1]));
arr_del=arr.splice(a1,2);
console.log("index = "+a1+" arr = "+arr);//log
}
}
// "-"
for(var lss=0;lss<arr.length;lss++){
if(arr.indexOf("-")!==-1){
var a4=arr.indexOf("-");
arr[a4-1]=String(Number(arr[a4-1])-Number(arr[a4+1]));
arr_del=arr.splice(a4,2);
console.log("index = "+a4+" arr = "+arr);//log
}
// "+"
if(arr.indexOf("+")!==-1){
var a3=arr.indexOf("+");
arr[a3-1]=String(Number(arr[a3-1])+Number(arr[a3+1]));
arr_del=arr.splice(a3,2);
console.log("index = "+a3+" arr = "+arr);//log
}
}
//输出结果
t.value=arr[0];
Finput=true;
}
</script>
</head>
<body>
<br/><br/>
<div align="center">
<fieldset>
<div class="nt"></div>
<table align="center" >
<tr>
<td colspan="4">
<input type="text" class="xs" id="show"/>
</td>
</tr>
<tr>
<td colspan="4">
<div class="nt"></div>
</td>
</tr>
<tr>
<td><input type="button" class="ac" value="Ac" onclick="Ac()"/></td>
<td><input type="button" class="number" value="/" onclick="fu('/')"/></td>
<td><input type="button" class="number" value="*" onclick="fu('*')"/></td>
<td><input type="button" class="number" value="-" onclick="fu('-')"/></td>
</tr>
<tr>
<td><input type="button" class="number" value="7" onclick="fu('7')"/></td>
<td><input type="button" class="number" value="8" onclick="fu('8')"/></td>
<td><input type="button" class="number" value="9" onclick="fu('9')"/></td>
<td rowspan="2"><input type="button" class="sl" value="+" onclick="fu('+')"/></td>
</tr>
<tr>
<td><input type="button" class="number" value="4" onclick="fu('4')"/></td>
<td><input type="button" class="number" value="5" onclick="fu('5')"/></td>
<td><input type="button" class="number" value="6" onclick="fu('6')"/></td>
</tr>
<tr>
<td><input type="button" class="number" value="1" onclick="fu('1')"/></td>
<td><input type="button" class="number" value="2" onclick="fu('2')"/></td>
<td><input type="button" class="number" value="3" onclick="fu('3')"/></td>
<td rowspan="2"><input type="button" class="equal" value="=" onclick="equal()"/></td>
</tr>
<tr>
<td><input type="button" class="number" value="0" onclick="fu('0')"/></td>
<td><input type="button" class="number" value="." onclick="fu('.')"/></td>
<td><input type="button" class="number" value="←" onclick="backspace()"/></td>
</tr>
</table>
</fieldset>
</div>
</body>
</html>使用 eval 方法的计算器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>简易计算器</title>
<style>
fieldset{
width: 250px;
text-align: center;
border-radius: 30px;
background-color: #EFF5F9;
box-shadow: 8px 8px 10px 1px rgba(0, 0, 0, 0.14);
}
.number{
width: 80px;
height: 80px;
margin: 3px;
border-radius: 15px;
border: 0;
font-size: 20px;
box-shadow: 2px 2px 4px 1px rgba(0, 0, 0, 0.24);
}
.number:active{
box-shadow: 1px 1px 2px 1px rgba(0, 0, 0, 0.24);
}
.ac{
width: 80px;
height: 80px;
margin: 3px;
border-radius: 15px;
border: 0;
font-size: 20px;
color: white;
background-color: #ffbc43;
box-shadow: 2px 2px 4px 1px rgba(0, 0, 0, 0.24);
}
.ac:active{
box-shadow: 1px 1px 2px 1px rgba(0, 0, 0, 0.24);
}
.sl{
width: 80px;
height: 168px;
margin: 3px;
border-radius: 15px;
border: 0;
font-size: 20px;
box-shadow: 2px 2px 4px 1px rgba(0, 0, 0, 0.24);
}
.sl:active{
box-shadow: 1px 1px 2px 1px rgba(0, 0, 0, 0.24);
}
.equal{
width: 80px;
height: 168px;
margin: 3px;
border-radius: 15px;
border: 0;
font-size: 25px;
background-color: #3FC0E7;
color: white;
box-shadow: 2px 2px 4px 1px rgba(0, 0, 0, 0.24);
}
.equal:active{
box-shadow: 1px 1px 2px 1px rgba(0, 0, 0, 0.24);
}
.zero{
width: 160px;
height: 80px;
border-radius: 15px;
border: 0;
font-size: 20px;
}
.xs{
width: 320px;
height: 120px;
border-radius: 15px;
border: 2;
font-size: 40px;
background-color: #ffffff;
}
.nt{
height: 20px;
}
</style>
<script>
//输入字符
var Finput=false;//是否为第一次输入
function fu(str){
var t=document.getElementById("show");//获取指定ID的元素
if(str=="+"||str=="-"||str=="*"||str=="/"){//计算后继续根据结果计算
Finput=false;
}
if(Finput){//如果是第一次输入数字则清空输入框
t.value="";
Finput=false;
}
t.value=t.value+str;//叠加字符串
}
//退格
function backspace(){
var t=document.getElementById("show");
t.value=t.value.substr(0,t.value.length-1);//使用substr截取字符串，从0开始至总长度-1
}
//清空
function Ac(){
var t=document.getElementById("show");
t.value="";//清空输入框
}
//计算
function equal(){
var t=document.getElementById("show");
t.value=eval(t.value);
Finput=true;
}
</script>
</head>
<body>
<br/><br/>
<div align="center">
<fieldset>
<div class="nt"></div>
<table align="center" >
<tr>
<td colspan="4">
<input type="text" class="xs" id="show"/>
</td>
</tr>
<tr>
<td colspan="4">
<div class="nt"></div>
</td>
</tr>
<tr>
<td><input type="button" class="ac" value="Ac" onclick="Ac()"/></td>
<td><input type="button" class="number" value="/" onclick="fu('/')"/></td>
<td><input type="button" class="number" value="*" onclick="fu('*')"/></td>
<td><input type="button" class="number" value="-" onclick="fu('-')"/></td>
</tr>
<tr>
<td><input type="button" class="number" value="7" onclick="fu('7')"/></td>
<td><input type="button" class="number" value="8" onclick="fu('8')"/></td>
<td><input type="button" class="number" value="9" onclick="fu('9')"/></td>
<td rowspan="2"><input type="button" class="sl" value="+" onclick="fu('+')"/></td>
</tr>
<tr>
<td><input type="button" class="number" value="4" onclick="fu('4')"/></td>
<td><input type="button" class="number" value="5" onclick="fu('5')"/></td>
<td><input type="button" class="number" value="6" onclick="fu('6')"/></td>
</tr>
<tr>
<td><input type="button" class="number" value="1" onclick="fu('1')"/></td>
<td><input type="button" class="number" value="2" onclick="fu('2')"/></td>
<td><input type="button" class="number" value="3" onclick="fu('3')"/></td>
<td rowspan="2"><input type="button" class="equal" value="=" onclick="equal()"/></td>
</tr>
<tr>
<td><input type="button" class="number" value="0" onclick="fu('0')"/></td>
<td><input type="button" class="number" value="." onclick="fu('.')"/></td>
<td><input type="button" class="number" value="←" onclick="backspace()"/></td>
</tr>
</table>
</fieldset>
</div>
</body>
</html>
Comments | NOTHING