JavaScript之简易计算器
<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之简易计算器的更多相关文章
- JavaScript简易计算器
JavaScript一种直译式脚本语言,是一种动态类型.弱类型.基于原型的语言,内置支持类型.它的解释器被称为JavaScript引擎,为浏览器的一部分,广泛用于客户端的脚本语言,最早是在HTML(标 ...
- 自己做的javascript简易计算器
html <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF- ...
- 前端 JavaScript 实现一个简易计算器
前端使用 JavaScript 实现一个简易计算器,没有难度,但是里面有些小知识还是需要注意的,算是一次基础知识回顾吧. 题目 实现一个简易版的计算器,需求如下: 1.除法操作时,如果被除数为0,则结 ...
- 剖析简易计算器带你入门微信小程序开发
写在前面,但是重点在后面 这是教程,也不是教程. 可以先看Demo的操作动图,看看是个什么玩意儿,GitHub地址(https://github.com/dunizb/wxapp-sCalc) 自从微 ...
- 使用HTML+CSS，jQuery编写的简易计算器
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding= ...
- 使用HTML+CSS，jQuery编写的简易计算器后续（添加了键盘监听）
之前发布了一款简易的计算器,今天做了一下修改,添加了键盘监听事件,不用再用鼠标点点点啦 JS代码: var yunSuan = 0;// 运算符号,0-无运算;1-加法;2-减法;3-乘法;4-除法 ...
- 使用html+css+js实现简易计算器
使用html+css+js实现简易计算器, 效果图如下: html代码如下: <!DOCTYPE html> <html lang="en"> <he ...
- 微信小程序-简易计算器
代码地址如下:http://www.demodashi.com/demo/14210.html 一.前期准备工作 软件环境:微信开发者工具 官方下载地址:https://mp.weixin.qq.co ...
- 用js制作简易计算器及猜随机数字游戏
<!doctype html><html><head> <meta charset="utf-8"> <title>JS ...
随机推荐
- PL/pgSQL学习笔记之八
http://www.postgresql.org/docs/9.1/static/plpgsql-declarations.html 另外一种声明 PL/pgSQL 函数的方法是使用 returns ...
- BZOJ 1083: [SCOI2005]繁忙的都市 kruskal
1083: [SCOI2005]繁忙的都市 题目连接: http://www.lydsy.com/JudgeOnline/problem.php?id=1083 Description 城市C是一个非 ...
- BZOJ 1497: [NOI2006]最大获利 最小割
1497: [NOI2006]最大获利 题目连接: http://www.lydsy.com/JudgeOnline/problem.php?id=1497 Description 新的技术正冲击着手 ...
- Codeforces Beta Round #12 (Div 2 Only) D. Ball sort/map
D. Ball Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://codeforces.com/problemset/problem/12/D D ...
- 关于C#中派生类调用基类构造函数的理解
(1)当基类中没有自己编写的构造函数时,派生类默认条用基类的构造函数 (2)当基类中有自己编写的构造函数时,要在基类中添加无参的构造函数 public class MyBaseClass { publ ...
- windows 32位系统中进程最大可用内存空间为3GB （转）
http://msdn.microsoft.com/zh-cn/library/ms189334.aspx 进程地址空间 所有 32 位应用程序都有 4 GB 的进程地址空间(32 位地址最多可以映射 ...
- DLX舞蹈链 hdu5046
题意: 在N个城市选出K个城市,建飞机场(1 ≤ N ≤ 60,1 ≤ K ≤ N),N个城市给出坐标,选择这K个机场,使得从城市到距离自己最近的机场的 最大的距离 最小. 输出这个最小值. 思路: ...
- 大礼包！ANDROID内存优化(大汇总)
写在最前: 本文的思路主要借鉴了2014年AnDevCon开发者大会的一个演讲PPT,加上把网上搜集的各种内存零散知识点进行汇总.挑选.简化后整理而成. 所以我将本文定义为一个工具类的文章,如果你在A ...
- 关于View端
View--------------Request 1 URL vs n View 同一个URL可以对应多个View, HTML(通过Request请求获得) 例如SAO项目中的step1--> ...
- 使用Thread类可以创建和控制线程
1.创建线程 static void Main(string[] args) { /* Thread类 * 创建控制线程 * 其构造函数接受ThreadStart和ParameterizedThrea ...