HTML编写的计算器

最新推荐文章于 2025-06-17 12:24:11 发布

ACE1125

最新推荐文章于 2025-06-17 12:24:11 发布

阅读量1.4w

点赞数 17

CC 4.0 BY-SA版权

分类专栏： java 文章标签： HTML 计算器

本文链接：https://blog.youkuaiyun.com/h_h_1122/article/details/96752832

java 专栏收录该内容

17 篇文章

订阅专栏

这是一个使用HTML编写的计算器示例，包括两种不同的设计风格。计算器具备基本的数学运算功能，如加、减、乘、除，还支持小数点、清零、退格等操作。用户可以通过点击按钮输入数字和选择运算符，然后点击等于号得到计算结果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

第一种：简易计算器代码如下：

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8" />
       <title>简易计算器</title>
   </head>
   <style>
       table {
           width: 400px;
           height: 600px;
       }

       #btn {
           width: 100px;
           height: 100px;
           font-size: 40px;
       }
       #result{
           font-size: 40px;
       }

       .color {
           background-color: gold;
       }

       .color1 {
           background-color: yellow;
       }

   </style>

   <script type="text/javascript">
       var sum=0;
        var Boo=false;//判断是否按下计算符号
        var ope;//存储计算符号的变量
         //获取数字
         function num(Num) {
         var result=document.getElementById('result');
         if (Boo) {
          result.value=Num;
           Boo=false;//若接受过运算符，文本框清零
         }else{
          if (result.value=='0') {
              result.value=Num;
         } else{
             result.value+=Num;
         }
       }
   }
         //避免出现两个小数点
         function dian () {
         var result=document.getElementById('result');
         if (result.value.indexOf('.')==-1) {
         result.value+='.';
         }
    }
         //清零，重新加载页面
          function clean() {
          location.replace(location)
         }
         //退格
         function backspace() {
         var result=document.getElementById('result');
         result.value=result.value.substring(0,result.value.length-1);
         if (result.value=='') {
             result.value=0;
         }
     }
       function calc(op){
         var result=document.getElementById('result').value*1;
         if (result=='') {
          result=0;
         }
         Boo=true;
         switch (ope){
          case '+':
             sum=sum+result;
             break;
         case '-':
             sum=sum-result;
             break;
         case '*':
             sum=sum*result;
             break;
         case '/':
             sum=sum/result;
             break;
         case '=':
             document.getElementById('result').value=sum;
             break;
         default:sum=parseFloat(result);
         break;
     }
     document.getElementById('result').value=sum;
     ope=op;
}

   </script>
   <body bgcolor="aqua">
       <table border="1px" cellspacing="0" align="center">
           <caption><b>浩浩牌计算器</b> </caption>
           <tr>
               <td colspan="4"><input type="text" id="result" value="" style="width: 410px;height: 100px;background-color: #7CFC00;" align-text="center" /></td>
           </tr>
           <tr>
               <td><input type="button" id="btn" value="C" class="color" onclick="clean()"/></td>
               <td><input type="button" id="btn" value="←" class="color" onclick='backspace()'/></td>
               <td><input type="button" id="btn" value="/" class="color1" onclick="calc('/')"/></td>
               <td><input type="button" id="btn" value="*" class="color1" onclick="calc('*')"/></td>
           </tr>
           <tr>
               <td><input type="button" id="btn" value="9" onclick="num(9)"/></td>
               <td><input type="button" id="btn" value="8" onclick="num(8)"/></td>
               <td><input type="button" id="btn" value="7" onclick="num(7)" /></td>
               <td><input type="button" id="btn" value="+" class="color1" onclick="calc('+')" /></td>
           </tr>
           <tr>
               <td><input type="button" id="btn" value="6" onclick="num(6)"/></td>
               <td><input type="button" id="btn" value="5" onclick="num(5)"/></td>
               <td><input type="button" id="btn" value="4" onclick="num(4)"/></td>
               <td><input type="button" id="btn" value="-" class="color1" onclick="calc('-')"/></td>
           </tr>
           <tr>
               <td><input type="button" id="btn" value="3" onclick="num(3)"/></td>
               <td><input type="button" id="btn" value="2" onclick="num(2)"/></td>
               <td><input type="button" id="btn" value="1" onclick="num(1)"/></td>
               <td rowspan="2"><input type="button" id="btn" value="=" onclick="calc('=')" style="width: 100px;height: 200px; background-color: red;" /></td>
           </tr>
           <tr>
               <td><input type="button" id="btn" value="√" class="color" onclick="num(√)"/></td>
               <td><input type="button" id="btn" value="0" onclick="num(0)"/></td>
               <td><input type="button" id="btn" value="." class="color" onclick="dian()"/></td>
           </tr>
       </table>
   </body>
</html>

运行结果：

第二种计算器：

<!DOCTYPE html>
<html>
     <head>
          <meta charset="UTF-8">
          <title>计算器</title>
         <link rel="stylesheet" type="text/css" href="计算器.css"/>
      </head>
      <style>
         #main{
               border: 10px outset deepskyblue;
               margin: 30px auto;
               background: lawngreen;
               box-shadow: 5px 5px #CCCCCC inset;
               padding-top: 20px;
             }/*设置最外层表格样式*/
         th{
              height: 40px;
              border: 2px outset #CCCCCC;
             }
#result{
     width: 97%;
     height: 100%;
     box-shadow: 3px 3px aquamarine inset;
     text-align: right;
     font-size: 20px;
     background: #00BFFF;
}
[type=button]{
     width: 60px;
     height: 40px;
    box-shadow: 3px 3px #CCCCCC,3px 3px #CCCCCC inset;
     background-image:linear-gradient(to top right,#000,#fff);/*设置按钮渐变色*/
     color: #00FFFF;
     font-weight: bold;
     margin: 5px;
     border-radius: 10px/6px;
}/*设置所有butto的样式*/
#table1,#table2,#table3{
     margin-top: 20px;
     border: 2px outset #CCCCCC;
}
[type=button]:hover{
     background-image:linear-gradient(to top right,#fff,#000);
}
#time{
     margin: 0;
     padding: 0;
     color:#00FFFF;
}
      </style>
      <script>
         var sum=0;
        var Boo=false;//判断是否按下计算符号
        var ope;//存储计算符号的变量

//获取数字
function num(Num) {
      var result=document.getElementById('result');
      if (Boo) {
          result.value=Num;
          Boo=false;//若接受过运算符，文本框清零
      }else{
          if (result.value=='0') {
              result.value=Num;
         } else{
             result.value+=Num;
         }
     }
}

//避免出现两个小数点
function dian () {
     var result=document.getElementById('result');
     if (result.value.indexOf('.')==-1) {
         result.value+='.';
     }
}

//清零，重新加载页面
function clean() {
          location.replace(location)
}
//退格
function backspace() {
      var result=document.getElementById('result');
          result.value=result.value.substring(0,result.value.length-1);
          if (result.value=='') {
             result.value=0;
         }
}

function calc1(op){
      var result=document.getElementById('result').value*1;
      var π=Math.PI*2/360;//角度转换成弧度
      var deg=360/(Math.PI*2);//弧度转换成角度
      if (result=='') {
          result=0;
      }
     Boo=true;
      switch (op){
         case 'sin':
             sum=Math.round(Math.sin(result* π)*100000000000000)/100000000000000;

//sum=Math.sin(result* π);Math.round()解决浮点数运算问题
break;

      //程序处理浮点数的时候，每一次运算都会取一次近似值，所以最终的结果，总是近似值，而不是我们通过代数得出的结果。
         case 'cos':
             sum=Math.round(Math.cos(result* π)*100000000000000)/100000000000000;
             break;
         case 'tan':
             sum=Math.round(Math.tan(result* π)*100000000000000)/100000000000000;
             break;
         case 'asin':
             sum=Math.round(Math.asin(result)*deg*100000000000000)/100000000000000+'°';
             break;
         case 'acos':
             sum=Math.round(Math.acos(result)*deg*100000000000000)/100000000000000+'°';
             break;
         case 'atan':
             sum=Math.round(Math.atan(result)*deg*100000000000000)/100000000000000+'°';
             break;
         case 'PI':
             sum=Math.PI;
             break;
         case '1/x':
             sum=1/parseFloat(result);
             break;
         case 'exp':
             sum=Math.exp(result);
             break;
         case 'Inx':
             sum=Math.log(result);
             break;
         case 'lgx':
             sum=Math.log10(result);
             break;
         case 'n!':
             for (var i=1;i<result;i++) {
                 sum=sum*i;
             }
             break;
         default:sum=parseFloat(result);
         break;
     }
     document.getElementById('result').value=sum;
}
//设置时间
window.onload=function(){
      showTime();
}
function showTime(){
          var today=new Date();
          var y=today.getFullYear();
          var M=today.getMonth()+1;
          var d=today.getDate();
         var h=today.getHours();
         var m=today.getMinutes();
         var s=today.getSeconds();
         m=checkTime(m);
          s=checkTime(s);
         var week=today.getDay();
         var w=new Array('星期天','星期一','星期二','星期三','星期四','星期五','星期六');
         for (var i=0;i<w.length;i++) {
             document.getElementById('time').innerHTML=y+'年'+M+'月'+d+'日'+'</br>'+h+":"+m+":"+s+'    '+w[week];
         }
    setTimeout('showTime()',500);
}
//数字小于10时，前面添加一个0
function checkTime(i){
     if (i<10) {
         i="0" + i;
     }
   return i
}
      </script>
<script src="计算器.js" type="text/javascript" charset="utf-8"></script>
      <body bgcolor="yellow">
         <table border="0" cellspacing="0" cellpadding="" id='main' align="center">
             <tr>
                 <th id='time'></th>
                 <th >
                     <input type="text"   id="result" value="0" />
                 </th>
                 <th>
                     <input type="button" name="" id="" value="清零" onclick="clean()"/>
                     <input type="button" name="" id="" value="退格" onclick='backspace()'/>
                 </th>
             </tr>

运行结果：