javaScript小项目-----计算器

最新推荐文章于 2022-06-20 00:27:29 发布

阿冰介

最新推荐文章于 2022-06-20 00:27:29 发布

阅读量1.2k

点赞数 1

分类专栏： javaScript

本文链接：https://blog.csdn.net/dexing07/article/details/52294060

版权

javaScript 专栏收录该内容

38 篇文章 0 订阅

订阅专栏

用Bootstrap和原生javaScript做的简易计算器；

<html>
    <head>
        <meta charset="utf-8">
        <title>制作计算器</title>
        <link rel="stylesheet" type="text/css" href="../h5edu/bootstrap/css/bootstrap.min.css">
<style type="text/css">
 .sum{

 } 
 #box{
    font-size: 20px;
 }
 .mycontent{
    margin-left:auto; 
    margin-right:auto;
    width: 190px;
    height: 208px;
    background-color:rgba(0,0,255,0.6);
    border-radius: 7px;
 }
</style>
</head>
<body>
<div class="mycontent">
<input type="button" class="form-control btn btn-success " value="简易计算器">
<input type="text" id="box" class="form-control">
   <input οnclick="numb(this)" value="1" type="button" class="btn btn-info">
<input οnclick="numb(this)" value="2" type="button" class="btn btn-info">
<input οnclick="numb(this)" value="3" type="button" class="btn btn-info">
<input type="button" value="+"  class="btn btn-danger" id="jia">
<br>
<input οnclick="numb(this)" value="4" type="button" class="btn btn-info">
<input οnclick="numb(this)" value="5" type="button" class="btn btn-info">
<input οnclick="numb(this)" value="6" type="button" class="btn btn-info">
<input type="button" value="-"  class="btn btn-danger" id="jian" οnclick="ways('-')">
<br>
<input οnclick="numb(this)" value="7" type="button" class="btn btn-info">
<input οnclick="numb(this)" value="8" type="button" class="btn btn-info">
<input οnclick="numb(this)" value="9" type="button" class="btn btn-info">
<input type="button" value="*"  class="btn btn-danger" id="cheng" οnclick="ways('*')">
<br>
<input οnclick="numb(this)" value="0" type="button" class="btn btn-info">
<input type="button" value="="  class="btn btn-warning" id="dengyu">
<input type="button" value="C" οnclick="cencel()" class="btn btn-warning" >
<input type="button" value="/"  class="btn btn-danger" id="chu" οnclick="ways('/')">
<br>



</div>





<div class="sum">





<h2>计算数字</h2>
<input οnclick="numb(this)" value="1" type="button" class="btn btn-primary">
<input οnclick="numb(this)" value="2" type="button" class="btn btn-primary">
<input οnclick="numb(this)" value="3" type="button" class="btn btn-primary">
<input οnclick="numb(this)" value="4" type="button" class="btn btn-primary">
<input οnclick="numb(this)" value="5" type="button" class="btn btn-primary">
<input οnclick="numb(this)" value="6" type="button" class="btn btn-primary">
<input οnclick="numb(this)" value="7" type="button" class="btn btn-primary">
<input οnclick="numb(this)" value="8" type="button" class="btn btn-primary">
<input οnclick="numb(this)" value="9" type="button" class="btn btn-primary">
<input οnclick="numb(this)" value="0" type="button" class="btn btn-primary">
  <br>
<h2>计算符号</h2>
<input type="button" value="+"  class="btn btn-success" id="jia">
<input type="button" value="-"  class="btn btn-success" id="jian" οnclick="ways('-')">
<input type="button" value="*"  class="btn btn-success" id="cheng" οnclick="ways('*')">
<input type="button" value="/"  class="btn btn-success" id="chu" οnclick="ways('/')">
<br>
<h2>功能键</h2>
<input type="button" value="="  class="btn btn-warning" id="dengyu">
<input type="button" value="C" οnclick="cencel()" class="btn btn-warning" >
<br>
<h2>计算框</h2>
<input type="text" id="box" class="form-control">
<br>
</div>
<script type="text/javascript">
var numbers="";
var operand="";
var sum="";
var way="";
function numb(num){
  numbers=numbers+num.value;
  document.getElementById("box").value=numbers;
  
}
function cencel(){
  document.getElementById('box').value='';
  numbers="";
}
var jia=document.getElementById("jia");
jia.οnclick=function(){
    sum=parseInt(document.getElementById("box").value);
    document.getElementById("box").value="";
    way="+";
    numbers="";
}
var dengyu=document.getElementById("dengyu");
dengyu.οnclick=function(){
    switch (way){
         case '+':
            var box=parseInt(document.getElementById("box").value);
            var sums=sum+box;
            console.log(sums);
            document.getElementById("box").value=sums;
         break;
         case '-':
            var box=parseInt(document.getElementById("box").value);
            var sums=sum-box;
            document.getElementById("box").value=sums;
            console.log("进入减数");
         break;
         case '*':
            var box=parseInt(document.getElementById("box").value);
            var sums=sum*box;
            document.getElementById("box").value=sums;
         break;
         case '/':
            var box=parseInt(document.getElementById("box").value);
            var sums=sum/box;
            document.getElementById("box").value=sums;
            console.log("这是除法");
         break;
         default:
            console.log("输入正确");
    }
  }


function ways(){
  console.log("on Here");
  sum=parseInt(document.getElementById("box").value);
  document.getElementById("box").value="";
  way=arguments[0];
  numbers="";
}

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

阿冰介

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
0
评论
javaScript小项目-----计算器

用Bootstrap和原生javaScript做的简易计算器；制作计算器 .sum{ } #box{ font-size: 20px; } .mycontent{ margin-left:auto; margin-right:auto; width: 190px;
复制链接

扫一扫