设计一个简单的网页计算器

最新推荐文章于 2024-04-26 16:47:03 发布

衍生星球

最新推荐文章于 2024-04-26 16:47:03 发布

阅读量1.3k

点赞数 3

分类专栏：笔记文章标签： javascript html 前端

本文链接：https://blog.csdn.net/weixin_45627039/article/details/116637671

版权

笔记专栏收录该内容

7 篇文章 0 订阅

订阅专栏

设计一个简单的网页计算器

一、代码

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>简易网页计算器</title>
  <script>
  function compute()
  {
str1=Number(document.getElementById("txt1").value);
str2=Number(document.getElementById("txt2").value);   comp=document.getElementById("select").value;
var result;
switch(comp)
{
      case "+":comp=str1+str2;break;
      case "-":comp=str1-str2;break;
      case "*":comp=str1*str2;break;
      case "/":
        if(str2==0){
          alert("除数不能为0！");comp='';}
        else{
          comp=str1/str2;}break;
} 
document.getElementById("result").value=comp;
}
</script>
</head>
<body>
<p>
<input type="text" id="txt1"/>
<select name="method" id="select">
    <option value="+">+</option>
    <option value="-">-</option>
    <option value="*">*</option>
    <option value="/">/</option>
</select>
<input type="text" id="txt2"/>
<input type="button" id="b1" value="等于" onclick="compute()" />
<input type="text" id="result"/>
</p>
</body>
</html>

注意:除法要判断除数=0和≠0的情况。

二、运行效果

刚进入时的效果:

进入后输入数字的效果:
输入数字时的效果
加法运算效果:

减法运算效果:

乘法运算效果:

除法运算效果:

此文实现简单的加减乘除
此文运于简单的记录和学习

衍生星球

关注

3
点赞
踩
10

收藏

觉得还不错? 一键收藏
打赏
0
评论
设计一个简单的网页计算器

设计一个简单的网页计算器一、代码<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>简易网页计算器</title> <script> function compute() {str1=Number(document.getElementById("txt1").value);str2=Number(document.getElem
复制链接

扫一扫