练习题-css+html+js实现计算器功能

今天做了个练习题，

记录一下！！

html代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>老闫真牛逼之计算器</title>
    <link href="jisuanqi_css.css" type="text/css" rel="stylesheet">
    <script src="jisuanqi_js.js" type="text/javascript"></script>
</head>
<body onload="init()">
<!--    <input type="button" value="test1" id="btn1" onclick="ff1()">-->
<!--    <input type="button" value="test2" id="btn2">-->
    <div id="div1">
        <div id="div2">
            <input type="text" name="num" id="num">
        </div>
        <div id="div3">
            <input type="button" value="C">
            <input type="button" value="<<">
            <input type="button" value="+/-">
            <input type="button" value="/">
            <input type="button" value="1" id="n1">
            <input type="button" value="2" id="n2">
            <input type="button" value="3" id="n3">
            <input type="button" value="*">
            <input type="button" value="4" id="n4">
            <input type="button" value="5" id="n5">
            <input type="button" value="6" id="n6">
            <input type="button" value="-">
            <input type="button" value="7" id="n7">
            <input type="button" value="8" id="n8">
            <input type="button" value="9" id="n9">
            <input type="button" value="+">
            <input type="button" value="0">
            <input type="button" value=".">
            <input type="button" value="=">
            <input type="button" value="m">
        </div>
    </div>
</body>
</html>

css代码：

*{
    margin: 0;
    padding: 0;
}

div{
    width: 170px;
}

#div1{
    top: 60px;
    left: 100px;
    position: absolute;
}


input[type="button"]{
    width: 30px;
    margin-right: 5px;
}

input[type="text"]{
    width: 150px;
    text-align: right;
    background-color: aliceblue;
    border: 1px solid;
    padding-right: 5px;
    box-sizing: border-box;
}

input[type="button"]:hover{
    background-color: yellow;
}

js代码：

function init(){
    var num=document.getElementById("num");
    var btm_num1 = 0;
    num.value=0;
    num.disabled="disabled";
    // var n1=document.getElementById("n1")
    // n1.onclick=function (){
    //     alert("123")
    // }
    var oButton = document.getElementsByTagName("input")
    for(var i=0;i<oButton.length;i++){
        oButton[i].onclick=function (){
            if(isnumber(this.value)){
                num.value=(num.value+this.value)*1
            }else {
                const btm_num = this.value;
                switch (btm_num){
                    case "+":
                        btm_num1 = Number(num.value)
                        fh = "+"
                        num.value=0
                        break;
                    case "-":
                        btm_num1 = Number(num.value)
                        fh = "-"
                        num.value=0
                        break;
                    case "*":
                        btm_num1 = Number(num.value)
                        fh = "*"
                        num.value=0
                        break;
                    case "/":
                        btm_num1 = Number(num.value)
                        fh = "/"
                        num.value=0
                        break;
                    case ".":
                        num.value=dec_num(num.value)
                        break;
                    case "<<":
                        num.value=back(num.value)
                        break;
                    case "C":
                        num.value=0
                        break;
                    case "+/-":
                        num.value=sign(num.value)
                        break;
                    case "=":
                        switch (fh){
                            case "+":
                                num.value=btm_num1 + Number(num.value)
                                break;
                            case "-":
                                num.value=btm_num1 - Number(num.value)
                                break;
                            case "*":
                                num.value=btm_num1 * Number(num.value)
                                break;
                            case "/":
                                if (parseInt(num.value) ===0 ){
                                    alert("除数不可以是0哦")
                                    num.value=0
                                }else {
                                    num.value=btm_num1 / Number(num.value)
                                }
                                break;
                        }
                        break;
                }
            }
        }
    }
}


function sign(n){
    if(n.indexOf("-")===-1){
        n = "-"+n
    }else {
        n=n.substr(1,n.length)
    }
    return n
}

function back(n){
    if(n.length !== 1){
        n=n.substr(0,n.length-1);
    }else {
        n=0;
    }
    return n;
}

function dec_num(n){
    if(n.indexOf(".")===-1){
        n=n+"."
    }
    return n;
}


function isNull(n){
    // if(n==="0" || n.length===0){
    //     return true
    // }else {
    //     return false
    // }
    return n === "0" || n.length === 0;
}



function isnumber(n){
    // if(!isNaN(n)){
    //     return true;
    // }else {
    //     return false;
    // }
    return !isNaN(n);
}

// function num_1_click(){
//     var num=document.getElementById("num")
//     var  n = num.value
//     // if (n==0){
//     //     n="1"
//     // }else {
//     //     n = n+1
//     // }
//     n = n+1
//     document.getElementById("num").value=n*1
// }
//
// function num_2_click(){
//     var num=document.getElementById("num")
//     var  n = num.value
//     // if (n==0){
//     //     n="1"
//     // }else {
//     //     n = n+1
//     // }
//     n = n+2
//     document.getElementById("num").value=n*1
// }
//
// function num_3_click(){
//     var num=document.getElementById("num")
//     var  n = num.value
//     // if (n==0){
//     //     n="1"
//     // }else {
//     //     n = n+1
//     // }
//     n = n+3
//     document.getElementById("num").value=n*1
// }
//
// function num_4_click(){
//     var num=document.getElementById("num")
//     var  n = num.value
//     // if (n==0){
//     //     n="1"
//     // }else {
//     //     n = n+1
//     // }
//     n = n+4
//     document.getElementById("num").value=n*1
// }
//
// function num_5_click(){
//     var num=document.getElementById("num")
//     var  n = num.value
//     // if (n==0){
//     //     n="1"
//     // }else {
//     //     n = n+1
//     // }
//     n = n+5
//     document.getElementById("num").value=n*1
// }
//
// function num_6_click(){
//     var num=document.getElementById("num")
//     var  n = num.value
//     // if (n==0){
//     //     n="1"
//     // }else {
//     //     n = n+1
//     // }
//     n = n+6
//     document.getElementById("num").value=n*1
// }
//
// function num_7_click(){
//     var num=document.getElementById("num")
//     var  n = num.value
//     // if (n==0){
//     //     n="1"
//     // }else {
//     //     n = n+1
//     // }
//     n = n+7
//     document.getElementById("num").value=n*1
// }
//
// function num_8_click(){
//     var num=document.getElementById("num")
//     var  n = num.value
//     // if (n==0){
//     //     n="1"
//     // }else {
//     //     n = n+1
//     // }
//     n = n+8
//     document.getElementById("num").value=n*1
// }
//
// function num_9_click(){
//     var num=document.getElementById("num")
//     var  n = num.value
//     // if (n==0){
//     //     n="1"
//     // }else {
//     //     n = n+1
//     // }
//     n = n+9
//     document.getElementById("num").value=n*1
// }

效果图：

试试效果:

posted @ 2021-12-10 11:36 隔壁老闫阅读(151) 评论(0) 收藏举报

刷新页面返回顶部

练习题-css+html+js实现计算器功能

公告