【前端】js4

IT界小小小學生發表於2020-12-22
前端JS

文章目錄

1.案例_隔行換色

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script>
			/*
			* 隔行換色: 奇偶行的背景色不一樣
			*  1. 事件:  頁面載入
			*  2. 邏輯:
			*  		1. 找到所有的行
			*  		2. 遍歷,改變背景色
			*/
			window.onload = function (ev) {
			    var trs = document.getElementsByTagName("tr");
			    for(var i=2;i<trs.length; i++){
			        if(i % 2 == 1){ //奇數行，行數和下標不一樣
			            trs[i].style.backgroundColor = "green"
					}
				}
			}
		</script>

<!--1111111111111111111111111111111111111111111111111111111111111111111111111111-->	
		<script>
			/*
			* 觸控換色
			*  1. 事件:
			*  		滑鼠移上去 onmouseover
			*  		滑鼠移出去 onmouseout
			*  2. 邏輯:
			*  		1. 找到所有的行
			*  		2. 遍歷,註冊事件
			*  			a. 當滑鼠移上去的時候, 當前行改個背景色    
			*/
			window.onload = function (ev) {
			    var trs = document.getElementsByTagName("tr");
			    for(var i=2;i<trs.length; i++){
					//左邊 : 屬性           右邊:回撥函式
			        trs[i].onmouseover = function (ev2) {
			            /*
			            * 期望: 觸控哪一行,i就應該是哪一行的索引
			            * 結果: 無論哪一行, i = 6
			            * 解釋:
			            * 		左邊是在頁面載入結束時執行
			            * 		右邊的回撥函式是在使用者滑鼠移上去時執行(不確定)，晚於左邊
			            *
			            * 		確定: 右邊一定是在左邊執行結束時 才有可能執行
			            * 		左邊執行結束: i=6
			            */
			            // console.log(i)
                        // trs[i].style.backgroundColor = "yellow" //無效果
						this.style.backgroundColor = "yellow"
					}
					trs[i].onmouseout = function (ev2) {
			            this.style.backgroundColor = "white"
					}
				}
			}
		</script>
	</head>

<!--1111111111111111111111111111111111111111111111111111111111111111111111111111111-->	
	<body>
		<table id="tab1" border="1" width="800" align="center" >
		   <!--6行6組tr-->
			<tr>
				<td colspan="5"><input type="button" value="新增"/> <input type="button" value="刪除"></td>
			</tr>
			<tr style="background-color: #999999;">
				<th><input type="checkbox"></th>
				<th>分類ID</th>
				<th>分類名稱</th>
				<th>分類描述</th>
				<th>操作</th>
			</tr>
			<tr>
				<td><input type="checkbox"></td>
				<td>1</td>
				<td>手機數碼</td>
				<td>手機數碼類商品</td>
				<td><a href="">修改</a>|<a href="">刪除</a></td>
			</tr>
			<tr>
				<td><input type="checkbox"></td>
				<td>2</td>
				<td>電腦辦公</td>
				<td>電腦辦公類商品</td>
				<td><a href="">修改</a>|<a href="">刪除</a></td>
			</tr>
			<tr>
				<td><input type="checkbox"></td>
				<td>3</td>
				<td>鞋靴箱包</td>
				<td>鞋靴箱包類商品</td>
				<td><a href="">修改</a>|<a href="">刪除</a></td>
			</tr>
			<tr>
				<td><input type="checkbox"></td>
				<td>4</td>
				<td>家居飾品</td>
				<td>家居飾品類商品</td>
				<td><a href="">修改</a>|<a href="">刪除</a></td>
			</tr>
		</table>
	</body>
</html>

在這裡插入圖片描述

2.js中的正規表示式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        /*
        *   正規表示式: regular expression  (regex)
        *       具有某種特定規律的表示式
        *   在java中, 正規表示式就是個字串 (完全匹配)
        *   在js中,正則是 類 (模糊匹配)
        *
        *  1. 正 則物件的 兩種建立方式
                1. 正規表示式是JS中是一個類：RegExp = Regular Expression 正規表示式
                    1. 格式: var reg = new RegExp("正規表示式");
                2. 以/開頭，以/結尾，中間的部分就是正規表示式
                    1. var reg = /正規表示式/匹配模式;

                        匹配模式 i = ignore case 忽略大小寫
        */
        var reg = new RegExp("abc") //字串只有包含abc,返回true
        var reg = /abc/ // 包含
        var reg = /^abc/ // 異或(數字6上) : 以什麼開頭
        var reg = /abc$/ //  $ : 以什麼結尾
        var reg = /^(abc)+$/i // 完全匹配，abc一個或多個

        var str = "abcabcABC"
        var result = reg.test(str);
        document.write(result)
    </script>
</head>
<body>
</body>
</html>

3.案例_表單校驗

在這裡插入圖片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>驗證註冊頁面</title>
    <style type="text/css">
        body {
            margin: 0;
            padding: 0;
            font-size: 12px;
            line-height: 20px;
        }

        .main {
            width: 525px;
            margin-left: auto;
            margin-right: auto;
        }

        .hr_1 {
            font-size: 14px;
            font-weight: bold;
            color: #3275c3;
            height: 35px;
            border-bottom-width: 2px;
            border-bottom-style: solid;
            border-bottom-color: #3275c3;
            vertical-align: bottom;
            padding-left: 12px;
        }

        .left {
            text-align: right;
            width: 80px;
            height: 25px;
            padding-right: 5px;
        }

        .center {
            width: 280px;
        }

        .in {
            width: 130px;
            height: 16px;
            border: solid 1px #79abea;
        }

        .red {
            color: #cc0000;
            font-weight: bold;
        }

        div {
            color: #F00;
        }
    </style>
    <script type="text/javascript">
        /*
        * 1. 事件
        *       a. 游標離開當前輸入框觸發: onblur
        *       b. onsubmit : 表單提交(submit按鈕被點選)的時候觸發
        *           return true : 資料正常提交
        *           return false : 資料拒絕提交
        */
        function myFormCheck() {
            var result = true
            /*
            * 表單資料校驗
            *   1. 所有表單項都校驗合格 , return true
            *   2. 如果有一項錯誤, return false
            *   TODO:
            */
            var user = document.getElementById("user");
            // 3~5
            if(user.value.length < 3 || user.value.length > 5){
                //提示
                // alert("使用者名稱必須在3~5長度之間")
                document.getElementById("userspan").innerText = "使用者名稱必須在3~5長度之間"
                result = false;
            }

            var pwd = document.getElementById("pwd");
            if(pwd.value.length < 3){
                document.getElementById("pwdspan").innerText = "密碼必須3位或以上"
                result = false;
            }

            var repwd = document.getElementById("repwd");
            if(repwd.value != pwd.value){
                document.getElementById("repwdspan").innerText = "確認密碼必須一致"
                result = false;
            }

            var email = document.getElementById("email");
            var regex = /^([a-zA-Z\d])(\w|\-)+@[a-zA-Z\d]+\.[a-zA-Z]{2,4}$/
            if(!regex.test(email.value)){
                document.getElementById("emailspan").innerText = "郵箱地址必須字母開頭(字母數字和下劃線+@+地址.com/cn)"
                result = false;
            }
            return result;
        }
    </script>
</head>

<body>
<form action="http://www.baidu.com" method="get" id="myform" onsubmit="return myFormCheck()">
    <table class="main" border="0" cellspacing="0" cellpadding="0">
        <tr>
            <td><img src="img/logo.jpg" alt="logo"/><img src="img/banner.jpg" alt="banner"/></td>
        </tr>
        <tr>
            <td class="hr_1">新使用者註冊</td>
        </tr>
        <tr>
            <td style="height:10px;"></td>
        </tr>
        <tr>
            <td>
                <table width="100%" border="0" cellspacing="0" cellpadding="0">
                    <tr>
                        <!-- TODO: 將要做
                        不能為空， 輸入長度必須介於 3 和 5 之間 -->
                        <td class="left">使用者名稱：</td>
                        <td class="center">
                            <input id="user" name="user" type="text" class="in"/>
                            <span style="color: red" id="userspan"></span>
                        </td>
                    </tr>
                    <tr>
                        <!-- 不能為空， 輸入長度大於6個字元 -->
                        <td class="left">密碼：</td>
                        <td class="center">
                            <input id="pwd" name="pwd" type="password" class="in"/>

                            <span style="color: red" id="pwdspan"></span>
                        </td>
                    </tr>
                    <tr>
                        <!-- 不能為空， 與密碼相同 -->
                        <td class="left">確認密碼：</td>
                        <td class="center">
                            <input id="repwd" name="repwd" type="password" class="in"/>
                            <span style="color: red" id="repwdspan"></span>
                        </td>
                    </tr>
                    <tr>
                        <!-- 不能為空， 郵箱格式要正確 -->
                        <td class="left">電子郵箱：</td>
                        <td class="center">
                            <input id="email" name="email" type="text" class="in"/>
                            <span style="color: red" id="emailspan"></span>
                        </td>
                    </tr>
                    <tr>
                        <!-- 不能為空， 使用正規表示式自定義校驗規則,1開頭，11位全是數字 -->
                        <td class="left">手機號碼：</td>
                        <td class="center">
                            <input id="mobile" name="mobile" type="text" class="in"/>
                        </td>
                    </tr>
                    <tr>
                        <!-- 不能為空， 要正確的日期格式 -->
                        <td class="left">生日：</td>
                        <td class="center">
                            <input id="birth" name="birth" type="text" class="in"/>
                        </td>
                    </tr>
                    <tr>
                        <td class="left">&nbsp;</td>
                        <td class="center">
                            <input name="" type="image" src="img/register.jpg"/>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>
</form>
</body>
</html>

相關文章