实现 JavaScript 计算器的多种方案

最新推荐文章于 2022-07-21 16:30:35 发布

weixin_45593546

最新推荐文章于 2022-07-21 16:30:35 发布

阅读量165

点赞数 1

分类专栏： JavaScript 文章标签： javascript

本文链接：https://blog.csdn.net/weixin_45593546/article/details/114269933

版权

方法一：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>最 简单计算器 路口师傅</title>
<style>
table,tr,td{
   
  border:1px solid blue;  
}
#ok,.td,#clear,#last{
   
  text-align:center;
}
</style>
</head>
<body>
	
  <table>
    <tr>
    	<td colspan="5" id="show">0</td>
    </tr>
    <tr>
    	<td class="td" id="zero">0</td>
      <td class="td">.</td>
      <td id="last"><</td>
      <td id="clear" colspan="2">c</td>
    </tr>
    <tr>
    	<td class="td">1</td>
      <td class="td">2</td>
      <td class="td">3</td>
      <td class="td">+</td>
      <td class="td">-</td>
    </tr>
    <tr>
    	<td class="td">4</td>
      <td class="td">5</td>
      <td class="td">6</td>
      <td class="td">*</td>
      <td class="td">/</td>
    </tr>
    <tr>
    	<td class="td">7</td>
      <td class="td">8</td>
      <td class="td">9</td>
      <td id="ok" colspan="2">=</td>
    </tr>
  </table>
</body>
</html><script>
var oTd = document.getElementsByClassName("td");
var oK = document.getElementById("ok");
var oShow = document.getElementById("show");
var oClear = document.getElementById("clear");
var run = '';//全局变量 公式

oK.onclick=function(){
   
  if(run!==""){
   
    oShow.innerHTML = eval(run);
  }
  if(oShow.innerHTML!=="0"){
   
    run = show.innerHTML;
  }
}

oClear.onclick=function(){
   
  run = '';
  show.innerHTML = '0';
}

for(var i = 0;i<=oTd.length;i++){
   
  oTd[i].index = i;
  oTd[i].onclick=function(){
   
    //alert(oTd[this.index].innerHTML)
    run += oTd[this.index].innerHTML;
   oShow.innerHTML = run;
  };
}
</script>

方法二：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文档标题</title>
<style>
*{
   
        padding:0;
        margin:1px;
    }
    #calculater{
   
        margin: auto;
        margin-top: 30px;
        border: solid 6px #2371D3;
        border-spacing: 0px;
    }
    #display{
   
        width: 100%;
        height: 30px;
        border-bottom: solid 4px #2371D3;
         font-weight: bold;
         color: #193D83;
        font-family: 黑体;
        padding-left: 2px;
    }
    .numberkey{
   
        cursor: pointer;
        width: 40px;
        height: 30px;
        border: solid 1px #FFFFFF;
        background: #2371D3;
        color: #ffffff;
        text-align: center;
        font-weight: bold;
        font-family: 黑体;
    }
    #equality{
   
       cursor: pointer;
       width: 40px; 
       height: 100%;
       background: #2371D3;
        border: solid 1px #FFFFFF;
        color: #ffffff;
        text-align: center;
        font-weight: bold;
        font-family: 黑体; 
    }
    .numberkey:hover{
   
       background: #EA6F30; 
    }
    #equality:hover{
   
       background: #EA6F30; 
    }</style<>
</head>
<body>
<table id="calculater" onClick="calculater()">
        <tr>
            <td id="display" colspan="5">0</td>
        </tr>
        <tr>
            <td class="numberkey" >1</td>
            <td class="numberkey" >2</td>
            <td class="numberkey" >3</td>
            <td class="numberkey" >+</td>
            <td class="numberkey"  id="deletesign">c</td>   
        </tr>
        <tr>
            <td class="numberkey" >4</td>
            <td class="numberkey" >5</td>
            <td class="numberkey" >6</td>
            <td class="numberkey" >-</td>
            <td rowspan="3" id="equality" onclick="resultscalcaulte()">=</td> 
        </tr>
        <tr>
            <td class="numberkey" >7</td>
            <td class="numberkey" >8</td>
            <td class="numberkey" >7</td>
            <td class="numberkey" >*</td>
        </tr>
        <tr >
            <td class="numberkey" >+/-</td>
            <td class="numberkey" >0</td>
            <td class="numberkey" >.</td>
            <td class="numberkey" >/</td>            
        </tr>
</body>
</html>
<script>
var results="";
    var calresults="";
    function calculater(){
   
        if (event.srcElement.innerText=="=") {
   
            return;
        }
       results+=event.srcElement.innerText;
       display.innerText=results

最低0.47元/天解锁文章

weixin_45593546

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
实现 JavaScript 计算器的多种方案

方法一：<!DOCTYPE html><html><head><meta charset="utf-8"><title>最简单计算器路口师傅</title><style>table,tr,td{ border:1px solid blue; }#ok,.td,#clear,#last{ text-align:center;}</style></head><
复制链接

扫一扫