HTML、CSS、JavaScript實現計算器

一、基本效果展示

二、基本框架確定

整個頁面由一個表單組成，分爲三類輸入框，一類輸入框type爲“button”類型，表示輸入數字或者是運算符；一類輸入框type爲“text”類型，用於顯示數字以及運算結果，最後一類輸入框type爲“button”類型，表示特殊功能即清零與“=”。

代碼實現：

<body>
<!--
    分爲兩類，一類是數字btn number，一類是運算符btn operator，一類是顯示框 display
-->
<div class="center">
        <h1>HTML CSS, JavaScript 計算器</h1>
        <a href="https://github.com/guuibayer/simple-calculator" target="_blank"><i class="fa fa-github"></i></a>
        <form name="calculator">
            <input type="button" id="clear" class="btn other" value="C" onclick="clear2();">
            <input type="text" id="display">
                <br>
            <input type="button" class="btn number" value="7" onclick="get(this.value);">
            <input type="button" class="btn number" value="8" onclick="get(this.value);">
            <input type="button" class="btn number" value="9" onclick="get(this.value);">
            <input type="button" class="btn operator" value="+" onclick="get(this.value);">
                <br>
            <input type="button" class="btn number" value="4" onclick="get(this.value);">
            <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 operator" value="*" onclick="get(this.value);">
                <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 operator" value="-" onclick="get(this.value);">
                <br>
            <input type="button" class="btn number" value="0" 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="getres();">
        </form>
    </div>
</body>

三、基本功能實現

設定全局變量Value，用於儲存輸入數字以及運算符
get(value)函數，即得到相應的值並顯示在文本框中(每得到相應的值就加到全局變量中，形成一個字符型等式)
getres()函數，函數使用eval(Value)計算結果，注意，在getres()函數中，分爲兩步，第一步爲清楚原始文本框的內容，第二步爲將計算結果顯示到文本框
clear2()函數,完成清零功能，即清空文本框中內容，清空全局變量內容
代碼實現：

    <script type="text/javascript">
            var value1="";
            function get(value){
                value1+=value;
                document.getElementById("display").value +=value;
            }
            function getres(){
                document.getElementById("display").value = "";
                document.getElementById("display").value +=eval(value1);
            }
            function clear2(){
                document.getElementById("display").value = "";
                value1=""; 
        }
    </script>

PS:關於eval()

定義和用法: eval() 函數可計算某個字符串，並執行其中的的 JavaScript 代碼。
語法: eval(string) 參數描述 string 必需。要計算的字符串，其中含有要計算的 JavaScript表達式或要執行的語句。
返回值 :通過計算 string 得到的值（如果有的話）。
說明 :該方法只接受原始字符串作爲參數，如果 string 參數不是原始字符串，那麼該方法將不作任何改變地返回。因此請不要爲 eval()函數傳遞 String 對象來作爲參數。如果試圖覆蓋 eval 屬性或把 eval() 方法賦予另一個屬性，並通過該屬性調用它，則 ECMAScript 實現允許拋出一個 EvalError 異常。

拋出 :如果參數中沒有合法的表達式和語句，則拋出 SyntaxError 異常。如果非法調用 eval()，則拋出 EvalError 異常。如果傳遞給 eval() 的 Javascript 代碼生成了一個異常，eval() 將把該異常傳遞給調用者。

四、總體代碼實現（包括css樣式）

<!DOCTYPE html>
<html>
<head>
    <title>計算器</title>
    <style type="text/css">
    * {
    border: none;
    font-family: 'Open Sans', sans-serif;
    margin: 0;
    padding: 0;
}
body {

}
.center {
    background-color: #fff;
    border-radius: 50%;
    height: 600px;
    margin: auto;
    width: 600px;
}
h1 {
    color: #495678;
    font-size: 30px;    
    margin-top: 20px;
    padding-top: 50px;
    display: block;
    text-align: center;
    text-decoration: none;
}
a {
    color: #495678;
    font-size: 30px;    
    display: block;
    text-align: center;
    text-decoration: none;
    padding-top: 20px;
}
form {
    background-color: #495678;
    box-shadow: 4px 4px #3d4a65;
    margin: 40px auto;
    padding: 40px 0 30px 40px;  
    width: 280px;
}
.btn {
    outline: none;
    cursor: pointer;
    font-size: 20px;
    height: 45px;
    margin: 5px 0 5px 10px;
    width: 45px;
}
.btn:first-child {
    margin: 5px 0 5px 10px;
}
.btn, #display, form {
    border-radius: 25px;
}
#display {
    outline: none;
    background-color: #98d1dc;
    box-shadow: inset 6px 6px 0px #3facc0;
    color: #dededc;
    font-size: 20px;
    height: 47px;
    text-align: right;
    width: 165px;
    padding-right: 10px;
    margin-left: 10px;
}
.number {
    background-color: #72778b;
    box-shadow: 0 5px #5f6680;
    color: #dededc;
}
.number:active {
    box-shadow: 0 2px #5f6680;
    -webkit-transform: translateY(2px);
    -ms-transform: translateY(2px);
    -moz-tranform: translateY(2px);
    transform: translateY(2px);
}
.operator {
    background-color: #dededc;
    box-shadow: 0 5px #bebebe;
    color: #72778b;
}
.operator:active {
    box-shadow: 0 2px #bebebe;
    -webkit-transform: translateY(2px);
    -ms-transform: translateY(2px);
    -moz-tranform: translateY(2px);
    transform: translateY(2px);
}
.other {
    background-color: #e3844c;
    box-shadow: 0 5px #e76a3d;
    color: #dededc;
}
.other:active {
    box-shadow: 0 2px #e76a3d;
    -webkit-transform: translateY(2px);
    -ms-transform: translateY(2px);
    -moz-tranform: translateY(2px);
    transform: translateY(2px);
}
    </style>
    <script type="text/javascript">
        alert("ssss");
        var value1="";
        function get(value){
            value1+=value;
            document.getElementById("display").value += value;
        }
        function getres(){
            document.getElementById("display").value = "";
            document.getElementById("display").value += eval(value1);
        }
        function clear2(){
            document.getElementById("display").value = "";
            value1=""; 
        }
    </script>
</head>
<body>
<div id="center">
<form>
<input type="button" id="clear" class="btn other" value="C" onclick="clear2();">
            <input type="text" id="display">
                <br>
            <input type="button" class="btn number" value="7" onclick="get(this.value);">
            <input type="button" class="btn number" value="8" onclick="get(this.value);">
            <input type="button" class="btn number" value="9" onclick="get(this.value);">
            <input type="button" class="btn operator" value="+" onclick="get(this.value);">
                <br>
            <input type="button" class="btn number" value="4" onclick="get(this.value);">
            <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 operator" value="*" onclick="get(this.value);">
                <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 operator" value="-" onclick="get(this.value);">
                <br>
            <input type="button" class="btn number" value="0" 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="getres();">

</form>
</div>
</body>
</html>

JavaScript補充內容

一、正則表達式

1.1 基本概念

正則表達式是由一個字符序列形成的搜索模式。當你在文本中搜索數據時，你可以用搜索模式來描述你要查詢的內容。正則表達式可以是一個簡單的字符，或一個更復雜的模式。正則表達式可用於所有文本搜索和文本替換的操作。

1.2 基本語法

語法： /正則表達式主體/修飾符(可選)

實例：var patt = /runoob/i

runoob 是一個正則表達式主體 (用於檢索)。
i 是一個修飾符 (表示搜索不區分大小寫)。

1.3 幾個實例

在 JavaScript 中，正則表達式通常用於兩個字符串方法 : search() 和 replace()。

search() 方法用於檢索字符串中指定的子字符串，或檢索與正則表達式相匹配的子字符串，並返回子串的起始位置。

replace() 方法用於在字符串中用一些字符替換另一些字符，或替換一個與正則表達式匹配的子串。

1.3.1 search()

將/World/i換爲“World”會是一樣的結果。字符串參數會轉換爲正則表達式

1.3.2 replace()

將/World/i換爲“World”也會是一樣的結果。

正則表達式參數可用在以上方法中 (替代字符串參數)。
正則表達式使得搜索功能更加強大(如實例中不區分大小寫)。

1.4 正則表達式修飾符

修飾符用於執行區分大小寫和全局匹配:

修飾符	描述
i	執行對大小寫不敏感的匹配。
g	執行全局匹配（查找所有匹配而非在找到第一個匹配後停止）。
m	執行多行匹配。

1.5 正則表達式模式

1.5.1 方括號

方括號用於查找某個範圍內的字符：

表達式	描述
[abc]	查找方括號之間的任何字符。
[0-9]	查找任何從 0 至 9 的數字。
(x\|y)	查找任何以\|分隔的選項。
[a-z]	查找任何從小寫 a 到小寫 z 的字符。
[A-Z]	查找任何從大寫 A 到大寫 Z 的字符。
[A-z]	查找任何從大寫 A 到小寫 z 的字符。
[adgk]	查找給定集合內的任何字符。
[^adgk]	查找給定集合外的任何字符。
(red\|blue\|green)	查找任何指定的選項。

1.5.2 元字符

元字符	描述
.	查找單個字符，除了換行和行結束符。
\w	查找單詞字符。
\W	查找非單詞字符。
\d	查找數字。
\D	查找非數字字符。
\s	查找空白字符。
\S	查找非空白字符。
\b	匹配單詞邊界。
\B	匹配非單詞邊界。
\0	查找 NULL 字符。
\n	查找換行符。
\f	查找換頁符。
\r	查找回車符。
\t	查找製表符。
\v	查找垂直製表符。
\xxx	查找以八進制數 xxx 規定的字符。
\xdd	查找以十六進制數 dd 規定的字符。
\uxxxx	查找以十六進制數 xxxx 規定的 Unicode 字符。

舉例：
var str=”Hello World！”;
var patt1=/h.l/g;
對字符串的“h.l”進行搜索，匹配的是：Hello World！

var str="Hello World！";
var patt1=/\w/g;

對字符串中的單詞字符進行全局搜索：Hello World！

var str="Hello World！";
var patt1=/\W/g;

對字符串中的非單詞字符進行全局搜索：Hello World！

1.5.3 量詞

量詞	描述
n+	匹配任何包含至少一個 n 的字符串。
n*	匹配任何包含零個或多個 n 的字符串。
n?	匹配任何包含零個或一個 n 的字符串。
n{X}	匹配包含 X 個 n 的序列的字符串。例如，/a{2}/ 不匹配 “candy,” 中的 “a”，但是匹配 “caandy,” 中的兩個 “a”，且匹配 “caaandy.” 中的前兩個 “a”。
n{X,}	X 是一個正整數。前面的模式 n 連續出現至少 X 次時匹配。例如，/a{2,}/ 不匹配 “candy” 中的 “a”，但是匹配 “caandy” 和 “caaaaaaandy.” 中所有的 “a”。
n{X,Y}	X 和 Y 爲正整數。前面的模式 n 連續出現至少 X 次，至多 Y 次時匹配。例如，/a{1,3}/ 不匹配 “cndy”，匹配 “candy,” 中的 “a”，”caandy,” 中的兩個 “a”，匹配 “caaaaaaandy” 中的前面三個 “a”。注意，當匹配 “caaaaaaandy” 時，即使原始字符串擁有更多的 “a”，匹配項也是 “aaa”。
n$	匹配任何結尾爲 n 的字符串。
^n	匹配任何開頭爲 n 的字符串。
?=n	匹配任何其後緊接指定字符串 n 的字符串。
?!n	匹配任何其後沒有緊接指定字符串 n 的字符串。

二、RegExp對象

2.1 基本概念

在 JavaScript 中，RegExp 對象是一個預定義了屬性和方法的正則表達式對象。

2.2 基本語法

var patt=new RegExp(pattern,modifiers);

或者更簡單的方式:

var patt=/pattern/modifiers;

pattern（模式）描述了表達式的模式
modifiers(修飾符) 用於指定全局匹配、區分大小寫的匹配和多行匹配，如：/i、/g等

2.3 基本方法

2.3.1 exec()

exec() 方法用於檢索字符串中的正則表達式的匹配。

如果字符串中有匹配的值返回該匹配值，否則返回 null。

語法：RegExpObject.exec(string)

舉例：

2.3.2 test()

test()方法用於檢測一個字符串是否匹配某個模式.

如果字符串中有匹配的值返回 true ，否則返回 false。

語法：RegExpObject.test(string)

舉例：

2.4支持正則表達式的String對象方法

2.4.1 search()

search() 方法用於檢索字符串中指定的子字符串，或檢索與正則表達式相匹配的子字符串。

如果找到返回子字符串位置
如果沒有找到任何匹配的子串，則返回 -1。
舉例：

2.4.2 match()

match() 方法可在字符串內檢索指定的值，或找到一個或多個正則表達式的匹配。

注意： match() 方法將檢索字符串 String Object，以找到一個或多個與 regexp
匹配的文本。這個方法的行爲在很大程度上有賴於 regexp 是否具有標誌 g。如果 regexp 沒有標誌 g，那麼 match()
方法就只能在 stringObject 中執行一次匹配。如果沒有找到任何匹配的文本， match() 將返回
null。否則，它將返回一個數組，其中存放了與它找到的匹配文本有關的信息。

舉例：

2.4.3 replace()

replace() 方法用於在字符串中用一些字符替換另一些字符，或替換一個與正則表達式匹配的子串
語法
string.replace(searchvalue,newvalue)
參數值
searchvalue：規定子字符串或要替換的模式的 RegExp 對象。
newvalue：一個字符串值。規定了替換文本或生成替換文本的函數。
返回值：一個新的字符串，是用 replacement 替換了 regexp 的第一次匹配或所有匹配之後得到的。
舉例：

2.4.4 split()

split() 方法用於把一個字符串分割成字符串數組。

提示：如果把空字符串 (“”) 用作 separator，那麼 stringObject 中的每個字符之間都會被分割。

注意： split() 方法不改變原始字符串。

用正則表達式實現表單驗證

JS Demo

/*是否帶有小數*/
function    isDecimal(strValue )  {  
   var  objRegExp= /^\d+\.\d+$/;
   return  objRegExp.test(strValue);  
}  

/*校驗是否中文名稱組成 */
function ischina(str) {
    var reg=/^[\u4E00-\u9FA5]{2,4}$/;   /*定義驗證表達式*/
    return reg.test(str);     /*進行驗證*/
}

/*校驗是否全由8位數字組成 */
function isStudentNo(str) {
    var reg=/^[0-9]{8}$/;   /*定義驗證表達式*/
    return reg.test(str);     /*進行驗證*/
}

/*校驗電話碼格式 */
function isTelCode(str) {
    var reg= /^((0\d{2,3}-\d{7,8})|(1[3584]\d{9}))$/;
    return reg.test(str);
}

/*校驗郵件地址是否合法 */
function IsEmail(str) {
    var reg=/^([a-zA-Z0-9_-])+@([a -zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+$/;
    return reg.test(str);
}


function  fun1(){
    // if(!isStudentNo(document.getElementById("sno").value)){
    //  alert("學生編號是8位數字");
    //  document.getElementById("sno").focus();
    //  return false;
    // }

    // if(!ischina(document.getElementById("username").value)){
    //  alert("學生姓名必須填寫中文");
    //  document.getElementById("username").focus();
    //  return false;  
    // }

    if(!IsEmail(document.getElementById("email").value)){
        alert("郵箱地址錯誤");
        document.getElementById("email").focus();
        return false;  
    }

    // if(!isTelCode(document.getElementById("tel").value)){
    //  alert("電話號碼不對");
    //  document.getElementById("tel").focus();
    //  return false;  
    // }

    /*運行到這裏說明驗證通過返回true    submit提交按鈕起作用提交表單*/
    alert("提交成功")
    return true;
}

網頁方向第四次培訓總結