1. <head>
  2. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  3. <title>简易计算器</title>
  4. <script language="javascript">
  5. //加法
  6.  
  7. function add(){
  8. var num1=parseInt(document.getElementById("num1").value);
  9. var num2=parseInt(document.getElementById("num2").value);
  10. var result=document.getElementById("result");
  11. result.value=num1+num2;
  12.     }
  13. //减法
  14. function sub(){
  15. var num1=parseInt(document.getElementById("num1").value);
  16. var num2=parseInt(document.getElementById("num2").value);
  17. var result=document.getElementById("result");
  18. result.value=num1-num2;
  19. }
  20. //乘法
  21. function mul(){
  22. var num1=parseInt(document.getElementById("num1").value);
  23. var num2=parseInt(document.getElementById("num2").value);
  24. var result=document.getElementById("result");
  25. result.value=num1*num2;
  26. }
  27. //除法
  28. function div(){
  29. var num1=parseInt(document.getElementById("num1").value);
  30. var num2=parseInt(document.getElementById("num2").value);
  31. var result=document.getElementById("result");
  32. result.value=num1/num2;
  33. }
  34. </script>
  35. <style type="text/css">
  36. body {
  37.     height: 350px;
  38.     width: 300px;
  39.     margin-top: 50px;
  40.     margin-left: 50px;
  41.     line-height: 45px;
  42. }
  43. </style>
  44. </head>
  45. <body>
  46. num1:<input name="num1" type="text" id="num1" /><br />
  47. num2:<input name="num2" type="text" id="num2" /><br />
  48. <input name="add" type="button" value="+"  onclick="add()"/>
  49. <input name="sub" type="button" value="-"  onclick="sub()"/>
  50. <input name="mul" type="button" value="*"  onclick="mul()"/>
  51. <input name="div" type="button" value="/"  onclick="div()"/><br />
  52. result:<input name="result" type="text" id="result" /><br />
  53. </body>
  54. </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. 一个获取文件绝对路径的sh

    脚本里有个获取文件绝对路径的需求,linux里有个很方便的realpath命令,但是mac下没有,甚至readlink -f也跟linux下的表现不同,所以……直接用pwd算了 #!/bin/bash ...

  2. 仿Android网易新闻客户端，并增加水平图片滑动，改进阅读体验

    仿网易新闻Android端APP 主要功能展示和代码实现 差不多花了一周的时间,目前实现的了新闻下的包括头条.体育.娱乐的一系列的新闻展示,以及点击后进入的新闻详情展示. 目前效果 目前效果请访问该网 ...

  3. JavaWeb学习总结

    http://www.cnblogs.com/xdp-gacl/tag/JavaWeb%E5%AD%A6%E4%B9%A0%E6%80%BB%E7%BB%93/ http://www.cnblogs. ...

  4. RosettaNet

    RosettaNet 这一名字源自于 1799 年在埃及发现的 Rosetta Stone .这要追溯到公元前 196 年,该石头是在 Rosetta (Rashid) 镇附近被人发现的,上面用两种不 ...

  5. 项目源码--Android即时通讯IM客户端

    下载源码   技术要点: 1.完整精美客户端UI设计 2.自定义控件的灵活使用 3.UI控件的详细使用 4.即时通讯IM协议的实现 5.完整即时通讯IM客户端实现 6.源码详细的中文注释 …….   ...

  6. archlinux随记

    xrdb -merge .Xresources才能使urxvt的配色显示正常 xpmroot 包含在fvwm包中

  7. Docker 选项和命令

    选项 -D=true|false 使用 debug 模式.默认为 false. -H, --host=[unix:///var/run/docker.sock]: tcp://[host:port]来 ...

  8. Socket 之 API函数介绍

    1.创建套接字──socket() 应用程序在使用套接字前,首先必须拥有一个套接字,系统调用socket()向应用程序提供创建套接字的手段,其调用格式如下: SOCKET PASCAL FAR soc ...

  9. Asp.Net 之 母版页中对控件ID的处理

    一.问题提出 由于总体排版和设计的需要,我们往往创建母版页来实现整个网站的统一性,最近我由于统一性的需要,把原来整个项目单独的页面全部套用了母版页.但是出现了一系列失效错误. 二. 抽象模型 由于整个 ...

  10. A C

    Problem Description Are you excited when you see the title "AC" ? If the answer is YES , A ...