<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. uva 11324 The Largest Clique(强连通分量缩点+DAG动态规划)

    http://uva.onlinejudge.org/index.php?option=com_onlinejudge&Itemid=8&category=25&page=sh ...

  2. Educational Codeforces Round 7 C. Not Equal on a Segment 并查集

    C. Not Equal on a Segment 题目连接: http://www.codeforces.com/contest/622/problem/C Description You are ...

  3. HDU 5573 Binary Tree 构造

    Binary Tree 题目连接: http://acm.hdu.edu.cn/showproblem.php?pid=5573 Description The Old Frog King lives ...

  4. hdu 4493 Tutor 水题

    Tutor Time Limit: 20 Sec  Memory Limit: 256 MB 题目连接 http://acm.hdu.edu.cn/showproblem.php?pid=4493 D ...

  5. 【项目实例】使用C#开发纽曼USB来电通来电弹屏客户端小结

    基于CRM客户和咨询者的普遍需求,老板决定在CRM系统上加入来电弹屏功能,所谓来电弹屏,就是当一个电话打入时,电脑会弹出该电话号码对应的客户.联系人或者供应商详细信息,如果是新号码,则添加一个新的客户 ...

  6. Android平台上长连接的实现

    Android 平台上长连接的实现 为了不让 NAT 表失效,我们需要定时的发心跳,以刷新 NAT 表项,避免被淘汰. Android 上定时运行任务常用的方法有2种,一种方法用 Timer,另一种是 ...

  7. [Express] Level 1: First Step

    Installing Express Let's start building our new Express application by installing Express. Type the ...

  8. FreeMarker中文API手冊(完整)

    FreeMarker概述 FreeMarker是一个模板引擎,一个基于模板生成文本输出的通用工具,使用纯Java编写 FreeMarker被设计用来生成HTML Web页面,特别是基于MVC模式的应用 ...

  9. h5 -1

    <header></header> 页眉 主要用于页面的头部的信息介绍,也可用于板块头部 <hgroup></hgroup> 页面上的一个标题组合 一个 ...

  10. Web service是什么？（转）

    我认为,下一代互联网软件将建立在Web service(也就是"云")的基础上. 我把学习笔记和学习心得,放到网志上,欢迎指正. 今天先写一个最基本的问题,Web service到 ...