99操在线观看视频,91亚洲五月天,日韩午夜狠狠

學(xué)習(xí)是個不斷探索的過程，不能放棄，還要保持心情。
昨天突發(fā)奇想的想要寫一個計算器。但是完成基礎(chǔ)部分后，對于實(shí)現(xiàn)功能卻是很懵逼，就百度看了很多，但是對于別人的代碼理解起來還是不太好。就開始寫，但是卻無思緒，不知道怎么獲取點(diǎn)擊的是哪一個數(shù)字什么的，開始就遇到了問題。接下來就是計算了，簡單的加減乘除好實(shí)現(xiàn)，但是對于結(jié)果就總達(dá)不到預(yù)期的效果，寫的刪刪改改很是困難。最終在晚上學(xué)長的提示下，用了eval函數(shù)，才簡單的解決了問題，那接下來就總結(jié)一下吧。

實(shí)現(xiàn)的關(guān)鍵：

監(jiān)聽點(diǎn)擊事件
document.onclick 監(jiān)聽全部的點(diǎn)擊事件
document.getElementById("id").onclick 監(jiān)聽當(dāng)前部分的點(diǎn)擊事件
乘（x）除（÷）符號在計算中的正則更改，因?yàn)榕c計算機(jī)默認(rèn)的乘（*）除（/）不一樣
點(diǎn)擊獲取的值及計算返回的值，都要展示在計算框內(nèi)
eval函數(shù)的理解使用
計算結(jié)果，點(diǎn)擊等于（=）號展示結(jié)果
小數(shù)點(diǎn)的位數(shù)，一個數(shù)中，只能有一位小數(shù)
錯誤提示

這些都是實(shí)現(xiàn)過程中需要考慮到的問題，但是由于現(xiàn)在所學(xué)知識的淺薄，就只是實(shí)現(xiàn)了最簡單的計算功能，以后再去完善這些可能出錯的部分。
下面看下基礎(chǔ)部分的代碼：

<style>
*{
    margin: 0;
    padding: 0;
}
#container{
    width: 330px;
    height:270px;
    margin: 100px auto;
    padding: 20px 20px 9px;
    background-color: #9dd2ea;
    border-radius: 5px;
    box-shadow:  0 10px 15px rgba(0, 0, 0, 0.2);
}
#result,#count{
    overflow: hidden;
    margin-left: 8px;
}
#count span,#clear{
    width:66px;
    height: 40px;
    color: #FFFFFF;
    float: left;
    position: relative;
    background-color:#ff9fa8;
    box-shadow: 2px 5px 4px  rgba(0, 0, 0, 0.2);
    cursor: pointer;
    border-radius: 4px;
    text-align: center;
    line-height: 36px;
    font-weight: bolder;
    font-size: 20px;
    margin: 6px;
}
#screen {
    width: 210px;
    height: 40px;
    position: relative;
    float: left;
    top:8px;
    margin-left: 15px;
    background-color: rgba(0, 0, 0, 0.2);
    color: #FFFFFF;
    text-align: right;
    line-height: 40px;
    border-radius: 4px;
    font-size: 17px;
    font-weight: bold;
    box-shadow: inset 0 4px rgba(0, 0, 0, 0.2);
}
#count span{
    color: #676767;
    font-weight: bold;
    background-color: #FFFFFF;
}
#count span:hover{
    background-color: #b1b0ea;
}
span#sum{
    background-color: #ccea99;
}
span#sum:hover{
    background-color: #caea5d;
}
span#clear:hover{
    background-color: #ea6f5a;
}
</style>


<div id="container">
    <div id="result">
        <span id="clear" onclick="result(this.innerText)">C</span>
        <span id="screen"></span>
    </div>
    <div id="count">
        <span onclick="result(this.innerText)">7</span>
        <span onclick="result(this.innerText)">8</span>
        <span onclick="result(this.innerText)">9</span>
        <span onclick="result(this.innerText)">+</span>
        <span onclick="result(this.innerText)">4</span>
        <span onclick="result(this.innerText)">5</span>
        <span onclick="result(this.innerText)">6</span>
        <span onclick="result(this.innerText)">-</span>
        <span onclick="result(this.innerText)">1</span>
        <span onclick="result(this.innerText)">2</span>
        <span onclick="result(this.innerText)">3</span>
        <span onclick="result(this.innerText)">/</span>
        <span onclick="result(this.innerText)">0</span>
        <span onclick="result(this.innerText)" >.</span>
        <span onclick="result(this.innerText)" id="sum" >=</span>
        <span onclick="result(this.innerText)" >*</span>
    </div>
</div>

看下基礎(chǔ)效果出來以后的效果圖吧：

每個鍵的基本色為白色，鼠標(biāo)滑過會變成紫色，歸零鍵為紅色，等于號為綠色

那看下實(shí)現(xiàn)計算功能的代碼：
（由于所學(xué)不深，則用了eval函數(shù)，來實(shí)現(xiàn)功能）

function result(val){    //val為每次點(diǎn)擊得到的值
    var value = document.getElementById("screen"); //回去計算框
    switch(val){
        //自動計算結(jié)果
        case "=":
            value.innerText = eval(value.innerText);
            break;
        //清除計算結(jié)果
        case "C":
            value.innerText = "";
            break;
        //將點(diǎn)擊的值變成連接字符串
        default:
            value.innerText =value.innerText + val;
            break;
    }
}

這樣幾行代碼就實(shí)現(xiàn)了最簡單的計算器了，那看下效果吧：