你的位置:首页 > Java教程

[Java教程]纯javascript代码编写计算器程序


今天来分享一下用纯javascript代码编写的一个计算器程序,很多行业都能用到这个程序,例如做装修预算、贷款利率等等。

首先来看一下完成后的效果:

 

纯js编写计算器程序

具体代码如下:(关注我的博客,及时获取最新WEB前端开发源代码)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html ="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>纯javascript代码编写计算器程序_赵一鸣(www.zymseo.com)</title><style type="text/css">*{margin:0px;padding:0px}table{width:300px;margin:100px auto}td{height:30px;text-align:center;line-height:30px;border:1px solid #ccc;font-size:14px}input{float:left;margin-left:30px;display:inline}#jia,#jian,#cheng,#chu{width:30px}</style><script type="text/javascript">//以下所有的注释通用语所有的加减乘除算法。//加法运算function jia(){  //定义变量a,b,c  var x,y,z;  //通过document分别获取x,y的值  x=document.getElementById("num1").value;  y=document.getElementById("num2").value;  //修改x,y的字符类型,并且得到z的值  z=parseInt(x)+parseInt(y);  //将z的值赋给id=result  document.getElementById("result").value=z;};//减法运算function jian(){  var x,y,z;  x=document.getElementById("num1").value;  y=document.getElementById("num2").value;  z=parseInt(x)-parseInt(y);  document.getElementById("result").value=z;};//乘法运算function cheng(){  var x,y,z;  x=document.getElementById("num1").value;  y=document.getElementById("num2").value;  z=parseInt(x)*parseInt(y);  document.getElementById("result").value=z;};//除法运算function chu(){  var x,y,z;  x=document.getElementById("num1").value;  y=document.getElementById("num2").value;  z=parseInt(x)/parseInt(y);  document.getElementById("result").value=z;};</script></head><body><table cellpadding="0" cellspacing="0">  <tr>    <td colspan="2">计算器</td>  </tr>  <tr>    <td>数字一</td>    <td><input type="text" id="num1" name="num1"></td>  </tr>  <tr>    <td>数字二</td>    <td><input type="text" id="num2" name="num2"></td>  </tr>  <tr>    <td>结果</td>    <td><input type="text" id="result" name="result"></td>  </tr>  <tr>    <td colspan="2">      <input type="button" name="jia" id="jia" value="+" onclick="jia()">      <input type="button" name="jian" id="jian" value="-" onclick="jian()">      <input type="button" name="cheng" id="cheng" value="×" onclick="cheng()">      <input type="button" name="chu" id="chu" value="/" onclick="chu()">    </td>  </tr></table></body></html>