javascript怎么實(shí)現(xiàn)編寫(xiě)網(wǎng)頁(yè)版計(jì)算器

發(fā)布時(shí)間：2021-08-09 02:06:08 來(lái)源：億速云閱讀：139 作者：chen 欄目：開(kāi)發(fā)技術(shù)

本篇內(nèi)容主要講解“javascript怎么實(shí)現(xiàn)編寫(xiě)網(wǎng)頁(yè)版計(jì)算器”，感興趣的朋友不妨來(lái)看看。本文介紹的方法操作簡(jiǎn)單快捷，實(shí)用性強(qiáng)。下面就讓小編來(lái)帶大家學(xué)習(xí)“javascript怎么實(shí)現(xiàn)編寫(xiě)網(wǎng)頁(yè)版計(jì)算器”吧!

本篇主要紀(jì)錄的是利用javscript實(shí)現(xiàn)一個(gè)網(wǎng)頁(yè)計(jì)算器的效果，供大家參考，具體內(nèi)容如下

話不多說(shuō)，代碼如下：

首先是html的代碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>利用js實(shí)現(xiàn)網(wǎng)頁(yè)版計(jì)算器</title>
    <link rel="stylesheet" href="cal.css" >
</head>
<body>
<div id="container" class="container">
    <input id="result" class="result">
    <div id="cal" class="clearfix">
        <div id="num" class="fl">
            <div id="top" class="clearfix">
                <input id="clear" type="button" value="C">
                <input id="antonyms" type="button" value="+/-">
                <input id="remainder" type="button" value="%">
            </div>
            <div id="bonttom" class="clearfix">
                <input type="button" value="7">
                <input type="button" value="8">
                <input type="button" value="9">
                <input type="button" value="4">
                <input type="button" value="5">
                <input type="button" value="6">
                <input type="button" value="1">
                <input type="button" value="2">
                <input type="button" value="3">
                <input class="zero" type="button" value="0">
                <input type="button" value=".">
            </div>
        </div>
        <div id="math" class="fr math">
            <input type="button" value="/" onclick="onclicknum('/')">
            <input type="button" value="＊" onclick="onclicknum('*')">
            <input type="button" value="＋" onclick="onclicknum('+')">
            <input type="button" value="－" onclick="onclicknum('-')">
        </div>
        <input id="res" type="button" value="＝">
    </div>
</div>
</body>
</html>

接下來(lái)是css樣式代碼：

* {
    margin: 0px;
    padding: 0px;
}

.clearfix:before, .clearfix:after {
    content: '';
    display: block;
}

.clearfix:after {
    clear: both;
}

.clearfix {
    _zoom: 1;
}

input {
    display: block;
}

.container {
    width: 240px;
    height: 400px;
    border: 2px solid #eb4509;
    margin: 100px auto;
}

.fl {
    float: left;
}

.fr {
    float: right;
}

input {
    width: 60px;
    height: 60px;
    border: 1px solid #000;
    float: left;
    background: #ddd;
    font-size: 24px;
    color: #eb4509;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.math input {
    float: none;
}

input.zero {
    width: 120px;
}

#num {
    width: 180px;
}

#cal #math {
    width: 60px;
}

.result {
    width: 100%;
    height: 100px;
    line-height: 100px;
    border: none;
    background-color: #dfdfdf;
    font-size: 30px;
    float: none;
    outline: none;
    text-align: right;
    padding-right: 20px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

最后上js代碼：

<script type="text/javascript">
    var numresult;
    var str;

    var flag;
    var bot = document.getElementById("bonttom");
    var botInputs = bot.getElementsByTagName("input");
    var clear = document.getElementById("clear");
    var res = document.getElementById("res");
    var math = document.getElementById("math");
    var mathInputs = math.getElementsByTagName("input");
    var antonymsBtn = document.getElementById("antonyms");
    var remainderBtn = document.getElementById("remainder");


    //點(diǎn)擊數(shù)字以及加減乘除
    imporIn(botInputs);
//    imporIn(mathInputs);

    function imporIn(eles) {
        for (var i = 0; i < eles.length; i++) {
            eles[i].onclick = function () {
                onclicknum(this.value);
            }
        }
    }

    //點(diǎn)擊清空c按鈕
    clear.onclick = function () {
        onclickclear();
    }

    //點(diǎn)擊＝號(hào)得到結(jié)果
    res.onclick = function () {
        onclickresult();
    }

    //點(diǎn)擊＋／－
    antonymsBtn.onclick = function () {
        antonyms();
    }

    //點(diǎn)擊％
    remainderBtn.onclick = function () {
        remainder();
    }

    function onclicknum(nums) {
        if (flag) {
            console.log("num=" + nums);
            if (nums !== "/" && nums !== "+" && nums !== "-" && nums !== "*") {
                str.value = "";

                console.log("aa" + nums);
            }
        }
        flag = false;
        str = document.getElementById("result");
        str.value = str.value + nums;
    }

    //清空
    function onclickclear() {
        str = document.getElementById("result");
        str.value = "";
    }

    //得到結(jié)果
    function onclickresult() {
        str = document.getElementById("result");
        numresult = eval(str.value);
        str.value = numresult;
        flag = true;
    }

    //正負(fù)數(shù)
    function antonyms() {
        str = document.getElementById("result");
        str.value = -str.value;
    }

    //%
    function remainder() {
        str = document.getElementById("result");
        str.value = str.value / 100;
    }
</script>

到此，相信大家對(duì)“javascript怎么實(shí)現(xiàn)編寫(xiě)網(wǎng)頁(yè)版計(jì)算器”有了更深的了解，不妨來(lái)實(shí)際操作一番吧！這里是億速云網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！

向AI問(wèn)一下細(xì)節(jié)

javascript怎么實(shí)現(xiàn)編寫(xiě)網(wǎng)頁(yè)版計(jì)算器

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽