前端html基础——计算器

最新推荐文章于 2024-05-30 10:46:58 发布

hello_dengdai

最新推荐文章于 2024-05-30 10:46:58 发布

阅读量1.5k

点赞数

分类专栏： web前端文章标签： html基础

本文链接：https://blog.csdn.net/hello_dengdai/article/details/81059464

版权

web前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
<title>计算器</title>
<meta charset="utf-8">
</head>
<body>
<input type="text" name="num1" id="num1">
<select id="sele">
<option value="1000">+</option>
<option value="1">-</option>
<option value="2">*</option>
<option value="3">/</option>
<option value="4">%</option>
</select>
<input type="text" name="num2" id="num2">
<input type="button" id="bt" value="计算">

<script type="text/javascript">
//先获取
var Num1 = document.getElementById('num1');
var Num2 = document.getElementById('num2');
var selected = document.getElementById('sele');
var bt = document.getElementById('bt');

bt.onclick = function(){
var num1 = parseFloat(Num1.value);
var num2 = parseFloat(Num2.value);
var test = selected.options[selected.selectedIndex].value; //点击然后获取option的value 值
var res; //声明一个变量用来存放结果
switch(test){
case '0':
res = num1 + num2;
break;
case '1':
res = num1 - num2;
break;
case '2':
res = num1 * num2;
break;
case '3':
res = num1 / num2;
break;
case '4':
res = num1 % num2;
break;

}
alert(res);
}

// 获取标签
// input获取标签的同时还要获取到你输入的值这个值就是我们的value
//运算的时候还要考虑到数据类型不一样可能得不到想要的结果
//还要获取option的value值
//然后对 option 进行 switch 多种情况判断

</script>
</body>
</html>

hello_dengdai

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端html基础——计算器

&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt; &lt;title&gt;计算器&lt;/title&gt; &lt;meta charset="utf-8"&gt;&lt;/head&gt;&lt;body&gt; &lt;input type="text" name="num1
复制链接

扫一扫