html+js+css简单计算器实现

最新推荐文章于 2024-08-12 18:48:17 发布

wujiajia2017scnu

最新推荐文章于 2024-08-12 18:48:17 发布

阅读量2.1k

点赞数 2

分类专栏： HTML css js

本文链接：https://blog.csdn.net/qq_36090423/article/details/81915918

版权

HTML css js 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

需求：在页面上实现图1的效果。编辑工具 pycharm

这个页面的实现主要包含三个部分：如图2所示用到的文件是红色区域

在JS文件下新建06caclu.html, 在css文件下新建06caclu.css，在js文件下新建06caclu.js。具体代码如下：

---------------------------------------------这是06caclu.html的内容----------------------------------------------------------------------

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>计算器</title>
    <link rel="stylesheet" href="css/06caclu.css">  <!--外部css样式-->
    <script src="js/06caclu.js"></script>          <!-- 外部js事件-->
</head>
<body>
<input type="text" id="in1">          <!--input输入框-->
<select name="" id="op" >            <!-- select下拉按钮-->
    <option value="+">+</option>      <!--option是下来的选项-->
    <option value="-">-</option>
    <option value="*">*</option>
    <option value="/">/</option>
</select>
<input type="text" id="in3">
<button onclick="caclu()">计算</button>  <!-- button计算按钮-->
</body>
</html>

--------------------------------------------这是06caclu.js----------------------------------------------------------------------------------------------------------------

function caclu() {   /*定义caclu函数*/
    var in1 = document.getElementById('in1');     /*document.getElementById获取html标签元素*/
    var op = document.getElementById('op');
    var in3 = document.getElementById('in3');
    var in01 =parseFloat(in1.value);           /* in1.value获取标签的值，并且转换为浮点型*/
    var in03 =parseFloat(in3.value);
    switch (op.value){                         /* switch判断是哪个运算符号*/
        case "+":
            alert(in01+ in03);
            break;
        case "-":
            alert(in01 - in03);
            break;
        case "*":
            alert(in01 * in03);
            break;
        case "/":
            alert(in01 / in03);
            break;
        default:
            alert("请重新输入！")
    }

}

--------------------------------------------这是06caclu.css----------------------------------------------------------------------------------------------------------------

#in1{width: 40px;height: 20px;} /* 通过元素id定位*/
#in3{width: 40px;height: 20px;}
#in2{width: 20px;height: 20px;}
.button{width: 20px;height: 20px;}

--------------------------------------------------------下面是运行方法--------------------------------------------------------------------------------------------------------

1将三部分内容分别复制到对应的文件中

2在06caclu.html中选择浏览器打开即可