直接上代码:

首先是HTML代码

 <form>
第一个数字:<br>
<input type="text" id="num1">
<br>
<br>
第二个数字:<br>
<input type="text" id="num2">
<br>
<button id="add">+</button>
<button id="subtract">-</button>
<button id="multiply">*</button>
<button id="divide">/</button>
</form>

关于在js中计算,我写了两种常见方案

第一种是比较傻瓜式计算

 <script type="text/javascript">
//获取加号按钮
var addBtn = document.getElementById('add');
var subtractBtn = document.getElementById('subtract');
var multiplyBtn = document.getElementById('multiply');
var divideBtn = document.getElementById('divide'); //为按钮添加点击方法
addBtn.onclick = function(){
var a = document.getElementById('num1').value;
var b = document.getElementById('num2').value;
var a_int = parseInt(a, 10);
var b_int = parseInt(b, 10);
//调用加法
var result = addition(a_int,b_int);
alert(result);
}
subtractBtn.onclick = function(){
var a = document.getElementById('num1').value;
var b = document.getElementById('num2').value;
var a_int = parseInt(a, 10);
var b_int = parseInt(b, 10);
//调用减法
var result = substraction(a_int,b_int);
alert(result);
}
multiplyBtn.onclick = function(){
var a = document.getElementById('num1').value;
var b = document.getElementById('num2').value;
var a_int = parseInt(a, 10);
var b_int = parseInt(b, 10);
//调用乘法
var result = multiplication(a_int,b_int);
alert(result);
}
divideBtn.onclick = function(){
var a = document.getElementById('num1').value;
var b = document.getElementById('num2').value;
var a_int = parseInt(a, 10);
var b_int = parseInt(b, 10);
//调用减法
var result = division(a_int,b_int);
alert(result);
}
//构造函数
function addition(x, y){
return x + y;
}
function substraction(x, y){
return x - y;
}
function multiplication(x, y){
return x * y;
}
function division(x, y){
if(y==0){
alert('0不能做除数');
return;
} else {
return x / y;
}
}
</script>

另一种,是局部变量和全局变量的应用

<script type="text/javascript">
//获取加号按钮
var addBtn = document.getElementById('add');
var subtractBtn = document.getElementById('subtract');
var multiplyBtn = document.getElementById('multiply');
var divideBtn = document.getElementById('divide'); //定义两个全局变量
var a_int;
var b_int; //为按钮添加点击方法
addBtn.onclick = function(){
getInputNum();
//调用加法
var result = addition(a_int,b_int);
alert(result);
}
subtractBtn.onclick = function(){
getInputNum();
//调用减法
var result = substraction(a_int,b_int);
alert(result);
}
multiplyBtn.onclick = function(){
getInputNum();
//调用乘法
var result = multiplication(a_int,b_int);
alert(result);
}
divideBtn.onclick = function(){
getInputNum();
//调用减法
var result = division(a_int,b_int);
alert(result);
}
function getInputNum(){
var a = document.getElementById('num1').value;
var b = document.getElementById('num2').value;
//将转化后的数字赋值给全局变量
a_int = parseInt(a, 10);
b_int = parseInt(b, 10);
}
//构造函数,加减乘除
function addition(x, y){
return x + y;
}
function substraction(x, y){
return x - y;
}
function multiplication(x, y){
return x * y;
}
function division(x, y){
if(y==0){
alert('0不能做除数');
return;
} else {
return x / y;
}
}
</script>

复习复习复习

最新文章

  1. iOS分析UI利器——Reveal简单使用
  2. JDK源码解读之toUnsignedString
  3. php的数据访问
  4. 黄聪:get_posts 函数 | wordpress
  5. tab选项卡
  6. Android开发学习之LauncherActivity开发启动的列表
  7. 【ural1297】 Palindrome
  8. salesforce零基础学习(七十二)项目中的零碎知识点小总结(一)
  9. 【Django】 初步学习
  10. [Other] Nuget 构建服务器与常用命令
  11. 【原创】大叔经验分享(44)hdfs副本数量
  12. 一道很经典的 BFS 题
  13. php trait使用
  14. Linux定时器crontab的使用
  15. 【六】php 错误异常处理
  16. windows设置程序开机自启动
  17. Hadoop概念学习系列之Java调用Shell命令和脚本,致力于hadoop/spark集群(三十六)
  18. istio 服务地图
  19. 【进阶修炼】&mdash;&mdash;改善C#程序质量(5)
  20. web.xml之context-param,listener,filter,servlet加载顺序及其周边

热门文章

  1. Hive 正则匹配函数
  2. RHEL 7 安装MariaDB
  3. Atitit.跨语言数据库db&#160;&#160;api兼容性&#160;jdbc&#160;odbc&#160;ado&#160;oledb&#160;增强方案
  4. C++学习笔记34 模版的原理
  5. Unix 环境高级编程
  6. C++避免内存泄漏的一种技巧
  7. 定时器(setTimeout/setInterval)调用带参函数失效解决方法
  8. 简单介绍一下vue2.0
  9. Spring Boot MongoDB JPA 简化开发
  10. web开发之web 验证码--- webqq 机器人