DrHuang.com | list | math | function | coding | graphics | example | help | ? | 中文
+ + + =

X

Save Your Code

If you click the save button, your code will be saved, and you get an URL you can share with others.

By clicking the "Save" button you agree to our terms and conditions.

Report Error

X

Save to Google Drive

If you have a Google account, you can save this code to your Google Drive.

Google will ask you to confirm Google Drive access.

X

Open from Google Drive

If you have saved a file to Google Drive, you can open it here:

File Save Orien Theme Result Size: 300 x 150
X
Load from Google DriveOpen file Save Code Change Orientation Change Theme, Dark/Light

​x
 
​
<!DOCTYPE html>
<html >
    <head>
        <meta charset="UTF-8">
        <title>calculator 计算器</title>
        <link rel="stylesheet" type="text/css" href="计算器.css"/>
        <script src="计算器.js"  type="text/javascript" charset="utf-8"></script>
    <style>#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;
}</style></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="ln"  onclick="calc1('Inx')"/>
                            </td>
                            <td>
                                <input type="button" name="" id="" value="lg"  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('=')" style="color: red" />
                           </td>
                        </tr>
                    </table>
                </td>
            </tr>
        </table>
    <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 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
}
</script>
​
</body>
</html>
​
​
X

Report a Problem: