JavaScript计算器

来源：互联网发布：恶搞改图软件编辑：程序博客网时间：2024/05/07 22:58

 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 Documentvar  num1=0; //运算的第一个数var  num2=1; //运算的二个数var  num3=0; //运算结果var  op='+'; //运算符/*//输入开关 1 开始输入第一个数 ，清空 2 正在输入第一个数 3 开始输入第二个数 ，清空 4 正在输入第二个数 */var  type=1; /* 数字按钮 */<img src="http://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;}

0 0