基本信息
源码名称：简易计算器
源码大小：1.63KB
文件格式：.html
开发语言：CSS
更新时间：2021-12-20
   友情提示：（无需注册或充值，赞助后即可获取资源下载链接）

     嘿，亲！知识可是无价之宝呢，但咱这精心整理的资料也耗费了不少心血呀。小小地破费一下，绝对物超所值哦！如有下载和支付问题，请联系我们QQ(微信同号)：813200300

本次赞助数额为： 1 元　
   源码介绍

html实现简易计算器


<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>计算器</title>
</head>
<style>
 *{margin:0;padding:0;}ul li{list-style: none;}
.div{width:600px;height:600px;margin:100px auto;border:1px solid #c8c;}
.div>input{width:200px;height:50px;font-size: 30px;margin-bottom:10px;}
.div>ul{width:100%;height:80px;/*border:1px solid red;*/}
.div>ul>li{width:50px;height:100%;float:left;margin-left:10px;}
.div>ul>li>button{width:100%;height:100%;font-size:30px;text-align: center;}
</style>
<body>
<div class="div">
    第一个数 <input type="text" id="text1"><br>
    第二个数 <input type="text" id="text2"><br>
    <ul>
        <li><button onclick="cal(' ')"> </button></li>
        <li><button onclick="cal('-')">-</button></li>
        <li><button onclick="cal('*')">*</button></li>
        <li><button onclick="cal('/')">/</button></li>
    </ul>
    <br>
    计算结果 <input type="text" id="textResult">
</div>
<script>
    var text1=document.getElementById("text1");
    var text2=document.getElementById("text2");
    var textResult=document.getElementById("textResult");
    function cal(str){
        switch(str){
            case ' ':
            textResult.value=parseFloat(text1.value) parseFloat(text2.value);break;
            case '-':
            textResult.value=parseFloat(text1.value)-parseFloat(text2.value);break;
            case '*':
            textResult.value=parseFloat(text1.value)*parseFloat(text2.value);break;
            case '/':
            textResult.value=parseFloat(text1.value)/parseFloat(text2.value);break;
        }
    }
</script>   
</body>
</html>