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

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

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

<!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>纯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>

纯javascript代码编写计算器程序的更多相关文章

  1. 横纵方向走马灯滚动，纯javascript代码

    <body onload="beginmarquee()"> <table width="1024" border="0" ...

  2. 如何为javascript代码编写注释以支持智能感知

    在使用Visual Studio做开发的时候,智能感知是非常方便的.从VS2008开始,提供了对javascript的智能感知支持.例如 上述代码中,我们先用document对象的getElement ...

  3. 大数据之路week07--day03（Hadoop深入理解，JAVA代码编写WordCount程序，以及扩展升级）

    什么是MapReduce 你想数出一摞牌中有多少张黑桃.直观方式是一张一张检查并且数出有多少张是黑桃. MapReduce方法则是: 1.给在座的所有玩家中分配这摞牌 2.让每个玩家数自己手中的牌有几 ...

  4. 利用Python代码编写计算器小程序

    import tkinter import tkinter.messagebox import math class JSQ: def __init__(self): #创建主界面 self.root ...

  5. 编写计算器程序学习JS责任链模式

    设计模式中的责任链模式能够很好的处理程序过程的逻辑判断,提高程序可读性. 责任链模式的核心在于责任链上的元素判断能够处理该数据,不能处理的话直接交给它的后继者. 计算器的基本样式: 通过div+css ...

  6. JavaScript 如何编写计算器

    1.JavaScript制作计算器 <!DOCTYPE html> <html> <head> <meta charset="UTF-8" ...

  7. JavaScript代码编写尝试使用Vanilla JS 或者Jquery插件

    From Here: http://vanilla-js.com/ Vanilla JS is a fast, lightweight, cross-platform frameworkfor bui ...

  8. 纯javascript代码实现浏览器图片选择预览、旋转、批量上传

    工作中遇到的业务场景,和同事一起研究了下,主要是为了兼容IE版本 其实就是一些琐碎的知识点在网上搜集下解决方式,然后集成了下,主要有以下点: 1. IE input type=file的图片预览要用I ...

  9. HTML纯javaScript代码写图片轮播

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

随机推荐

  1. hadoop 学习笔记 (十) mapreduce2.0

    MapReduce的特色---不擅长的方面 >实时计算 像mysql一样,在毫秒级或者秒级内返回结果 >流式计算 Mapreduce的输入数据时静态的,不能动态变化 MapReduce自身 ...

  2. 10个WordPress增强型编辑器大检阅

    Wordpress之所以优秀不在于其本身,而在于无数的插件开发者和性能优化人员.使用过Wordpress的人都知道,WP本身的编辑器极其简陋,就连简单的表格编辑也没有,可能吧这篇文章将介绍一些免费的增 ...

  3. 精心挑选的12款优秀 jQuery Ajax 分页插件和教程

    在这篇文章中,我为大家收集了12个基于 jQuery 框架的 Ajax 分页插件,这些插件都提供了详细的使用教程和演示.Ajax 技术的出现使得 Web 项目的用户体验有了极大的提高,如今借助优秀的  ...

  4. python学习随笔

    1 高阶函数的使用: import math def add(x, y, f): return f(x) + f(y) sq = math.sqrt print add(25, 9,sq) 2. ma ...

  5. Milk Patterns

    poj3261:http://poj.org/problem?id=3261 题意:给定一个字符串,求至少出现k 次的最长重复子串,这k 个子串可以重叠. 题解:还是用后缀数组,求H和后缀数组,然后二 ...

  6. WebService：设置服务器提供SOAP1.2的服务

    1,访问通过cxf发布的服务 (1)与之前一样,同样可以通过在本地通过wsdl文件和命令行生成Java文件来访问服务. 但是我们既然使用了cxf发布,就要通过cxf的工具生成访问.可以通过cxf目录的 ...

  7. Keil C51程序调试过程

    用Keil C51编写程序时,经常需要调试,如果不是经常用这个软件的话,很容易忘记这些调试步骤,现在举一个例子“验证延迟函数delay()使其延迟的时间为500ms”说明. 源程序写完后,就可以调试了 ...

  8. [FJSC2014]折线统计

    [题目描述] 二维平面上有n 个点(xi, yi),现在这些点中取若干点构成一个集合S,对它们按照x 坐标排序,顺次连接,将会构成一些连续上升.下降的折线,设其数量为f(S).如下图中,1->2 ...

  9. tomcat修改默认web目录

    有两种方法: 1.tomcat目录下的conf文件夹, server.xml <Context path="" docBase="d:\myapp" de ...

  10. 【转】windows常用消息大全（系统消息、通告消息、用户消息）

    原文网址:http://blog.csdn.net/nupt123456789/article/details/7370562 附录A Windows 常用消息大全 表A-1  Windows消息分布 ...