JavaScript四则运算计算器
2024-08-28 13:11:56
直接上代码:
首先是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>
复习复习复习
最新文章
- iOS分析UI利器——Reveal简单使用
- JDK源码解读之toUnsignedString
- php的数据访问
- 黄聪:get_posts 函数 | wordpress
- tab选项卡
- Android开发学习之LauncherActivity开发启动的列表
- 【ural1297】 Palindrome
- salesforce零基础学习(七十二)项目中的零碎知识点小总结(一)
- 【Django】 初步学习
- [Other] Nuget 构建服务器与常用命令
- 【原创】大叔经验分享(44)hdfs副本数量
- 一道很经典的 BFS 题
- php trait使用
- Linux定时器crontab的使用
- 【六】php 错误异常处理
- windows设置程序开机自启动
- Hadoop概念学习系列之Java调用Shell命令和脚本,致力于hadoop/spark集群(三十六)
- istio 服务地图
- 【进阶修炼】&mdash;&mdash;改善C#程序质量(5)
- web.xml之context-param,listener,filter,servlet加载顺序及其周边
热门文章
- Hive 正则匹配函数
- RHEL 7 安装MariaDB
- Atitit.跨语言数据库db&#160;&#160;api兼容性&#160;jdbc&#160;odbc&#160;ado&#160;oledb&#160;增强方案
- C++学习笔记34 模版的原理
- Unix 环境高级编程
- C++避免内存泄漏的一种技巧
- 定时器(setTimeout/setInterval)调用带参函数失效解决方法
- 简单介绍一下vue2.0
- Spring Boot MongoDB JPA 简化开发
- web开发之web 验证码--- webqq 机器人