JavaScript计算器_val.value = val.value.substring(0, val.value.lengt-CSDN博客

本文链接：https://blog.csdn.net/sjl110/article/details/39159947

 html代码

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>计算器</title>
<link rel="stylesheet" type="text/css" href="style.css">

<script type="text/javascript" src="calculater.js"></script>



</head>

<body>

<div id="calculater">
	<input id="txt" readonly/>
    
    <!-- 功能按钮 -->
    <div id="topDiv">
    	<button type="button" disabled class="bnt-m">M</button>
        <button type="button" class="bnt-top" onClick="backspace();">Backspace</button>
        <button type="button"  class="bnt-top">CE</button>
        <button type="button"  class="bnt-top" onClick="clearTxt()">C</button>
    </div>
    
    <!-- 存储功能按钮 -->
    <div id="leftDiv">
    	<button type="button">MC</button>
        <button type="button">MR</button>
        <button type="button">MS</button>
        <button type="button">M+</button>
    </div>
    
    <!-- 数字和运算按钮 -->
    <div id="rightDiv">
    	<!-- 第一行 -->
    	<button type="button" onClick="inputNum(7)">7</button>
        <button type="button" onClick="inputNum(8)">8</button>
        <button type="button" onClick="inputNum(9)">9</button>
        <button type="button" class="bnt-color" onClick="inputOp('/')">/</button>
        <button type="button" onClick="sqrtf()">sqrt</button>
        
        <!-- 第二行 -->
    	<button type="button" onClick="inputNum(4)">4</button>
        <button type="button" onClick="inputNum(5)">5</button>
        <button type="button" onClick="inputNum(6)">6</button>
        <button type="button" class="bnt-color" onClick="inputOp('*')">*</button>
        <button type="button" onClick="inputOp('%')">%</button>
        
        <!-- 第三行 -->
    	<button type="button" onClick="inputNum(1)">1</button>
        <button type="button" onClick="inputNum(2)">2</button>
        <button type="button" onClick="inputNum(3)">3</button>
        <button type="button" class="bnt-color" onClick="inputOp('-')">-</button>
        <button type="button">1/x</button>
        
         <!-- 第四行 -->
    	<button type="button" onClick="inputNum(0)">0</button>
        <button type="button" onClick="plusOrminus()">+/-</button>
        <button type="button" onClick="point()">.</button>
        <button type="button" class="bnt-color" onClick="inputOp('+')">+</button>
        <button type="button" class="bnt-color" onClick="equals()">=</button>
    
    </div>
    
</div>



</body>
</html>

css样式 style.css

<pre name="code" class="css">/* CSS Document */

* {
	margin:0 auto;}

button{
	width:60px;
	height:30px;
	color:#00F;
	border-radius:5px;
}

.bnt-color{
	color:#F00;
}

/* 左上角 M 按钮 */
.bnt-m{
	color:#000;
	width:30px;
	height:30px;
	margin-right:40px;
	margin-left:10px;
	border:solid 1px;
	border-bottom-color:#FFF;
	border-right-color:#FFF;
	border-left-color:#000;
	border-top-color:#000;
}

/* 顶上功能按钮 backspace CE c */
.bnt-top{
	color:#F00;
	width:100px;
	height:30px;
	margin-right:5px;
}


/* 计算器div */
#calculater{
	width:400px;
	height:230px;
	border:#000 solid 1px;
	border-radius:5px;
	padding:15px 15px 15px 15px;
	overflow:hidden;
	margin-top:50px;
	background:#D4D0C8;
}
/* 计算器的所有后代元素 浮动 */
#calculater * {
	float:left;
}

/* 文本框 */
#txt{
	width:400px;
	height:30px;
	font-size:24px;
	text-align:right;
	margin-bottom:10px;
	border-radius:5px;
}

/* 顶上 CE C div */
#topDiv{
	width:400px;
	margin-bottom:10px;
}

/* 左侧 功能 */
#leftDiv{
	width:60px;
}
#leftDiv button{
	margin:2px 2px 2px 2px;
	color:red;
}
/* 数字和计算按钮 */
#rightDiv{
	margin-left:15px;
	width:320px;
}

#rightDiv button{
	margin:2px 2px 2px 2px;
}

js文件 calculater.js

<pre name="code" class="javascript">// JavaScript Document

var  num1=0; //运算的第一个数
var  num2=1; //运算的二个数
var  num3=0; //运算结果
var  op='+'; //运算符
/*
//输入开关
 1 开始输入第一个数 ，清空
 2 正在输入第一个数
 3 开始输入第二个数 ，清空
 4 正在输入第二个数 
*/
var  type=1; 

/* 数字按钮 */<img src="https://img-blog.csdn.net/20140909194513453?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvc2psMTEw/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="" />
function  inputNum(n){
	if(type==1){
		document.getElementById("txt").value="";
		type=2;
	}
	if(type==3){
		document.getElementById("txt").value="";
		type=4;
	}
	
	
	document.getElementById("txt").value+=n;
}

/* 运算符按钮 */
function  inputOp(p){
	//取出文本框的值
	var val=document.getElementById("txt").value;
	//赋予第一个数
	num1=val;
	//开始输入第二个数
	type=3;
	
	//保存运算符
	op=p;
}

/*
	等号
*/
function equals(){
	//取出文本框的值
	num2=document.getElementById("txt").value;
	
	//计算
	num3=eval(num1+op+num2);
	
	if(num3=='Infinity'){
		document.getElementById("txt").value="除数不能为零";
	}else{
	document.getElementById("txt").value=num3;
	}
	
	//开始输入第一个数
	type=1;
}

/**
	C 按钮
*/
function  clearTxt(){
	type=1;
	document.getElementById("txt").value="";
	num1=0;
	num2=1;
	num3=0;
	op='+';
}


/*
	+/- 按钮
*/
function plusOrminus(){
	var  val=document.getElementById("txt").value;
	
	if(val>0){
		document.getElementById("txt").value='-'+document.getElementById("txt").value;
	}else if(val<0){
		document.getElementById("txt").value=Math.abs(val);
	}
	
}


/*
 点
*/
function point(){
	var  val=document.getElementById("txt").value;
	
	/*
		查找 .  找到 返回位置  找不到 返回 -1
	*/
	if(val.indexOf('.')==-1){
		document.getElementById("txt").value+='.';
	}
}

/*
	BACKSPACE
*/
function backspace(){
	var val = document.getElementById('txt');
val.value = val.value.substring(0,val.value.length - 1);
	
	
	}
	
/*平方根*/

function sqrtf(){
	
	//取出文本框的值
	num2=document.getElementById("txt").value;
	
	//计算
	num3=Math.sqrt(num2);
	document.getElementById("txt").value=num3;
	
	}