计算器啦啦啦啦1 | 码农工具

​x
 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>计算器</title>
        <link rel="stylesheet" type="text/css" href="计算器.css"/>
        <script src="计算器.js"  type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
        <table border="0" cellspacing="0" cellpadding="" id='main'>
            <tr>
                <th id='time'>
                </th>
                <th >
                    <input type="text" name="" id="result" value="0" />
                </th>
                <th>
                    <input type="button" name="" id="" value="清零"  onclick="clean()"/>
                    <input type="button" name="" id="" value="退格"  onclick='backspace()'/>
                </th>
            </tr>
          <tr>
                <td>
                    <table id="table1">
                        <tr>
                            <td>
                                <input type="button" name="" id="" value="sin"  onclick="calc1('sin')"/>
                            </td>
                            <td>
                                <input type="button" name="" id="" value="cos"  onclick="calc1('cos')"/>
                            </td>
                            <td>
                                <input type="button" name="" id="" value="tan"  onclick="calc1('tan')"/>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <input type="button" name="" id="" value="asin"  onclick="calc1('asin')"/>
                            </td>
                            <td>
                                <input type="button" name="" id="" value="acos"  onclick="calc1('acos')"/>
                            </td>
                            <td>
                                <input type="button" name="" id="" value="atan"  onclick="calc1('atan')"/>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <input type="button" name="" id="" value="PI"  onclick="calc1('PI')"/>
                            </td>
                            <td>
                                <input type="button" name="" id="" value="1/X"  onclick="calc1('1/x')"/>
                            </td>
                            <td>
                                <input type="button" name="" id="" value="exp"  onclick="calc1('exp')"/>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <input type="button" name="" id="" value="Inx"  onclick="calc1('Inx')"/>
                            </td>
                            <td>
                                <input type="button" name="" id="" value="lgx"  onclick="calc1('lgx')"/>
                            </td>
                            <td>
                                <input type="button" name="" id="" value="n!"  onclick="calc1('n!')"/>
                            </td>
                        </tr>
                    </table>
                </td>
            <td>
                    <table id="table2">
                        <tr>
                            <td>
                                <input type="button" name="" id="" value="7"  onclick="num(7)"/>
                            </td>
                            <td>
                                <input type="button" name="" id="" value="8"  onclick="num(8)"/>
                            </td>
                            <td>
                                <input type="button" name="" id="" value="9"  onclick="num(9)"/>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <input type="button" name="" id="" value="4"  onclick="num(4)"/>
                            </td>
                            <td>
                                <input type="button" name="" id="" value="5"  onclick="num(5)"/>
                            </td>
                            <td>
                                <input type="button" name="" id="" value="6"  onclick="num(6)"/>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <input type="button" name="" id="" value="1"  onclick="num(1)"/>
                            </td>
                            <td>
                                <input type="button" name="" id="" value="2"  onclick="num(2)"/>
                            </td>
                            <td>
                                <input type="button" name="" id="" value="3"  onclick="num(3)"/>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <input type="button" name="" id="" value="0"  onclick="num(0)"/>
                            </td>
                            <td>
                                <input type="button" name="" id="" value="."  onclick="dian()"/>
                            </td>
                            <td>
                                <input type="button" name="" id="" value="="  onclick="calc('=')"/>
                            </td>
                        </tr>
                    </table>            
            </td>
            <td>
                    <table id="table3">
                        <tr>
                            <td>
                                <input type="button" name="" id="" value="+"  onclick="calc('+')"/>
                            </td>
                            <td>
                                <input type="button" name="" id="" value="取整"  onclick="calc('取整')"/>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <input type="button" name="" id="" value="-"  onclick="calc('-')"/>
                            </td>
                            <td>
                                <input type="button" name="" id="" value="取余"  onclick="calc('%')"/>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <input type="button" name="" id="" value="*"  onclick="calc('*')"/>
                            </td>
                            <td>
                                <input type="button" name="" id="" value="x^y"  onclick="calc('x^y')"/>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <input type="button" name="" id="" value="/"  onclick="calc('/')"/>
                            </td>
                            <td>
                                <input type="button" name="" id="" value="+/-"  onclick="calc('+/-')"/>
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>
        </table>
    </body>
</html>

HTML

xxxxxxxxxx
 
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 '取整':
            sum=Math.floor(sum/result);
            break;
        case '%':
            sum=sum%result;
            break;
        case 'x^y':
            sum=Math.pow(sum,result);
            break;
        case '+/-':
            sum=result*(-1);            
            break;
        case '=':
            document.getElementById('result').value=sum;
            break;
        default:sum=parseFloat(result);
        break;
    }
    document.getElementById('result').value=sum;
    ope=op;
}
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
}

JavaScript

xxxxxxxxxx
 
#main{
    border: 10px outset orange;
    margin: 30px auto;
    background: #ABABAB;
    box-shadow: 5px 5px #CCCCCC inset;
    padding-top: 20px;
}/*设置最外层表格样式*/
th{
    height: 40px;
    border: 2px outset #CCCCCC;        
}
#result{
    width: 100%;
    height: 100%;
    box-shadow: 3px 3px #CCCCCC inset;
    text-align: right;
    font-size: 20px;
}
[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;
}

CSS