• js实现科学计算机


    js实现科学计算机

    一、总结

    1、算法这个科学计算机是用普通基础算法实习的,没有用栈,用栈要简单很多

    2、发现规律,编程分类编程的时候,运算符分两种,一元运算符和二元运算符,分类了就好写很多了

    3、用了一个全局变量来记录是否已经按下了运算符键

    4、js中with()函数:with函数中,属性的对象名可以省略,因为with中有。

    5、substring函数:截取字符串,退格的时候用。

    6、(tr>(td>input)*3)*4:快速输出html标签,>号表示从属,*n表示n个

    7、css样式要好好看看

    二、js实现科学计算机

    截图

    代码

      1 <!DOCTYPE html>
      2 <html lang="en">
      3 <head>
      4     <meta charset="UTF-8">
      5     <title>计算器练习</title>
      6     <style type="text/css">
      7     table{
      8         margin: 15px auto;
      9         font-size: 22px;
     10         border:5px outset orange;
     11 
     12     }
     13     #tab-1,#tab-2,#tab-3{
     14         border:3px outset rgba(15,10,10,0.3);
     15     }
     16     input{
     17         outline: none;
     18         box-shadow:5px 5px 2px rgba(100,100,100,0.8) inset; 
     19     }
     20 
     21     #txtnum{
     22         text-align: right;
     23         height: 50px;
     24         width: 100%;
     25         background:#fff;
     26         font-size: 22px;
     27     }
     28     td{
     29         padding: 5px;
     30         background: #ccc;
     31         
     32     }
     33     [type=button]{
     34         width: 60px;
     35         height: 40px;
     36         border-radius: 5px;
     37         background: #fff;
     38         box-shadow:5px 3px 2px rgba(100,100,100,0.6) inset; 
     39     }
     40     </style>
     41 </head>
     42 <body>
     43     <!-- 主表设计 -->
     44     <table id="main" cellspacing="0">
     45     <!-- (tr>td*3)*2 快捷方式-->
     46         <tr>
     47             <td colspan="2">
     48                 <input type="text"  id="txtnum" value="0" >
     49             </td>
     50             <td>
     51                 <table id="tab-1">
     52                     <tr>
     53                         <td><input type="button" id="cc" value="清除"
     54                         onclick="txtnum.value='0';result=0 "></td>
     55                         <td><input type="button" id="tg" value="退格"
     56                         onclick="backspace()"></td>
     57                     </tr>
     58                 </table>    
     59             </td>
     60         </tr>
     61         <tr>
     62             <td>
     63                 <table id="tab-2">
     64                     <!-- (tr>(td>input)*3)*4 -->
     65                     <tr>
     66                         <td><input type="button" id="sin" value="sin"
     67                         onclick="math('sin')"></td>
     68                         <td><input type="button" id="cos" value="cos"
     69                         onclick="math('cos')"></td>
     70                         <td><input type="button" id="tan" value="tan"
     71                         onclick="math('tan')"></td>
     72                     </tr>
     73                     <tr>
     74                         <td><input type="button" id="asin" value="asin"
     75                         onclick="math('asin')"></td>
     76                         <td><input type="button" id="acon" value="acon"
     77                         onclick="math('acon')"></td>
     78                         <td><input type="button" id="atan" value="atan"
     79                         onclick="math('atan')"></td>
     80                     </tr>
     81                     <tr>
     82                         <td><input type="button" id="PI" value="PI"
     83                         onclick="math('PI')"></td>
     84                         <td><input type="button" value="1/x"
     85                         onclick="math('1/x')"></td>
     86                         <td><input type="button" value="exp"
     87                         onclick="math('exp')"></td>
     88                     </tr>
     89                     <tr>
     90                         <td><input type="button" value="lnx"
     91                         onclick="math('lnx')"></td>
     92                         <td><input type="button" value="lgx"
     93                         onclick="math('lgx')"></td>
     94                         <td><input type="button" value="n!"
     95                         onclick="math('n!')"></td>
     96                     </tr>
     97                 </table>
     98             </td>
     99             <td>
    100                 <table id="tab-3">
    101                     <!-- (tr>(td>input)*3)*4 -->
    102                     <tr>
    103                         <td><input type="button" id="" value="7" 
    104                         onclick="num('7')"></td>
    105                         <td><input type="button" id="" value="8"
    106                         onclick="num('8')"></td>
    107                         <td><input type="button" id="" value="9"
    108                         onclick="num('9')"></td>
    109                     </tr>
    110                     <tr>
    111                         <td><input type="button" id="" value="4"
    112                         onclick="num('4')"></td>
    113                         <td><input type="button" id="" value="5"
    114                         onclick="num('5')"></td>
    115                         <td><input type="button" id="" value="6"
    116                         onclick="num('6')"></td>
    117                     </tr>
    118                     <tr>
    119                         <td><input type="button" id="" value="1"
    120                         onclick="num('1')"></td>
    121                         <td><input type="button" value="2"
    122                         onclick="num('2')"></td>
    123                         <td><input type="button" value="3"
    124                         onclick="num('3')"></td>
    125                     </tr>
    126                     <tr>
    127                         <td><input type="button" value="0"
    128                         onclick="num('0')"></td>
    129                         <td><input type="button" value="." onclick="decimal()"></td>
    130                         <td><input type="button" value="="
    131                         onclick="compute('=')"></td>
    132                     </tr>
    133                 </table>
    134             </td>
    135             <td>
    136                 <table id="tab-3">
    137                     <tr>
    138                         <td><input type="button" id="" value="+"
    139                         onclick="compute('+')"></td>
    140                         <td><input type="button" id="" value="取整"
    141                         onclick="math('i')"></td>
    142                     </tr>
    143                     <tr>
    144                         <td><input type="button" id="" value="-"
    145                         onclick="compute('-')"></td>
    146                         <td><input type="button" id="" value="取余"
    147                         onclick="compute('%')"></td>
    148                     </tr>
    149                     <tr>
    150                         <td><input type="button" id="" value="*"
    151                         onclick="compute('*')"></td>
    152                         <td><input type="button" id="" value="x^y"
    153                         onclick="compute('x^y')"></td>
    154                     </tr>
    155                     <tr>
    156                         <td><input type="button" id="" value="/"
    157                         onclick="compute('/')"></td>
    158                         <td><input type="button" id="" value="+/-"
    159                         onclick="reverse()"></td>
    160                     </tr>
    161                 </table>
    162             </td>
    163         </tr>
    164     </table>
    165     <script type="text/javascript">
    166     //operator 运算符
    167         var Boo=false;  //判断是否按下计算符号的布尔变量;
    168         var result=0;  //存储计算数据的变量
    169         var ope; //存储计算符号的变量
    170 
    171         function $(x){
    172             return document.getElementById(x)
    173         }
    174 
    175         function decimal(){
    176             var txt=$('txtnum');
    177             if(Boo){
    178                 txt.value='0.' //若接受过运算符,文本框清零
    179             } else{
    180                 if (txt.value.indexOf('.')==-1) { //判断数值中是否已经有小数点
    181                     txt.value+='.'; //若没有则加上
    182                 }
    183             }
    184             Boo=false; //若接受过运算符,文本框不能清零
    185         }
    186         //indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。
    187         //如果要检索的字符串值没有出现,则该方法返回 -1。
    188 
    189         function num(Num){
    190             var txt=$('txtnum');
    191             if (Boo) {
    192                 txt.value=Num;
    193                 Boo=false;
    194             }else{
    195                 if (txt.value=='0') {
    196                     txt.value=Num
    197                 }else{
    198                     txt.value+=Num;
    199                 }
    200             }
    201         }
    202 
    203         function compute(op){
    204             var onum=$('txtnum').value;
    205             if (onum=='') {onum=0}
    206             Boo=true;
    207             switch(ope){
    208                 case '+':
    209                 result+=parseFloat(onum);break;
    210                 case '-':
    211                 result-=parseFloat(onum);break;
    212                 case '*':
    213                 result*=parseFloat(onum);break;
    214                 case '/':
    215                 result/=parseFloat(onum);break;
    216                 case '=':
    217                 result=parseFloat(onum);break;
    218                 case '%':
    219                 result%=onum;break;
    220                 //{result%=onum;break;}break;
    221                 case 'x^y':
    222                 result=Math.pow(result,onum);break;
    223                 //{result=Math.pow(result,onum);break;}break;
    224                 default:result=parseFloat(onum)
    225             }
    226             $('txtnum').value=result;
    227             ope=op;
    228             
    229         }
    230 
    231         function math(op){
    232             var onum=$('txtnum').value;
    233             if (onum==''){alert('数据不能为空')};
    234             Boo=true;
    235             with(Math){
    236                 switch(op){
    237                     case 'sin':result=sin(onum);break;
    238                     case 'cos':result=cos(onum);break;
    239                     case 'tan':result=tan(onum);break;
    240                     case 'asin':result=asin(onum);break;
    241                     case 'acos':result=acos(onum);break;
    242                     case 'atan':result=atan(onum);break;
    243                     case 'PI':result=PI;break;
    244                     case '1/x':result=1/onum;break;
    245                     case 'exp':result=exp(onum);break;
    246                     case 'lnx':result=log(onum);break;
    247                     case 'lgx':result=log(onum)/log(10);break;
    248 
    249                     case 'i':result=floor(onum);break;
    250 
    251                     case 'n!':result=jc(onum);break;
    252                     default:result=parseFloat(onum);
    253                 }
    254             }
    255             $('txtnum').value=result;
    256         }
    257 
    258         function jc(a){
    259             if(a==1){
    260                 return 1;    
    261             }else{
    262                 return jc(a-1)*a    
    263             }
    264         }
    265         function reverse(){
    266             var Num1=$('txtnum').value;
    267             if (Num1=='') {
    268                 alert('数据不能为空')
    269             }else{
    270                 $('txtnum').value*=-1;
    271             }
    272             
    273         }
    274 
    275         function backspace(){
    276             var txt=$('txtnum');
    277             txt.value=txt.value.substring(0,txt.value.length-1);
    278             if (txt.value=='') {txt.value=0}
    279         }
    280     </script>
    281 </body>
    282 </html>
  • 相关阅读:
    innerHTML和outerHTML的区别
    递归,汉诺塔
    js 中的 Math.ceil() Math.floor Math.round()
    JS中的异常exception
    CSS样式中visited,hover,active , focus这四个分别表示什么意思?
    用户在设置密码时,提醒请输入半角字符(vue+element+valid)
    设置用户密码时,将全角转换为半角
    后台返回对象数组,对象属性相同时,只取一个对象
    远程链接mongoDB robomongo
    mongodb 入坑
  • 原文地址:https://www.cnblogs.com/Renyi-Fan/p/9017588.html
Copyright © 2020-2023  润新知