利用js语言编写简易的计算器!

原创 2018年04月15日 17:27:31

利用js 语言编写简易的计算器,首先讲解一下思路

首先用table标签设计表格,再就是用script标签设计表格的格式

用 rowspan  colspan  向上向下合并单元格  对单元格格式进行编写

   以下是编写简易计算器:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>简易计算器</title>
</head>
<script type="text/javascript">
       function jisuan(jy){
            var num1=document.getElementById('num1').value;
            var num2=document.getElementById('num2').value;
            var result="";
            switch(jy){
               case"+":
                  result=parseInt(num1)+parseInt(num2);
                  break;
               case"-":
                  result=parseInt(num1)-parseInt(num2);
                  break;
               case"*":
                  result=parseInt(num1)*parseInt(num2);
                  break;
               case"/":
                  result=parseInt(num1)/parseInt(num2);
                  break;
            }
           document.getElementById('result').value=result;
       }
</script>
<style type="text/css">
   table{
  width:500px;
  margin:10px auto;
  border:1px solid #CCF;
  border-collapse:collapse;
   }
   td,th{
  border:1px solid #CCF;
  font-size:20px;
 
   }
   tr,td{
   height:40px;
      font-size: 16px;
   }
   input[type=text]{
  height:20px;
  width:220px;
   }
   input[type=button]{
  height:30px;
  width:66px;
  background:blue;
  color:white;
  border:0;
  margin-top:10px;
     margin-left: 10px;
   }
</style>


<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="jisuan('+')" />
      <br />
      <input type="button" value='-' onclick="jisuan('-')" />
      <br />
      <input type="button" value='*' onclick="jisuan('*')" />
      <br />
      <input type="button" value='/' onclick="jisuan('/')" />
      <br /></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>
</table>
</body>
</html>

自己用C语言写的简单计算器,用堆栈实现

  • 2014年10月30日 13:34
  • 8KB
  • 下载

HTML&&JavaScript实现一个简单的计算器

jisuan                      function yunsuan(fh){                              var num_1_value=d...
  • qq_32914323
  • qq_32914323
  • 2016-02-19 17:28:40
  • 231

switch case 语句 简易计算器(c语言版

#include #include using namespace std;int main(){ int a,b,d,e=1; char c; printf("请输入两个数,中间加上运算符号,...
  • duyongji5656
  • duyongji5656
  • 2010-04-18 09:26:00
  • 3966

自己用Javascript和Html写的一个简单计算器

  • 2008年11月24日 15:46
  • 2KB
  • 下载

设计一个简单的四则计算器

c# using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; ...
  • xianfajushi
  • xianfajushi
  • 2014-11-01 20:41:45
  • 2786

如何使用JS编写一个简单的计算器

使用js实现一个简单地计算器,解决js计算精度问题
  • luojiandecsdn
  • luojiandecsdn
  • 2016-03-09 18:51:49
  • 5044

用JavaScript实现简单的计算器

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

用C语言编写一个简单的“+”“”-“”*“/”计算器

/* Note:Your choice is C IDE */ #include "stdio.h" void main() {     double a,b,d;     char c; ...
  • qq_41305483
  • qq_41305483
  • 2017-12-07 14:47:40
  • 413

利用MFC制作的一个简单的加法计算器

  • 2015年05月07日 15:35
  • 3.49MB
  • 下载

NetBeans实现的简单计算器

JAVA只是学了两个周的,渣作!!!! 一、首先写一个计算加减乘除方法的类 /**  *计算加减乘除方法的类  * @author   */ public class Suan...
  • u010042585
  • u010042585
  • 2015-09-15 23:06:34
  • 791
收藏助手
不良信息举报
您举报文章:利用js语言编写简易的计算器!
举报原因:
原因补充:

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