欢迎光临小鱼网个人网站!

登录/注册
html制作简单计算器

html制作简单计算器

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>计算器</title>
 <style>
 #counter{width: 280px;height: 430px;background:#000;margin: 100px auto;padding: 20px;border-radius: 20px;}
 #inp{width: 270px;font-size: 36px;background: #4e4d4d;color: #fff; margin: 20px 5px;border: none;}
 .cbt{width: 60px;height: 60px;background: #606060;color: white;float: left;margin: 5px;border-radius: 50%;line-height: 60px;text-align: center;cursor: pointer;font-size: 28px;font-family: Arial;}
 .hbt{height: 130px;line-height: 130px;border-radius: 60px;float: right;}
 .wbt{width: 130px;border-radius: 60px;}
 .byellow{background: #d88f03;}
 .bwhite{background: #d4d4d4;color: #000000;}
 </style>
</head>
<body>
 <div id="counter">
     <input type="text" id="inp">
     <div class="cbt bwhite" onclick="clickbt('')">C</div>
     <div class="cbt bwhite" onclick="clickbt('+')">+</div>
     <div class="cbt bwhite" onclick="clickbt('/')">/</div>
     <div class="cbt byellow" onclick="clickbt('*')">*</div>
     <div onclick="clickbt('7')">7</div>
     <div onclick="clickbt('8')">8</div>
     <div onclick="clickbt('9')">9</div>
     <div class="cbt byellow" onclick="clickbt('-')">-</div>
     <div onclick="clickbt('4')">4</div>
     <div onclick="clickbt('5')">5</div>
     <div onclick="clickbt('6')">6</div>
     <div class="cbt byellow" onclick="clickbt('+')">+</div>
     <div onclick="clickbt('1')">1</div>
     <div onclick="clickbt('2')">2</div>
     <div onclick="clickbt('3')">3</div>
     <div class="cbt hbt byellow" onclick="getcount()">=</div>
     <div class="cbt wbt" onclick="clickbt('0')">0</div>
     <div onclick="clickbt('.')">.</div>
 </div>
 <script>
 var einp = document.querySelector("#inp");
 var clickbt = (num) => {
 if (num == '') {
     einp.value = "";
 } else
     einp.value = einp.value + num;
 }
 // 如果num为空,则清空输入框einp,如果不为空,则累加到输入框
 var getcount = () => {
     einp.value = eval(einp.value);
 }
 </script>
</body>
</html>


Copyright © www.xyubing.com All Rights Reserved. 备案号:蜀ICP备19023461号-1

免责声明:本站部分资源搜集整理于互联网或者网友提供,仅供学习与交流使用,如果不小心侵犯到你的权益,请及时联系我们删除该资源。