網頁方向第四次培訓總結

HTML、CSS、JavaScript實現計算器

一、基本效果展示

計算器Demo

二、基本框架確定

整個頁面由一個表單組成,分爲三類輸入框,一類輸入框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>


三、基本功能實現

  1. 設定全局變量Value,用於儲存輸入數字以及運算符
  2. get(value)函數,即得到相應的值並顯示在文本框中(每得到相應的值就加到全局變量中,形成一個字符型等式)
  3. getres()函數,函數使用eval(Value)計算結果,注意,在getres()函數中,分爲兩步,第一步爲清楚原始文本框的內容,第二步爲將計算結果顯示到文本框
  4. clear2()函數,完成清零功能,即清空文本框中內容,清空全局變量內容
  5. 代碼實現:
    <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() 方法 用於在字符串中用一些字符替換另一些字符,或替換一個與正則表達式匹配的子串。

將/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對象方法

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;
}
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章