web學習之js寫計算器

目錄

 

web學習之js小案例

css部分

js部分：

html部分：

 

web學習之js小案例

css部分

 * {
            border: none;
            margin: 0;
            padding: 0;
        }

        .center {
            background-color: #fff;
            border-radius: 80%;
            height: 800px;
            margin: auto;
            width: 800px;
        }

        form {
            background-color: #5374c5;
            box-shadow: 10px 10px #3d4a65;
            margin: 40px auto;
            padding: 40px 10px 30px 30px;
            width: 270px;
        }

        .btn {
            outline: none;
            font-size: 20px;
            height: 45px;
            margin: 5px 0 5px 10px;
            width: 45px;
        }

        .btn:first-child {
            margin: 5px 0 5px 10px;
        }

        #display {
            outline: none;
            background-color: white;
            color: black;
            font-size: 20px;
            height: 47px;
            text-align: right;
            width: 165px;
            padding-right: 10px;
            margin-left: 0px;
        }

        .btn,
        #display,
        form {
            border-radius: 25px;
        }

        .number {
            background-color: #f1cd00;
            box-shadow: 0 5px #76ee05d0;
            color: #131312;
        }

        .number:active {
            box-shadow: 0 2px #5f6680;
            -webkit-transform: translateY(2px);
            -ms-transform: translateY(2px);
            -moz-tranform: translateY(2px);
            transform: translateY(2px);
        }

        .number:hover {
            background-color: rgb(114, 119, 139, 0.4);
            box-shadow: 0 5px #5f6680;
            color: #dededc;
        }

        .operator {
            background-color: #6df811;
            box-shadow: 0 5px #0b3cf0;
        }

        .operator:hover {
            background-color: rgba(233, 233, 17, 0.6);
            color: #0937f0;
        }

        .other {
            background-color: rgba(240, 10, 201, 0.7);
            box-shadow: 0 5px #02f0f0;
        }

        .other:hover {
            background-color: rgba(8, 190, 245, 0.4);
            color: #dededc;
        }

        .button_clear {
            margin-left: 10px;
            padding: 5px;
            outline: none;
            border-radius: 25px;
            background-color: rgb(248, 247, 247);
            color: rgb(0, 10, 10);
            font-size: 16px;
            font-style: strong;
            width: 80px;
            height: 28px;

        }

        .button_clear:active {
            background-color: rgb(10, 252, 10);
            box-shadow: 0 5px #666;
            transform: translateY(2px);
        }

        .button_back {
            margin-left: 58px;
            padding: 5px;
            outline: none;
            border-radius: 25px;
            background-color: rgb(250, 245, 243);
            color: rgb(0, 0, 0);
            font-size: 16px;
            font-style: strong;
            width: 80px;
            height: 28px;

        }

        .button_back:active {
            background-color: rgb(10, 247, 10);
            box-shadow: 0 5px #666;
            transform: translateY(2px);

        }

        .off_on {
            margin-left: 20px;
            padding: 5px;
            outline: none;
            border-radius: 25px;
            background-color: rgb(250, 245, 243);
            color: rgb(17, 18, 19);
            font-size: 16px;
            font-style: strong;
            width: 60px;
            height: 28px;
        }

        .off_on:active {
            background-color: rgb(7, 252, 39);
            box-shadow: 0 5px #666;
            transform: translateY(2px);
        }

        p,
        h1 {
            font-family: 楷體;
        }

js部分：

var power = 1;
// 1 是開機   -1是關機
function off() {//一開始就運行---》 關機
    power = -power;
    if (power == -1) {
        document.getElementById("display").value = "";
    } else {
        welcome();
    }

};
function clearout() {
    if (power == -1) {
        document.getElementById("display").value = "";
    } else {
        document.getElementById("display").value = "";
        document.getElementById("display").focus();
    }
};
function welcome() {
    document.getElementById("display").value = "歡迎使用PJ牌";
    setTimeout(welcome_end, 1000);
};
function welcome_end() {
    document.getElementById("display").value = "";
    document.getElementById("display").focus();
};

function get(value) {
    if (power == 1) {
        document.getElementById("display").value += value;
    } else {
        document.getElementById("display").value = "";
    }

};
function back() {
    if (power == 1) {
        var now_result = document.getElementById("display"); 
        document.getElementById("display").value = now_result.value.substring(0, now_result.value.length - 1);
    } else {
        document.getElementById("display").value = "";
    }

};
function isInteger(obj){
 
    return typeof obj === 'number' && obj%1 === 0;      //是整數，則返回true，否則返回false
}

function calculates() {
    if (power == 1) {
        var result = 0;
        result = document.getElementById("display").value;
        var flag = isInteger(eval(result));
        if(!flag)
        document.getElementById("display").value = eval(result).toFixed(8);
        else
        document.getElementById("display").value = eval(result);
    } else {
        document.getElementById("display").value = "";
    }

};

html部分：

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>Calculator</title>
    <link rel="stylesheet" href="style.css">
    <script src="calculator.js"></script>
</head>

<body link="grey" vlink="grey" alink="grey" Onload="off()">
    <div class="center">
        <h1>溫馨提示：</h1>
        <br>
        <p>&nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp Back爲回退一位數字,off電源開關,開機後等待一秒,涉及小數位的均保留8位小數</p>
        <form name="calculator">
            <p> PJ牌計算器</p>
            <br>
            <input type="text" id="display" width="300px" value="">
            <input type="button" class="off_on" value="OFF" onclick="off();">
            <br>
            <br><input type="button" class="button_clear" value="Clear" onclick="clearout();">
            <input type="button" class="button_back" value="Back" onclick="back();">
            <br>
            <input type="button" class="btn number" value="1" onclick="get(this.value);">
            <input type="button" class="btn number" value="2" onclick="get(this.value);">
            <input type="button" class="btn number" value="3" onclick="get(this.value);">
            <input type="button" class="btn number" value="4" onclick="get(this.value);">
            <br />
            <input type="button" class="btn number" value="5" onclick="get(this.value);">
            <input type="button" class="btn number" value="6" onclick="get(this.value);">
            <input type="button" class="btn number" value="7" onclick="get(this.value);">
            <input type="button" class="btn number" value="8" onclick="get(this.value);">
            <br />
            <input type="button" class="btn number" value="9" onclick="get(this.value);">
            <input type="button" class="btn number" value="0" onclick="get(this.value);">
            <input type="button" class="btn number" value="." onclick="get(this.value);">
            <input type="button" class="btn operator" value="-" onclick="get(this.value);">
            <br />
            <input type="button" class="btn operator" value="+" onclick="get(this.value);">
            <input type="button" class="btn operator" value="*" onclick="get(this.value);">
            <input type="button" class="btn operator" value="/" onclick="get(this.value);">
            <input type="button" class="btn other" value="=" onclick="calculates();">
        </form>
    </div>

</body>

</html>