javascript的计算器代码

原创 2018年04月15日 18:02:31

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>简易计算器</title>
<style type="text/css">
   table{
    width: 400px;
    height: 250px;
    border:1px solid #e1e1e1;
    border-collapse: collapse;
    margin: 10px auto;
   }
   td{
   border:1px solid #e1e1e1;
   padding-left: 4px;
   }
   th{
            font-size: 20px;
  
   }
   input[type=text]{
   width: 200px;
   height: 25px;
   border:1px solid #a2c5ec;
   margin-left: 10px;
   }
   input[type=button]{
   width: 60px;
   height: 30px;
   background: #a2c5ec;
   margin-left: 6px;
   margin-top: 5px;
   border:1px solid #a2c5ec;
   }
</style>
<script type="text/javascript">
   function computer(op){
    var num1=document.getElementById('num1').value;
         var num2=document.getElementById('num2').value;
         var n1=parseInt(num1);
         var n2=parseInt(num2);
         var res='';
         switch(op){
          case '+':
                res=n1+n2;
                break;
                case '-':
                res=n1-n2;
                break;
                case '*':
                res=n1*n2;
                break;
                case '/':
                res=n1/n2;
                break;
                default:
         }
         document.getElementById('result').value=res;
   }
</script>
</head>
<body>
<table>
<tr>
<th colspan="3">简易计算器</th>
</tr>
<tr>
<td>第一个数</td>
<td><input type="text" id="num1"></td>
<td rowspan="4">
<input type="button" value="+" onclick="computer('+')"><br>
   <input type="button" value="-" onclick="computer('-')"><br>
   <input type="button" value="*" onclick="computer('*')"><br>
   <input type="button" value="/" onclick="computer('/')">
</td>
</tr>
<tr>
<td>第二个数</td>
<td><input type="text" id="num2"></td>
</tr>
<tr>
<td>结果</td>
<td><input type="text" id="result"></td>
</tr>
<tr>
<td colspan="2">运算方法:先两个数,在选择算法</td>
</tr>
</table>
</body>
</html>

JavaScript编写简易计算器

一、前言 在看DRP视频的过程中,再次复习到了HTML、CSS、JavaScript。下面做一个简易计算器来复习一下相关知识。 二、HTML应用 首先呢,就是使用HTML画页面,咱们应该先把计算器的大...
  • qq_26545305
  • qq_26545305
  • 2017年02月14日 16:30
  • 957

javascript + html 入门之实现一个网页计算器

1. 前言最近学习javascript, 正好看到一个网页计算器的列子, 于是顺手实现了一下, 这里做一些记录2. 实现效果3. 实现代码 Calculator ...
  • zhyh1435589631
  • zhyh1435589631
  • 2016年05月29日 00:43
  • 2068

网页版计算器的实现(js实现计算功能)

今天带大家做一个网页版的计算器,页面使用js完成计算,界面的效果如下:
  • u011692041
  • u011692041
  • 2016年01月26日 14:25
  • 14830

JavaScript实现计算器功能

代码如下: New Document var flag = false; function display(val){ var display = document.getE...
  • suwu150
  • suwu150
  • 2016年11月07日 21:23
  • 1002

原生JavaScript实现的简易计算器

最近一直没有写博客 因为一直忙着预习考试内容 什么偏微分啊、数值分析啊、计算机图形学啊、信息论… 在未来一个月可能会很忙 整理前端的频率可能就没那么高了还是说正题 昨天晚上用JavaScri...
  • q1056843325
  • q1056843325
  • 2016年11月29日 20:54
  • 8461

用JavaScript实现简单的计算器

html lang="en"> head> meta charset="UTF-8"> title>计算器title> link rel="stylesheet" type="...
  • baidu_25845567
  • baidu_25845567
  • 2016年06月09日 15:33
  • 783

一个基于JavaScript的简单网页计算器

一个基于JavaScript的简单网页计算器,真的很简单。 效果如下: A simple Calculator .number{ ...
  • Youyou_0826
  • Youyou_0826
  • 2017年04月20日 14:26
  • 1763

JavaScript实现高级科学计算器库

代码不贴了,主要讲解一下思路。 //BNF定义: //exprN代表优先级>=N的算符表达式 expr := expr20 expr100 := value //数值常量优先...
  • cteng
  • cteng
  • 2015年07月02日 21:51
  • 1236

一个JavaScript实现的贷款计算器

基于JavaScript实现的贷款计算器:  >   html>   head>       title>JavaScript Loan Calculatortitle>    ...
  • Winterto1990
  • Winterto1990
  • 2015年10月04日 20:16
  • 2594

JS编写的科学计算器

最近半个月编写了一个JS+CSS+HTML的网页计算器,从最初的具有简陋界面的简单计算器改版到最终具有科学/标准计算器转换功能并且界面非常友好的计算器,收获良多!总的来说,代码简单,通俗易读,下面贴上...
  • sweet___smile
  • sweet___smile
  • 2015年12月28日 10:10
  • 5067
收藏助手
不良信息举报
您举报文章:javascript的计算器代码
举报原因:
原因补充:

(最多只允许输入30个字)