<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>简易计算器</title>

<script language="javascript">

//加法

function add(){

var num1=parseInt(document.getElementById("num1").value);

var num2=parseInt(document.getElementById("num2").value);

var result=document.getElementById("result");

result.value=num1+num2;

    }

//减法

function sub(){

var num1=parseInt(document.getElementById("num1").value);

var num2=parseInt(document.getElementById("num2").value);

var result=document.getElementById("result");

result.value=num1-num2;

}

//乘法

function mul(){

var num1=parseInt(document.getElementById("num1").value);

var num2=parseInt(document.getElementById("num2").value);

var result=document.getElementById("result");

result.value=num1*num2;

}

//除法

function div(){

var num1=parseInt(document.getElementById("num1").value);

var num2=parseInt(document.getElementById("num2").value);

var result=document.getElementById("result");

result.value=num1/num2;

}

</script>

<style type="text/css">

body {

    height: 350px;

    width: 300px;

    margin-top: 50px;

    margin-left: 50px;

    line-height: 45px;

}

</style>

</head>

<body>

num1:<input name="num1" type="text" id="num1" /><br />

num2:<input name="num2" type="text" id="num2" /><br />

<input name="add" type="button" value="+"  onclick="add()"/>

<input name="sub" type="button" value="-"  onclick="sub()"/>

<input name="mul" type="button" value="*"  onclick="mul()"/>

<input name="div" type="button" value="/"  onclick="div()"/><br />

result:<input name="result" type="text" id="result" /><br />

</body>

</html>

In a other way：

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>简易计算器</title>
<script language="javascript">
//加法

function add(){
var num1=parseInt(document.getElementById("num1").value);
var num2=parseInt(document.getElementById("num2").value);
var result=document.getElementById("result");
result.value=num1+num2;
}
//减法
function sub(){
var num1=parseInt(document.getElementById("num1").value);
var num2=parseInt(document.getElementById("num2").value);
var result=document.getElementById("result");
result.value=num1-num2;
}
//乘法
function mul(){
var num1=parseInt(document.getElementById("num1").value);
var num2=parseInt(document.getElementById("num2").value);
var result=document.getElementById("result");
result.value=num1*num2;
}
//除法
function div(){
var num1=parseInt(document.getElementById("num1").value);
var num2=parseInt(document.getElementById("num2").value);
var result=document.getElementById("result");
result.value=num1/num2;
}
</script>
<style type="text/css">
body {
height: 350px;
width: 300px;
margin-top: 50px;
margin-left: 50px;
line-height: 45px;
}
</style>
</head>
<body>
num1:<input name="num1" type="text" id="num1" /><br />
num2:<input name="num2" type="text" id="num2" /><br />
<input name="add" type="button" value="+" onclick="add()"/>
<input name="sub" type="button" value="-" onclick="sub()"/>
<input name="mul" type="button" value="*" onclick="mul()"/>
<input name="div" type="button" value="/" onclick="div()"/><br />
result:<input name="result" type="text" id="result" /><br />
</body>

JavaScript之简易计算器的更多相关文章

  1. JavaScript简易计算器

    JavaScript一种直译式脚本语言,是一种动态类型.弱类型.基于原型的语言,内置支持类型.它的解释器被称为JavaScript引擎,为浏览器的一部分,广泛用于客户端的脚本语言,最早是在HTML(标 ...

  2. 自己做的javascript简易计算器

    html <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF- ...

  3. 前端 JavaScript 实现一个简易计算器

    前端使用 JavaScript 实现一个简易计算器,没有难度,但是里面有些小知识还是需要注意的,算是一次基础知识回顾吧. 题目 实现一个简易版的计算器,需求如下: 1.除法操作时,如果被除数为0,则结 ...

  4. 剖析简易计算器带你入门微信小程序开发

    写在前面,但是重点在后面 这是教程,也不是教程. 可以先看Demo的操作动图,看看是个什么玩意儿,GitHub地址(https://github.com/dunizb/wxapp-sCalc) 自从微 ...

  5. 使用HTML+CSS，jQuery编写的简易计算器

    <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding= ...

  6. 使用HTML+CSS，jQuery编写的简易计算器后续（添加了键盘监听）

    之前发布了一款简易的计算器,今天做了一下修改,添加了键盘监听事件,不用再用鼠标点点点啦 JS代码: var yunSuan = 0;// 运算符号,0-无运算;1-加法;2-减法;3-乘法;4-除法 ...

  7. 使用html+css+js实现简易计算器

    使用html+css+js实现简易计算器, 效果图如下: html代码如下: <!DOCTYPE html> <html lang="en"> <he ...

  8. 微信小程序-简易计算器

    代码地址如下:http://www.demodashi.com/demo/14210.html 一.前期准备工作 软件环境:微信开发者工具 官方下载地址:https://mp.weixin.qq.co ...

  9. 用js制作简易计算器及猜随机数字游戏

    <!doctype html><html><head> <meta charset="utf-8"> <title>JS ...

随机推荐

  1. hadoop备战：hadoop,hbase兼容版本号汇总

    Hbase的安装须要考虑Hadoop的版本号,即兼容性.有不足的希望能指出. 下面考究官网得到的,关于hadoop版本号和hbase版本号可到下面网址中下载:http://mirror.bit.edu ...

  2. JQueryMobile页面跳转参数的传递解决方案

    在JQueryMobile开发手机端应用使用可能需要考虑相关的页面跳转带来的参数问题.因为JQueryMobile其实也是HTML5实践的结果.HTML5中有localStorage和sessionS ...

  3. UVA 12897 Decoding Baby Boos 暴力

    Decoding Baby Boos Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://acm.hust.edu.cn/vjudge/contes ...

  4. ASP.NET项目从VS2008迁移至VS2010或2012编译不过的问题

    这次将一个VS2008编写的网站迁移至VS2010或者2012下都编译不通过,统统报相同的错误:缺少System.Linq引用,缺少System.Xml.Linq引用,但是明明有引用啊,引用DLL我都 ...

  5. innobackupex 恢复实验

    [root@localhost backup]# pwd /backup [root@localhost backup]# ll 总用量 drwxr root root Jul : basebacku ...

  6. 基于jquery左侧带选项卡切换的焦点图

    今天给大家分享一款基于jquery左侧带选项卡切换的焦点图.这款焦点图左侧有短标题,单击切换并显示长标题.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class ...

  7. 两种方式连接mysql

    一种方式:运行命令符后,mysql -u root -p(如果不成功,说明环境变量没配,命令行到 mysql的bin目录下,然后运行mysql -u root -p 应该成功了) 另外一种方式,直接有 ...

  8. nmon的安装以及使用

    在做性能的时候都需要监控服务器的各项资源,这里使用的是nmon,小巧,而且比较好用,记录安装过程 在linux下创建nmon目录 方便放文件 mkdir /usr/local/nmon cd /usr ...

  9. hadoop2 作业执行过程之reduce过程

    reduce阶段就是处理map的输出数据,大部分过程和map差不多 //ReduceTask.run方法开始和MapTask类似,包括initialize()初始化,根据情况看是否调用runJobCl ...

  10. IOS 开发过程中的 消息通知 小红点

    大致分为两种方法:系统方法和自定义方法 系统方法: 系统自带的方法可以显示具体的消息数量,这个就是苹果设备常见的小红点.实现思路如下: NSArray *tabBarItems = self.navi ...