JavaScript的應(yīng)用

javascript的應(yīng)用

校驗(yàn)表單

一、步驟分析

  1. 第一步： 確定事件(onsubmit)并為其綁定一個函數(shù)
  2. 第二步：書寫這個函數(shù)(獲取用戶輸入的數(shù)據(jù)<獲取數(shù)據(jù)時需要在指定位置定義一個 id>)
  3. 第三步： 對用戶輸入的數(shù)據(jù)進(jìn)行判斷
  4. 第四步： 數(shù)據(jù)合法(讓表單提交)
  5. 第五步：數(shù)據(jù)非法(給出錯誤提示信息， 不讓表單提交)

問題： 如何控制表單提交？

關(guān)于事件 onsubmit： 一般用于表單提交的位置，那么需要在定義函數(shù)的時候給出一個
返回值。

onsubmit = return checkForm()

二、代碼實(shí)現(xiàn)

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>注冊頁面</title>
        <script>
            function checkForm(){
                //alert("aa");
                /**校驗(yàn)用戶名*/
                //1.獲取用戶輸入的數(shù)據(jù)
                var uValue = document.getElementById("user").value;
                //alert(uValue);
                if(uValue==""){
                    //2.給出錯誤提示信息
                    alert("用戶名不能為空!");
                    return false;
                }
                
                /*校驗(yàn)密碼*/
                var pValue = document.getElementById("password").value;
                if(pValue==""){
                    alert("密碼不能為空!");
                    return false;
                }
                
                /**校驗(yàn)確認(rèn)密碼*/
                var rpValue = document.getElementById("repassword").value;
                if(rpValue!=pValue){
                    alert("兩次密碼輸入不一致!");
                    return false;
                }
                
                /*校驗(yàn)郵箱*/
                var eValue = document.getElementById("eamil").value;
                if(!/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/.test(eValue)){
                    alert("郵箱格式不正確!");
                    return false;
                }
                
            }
        </script>
    </head>
    <body>
        <table border="1px" align="center" width="1300px" cellpadding="0px" cellspacing="0px">
            <!--1.logo部分-->
            <tr>
                <td>
                    <!--嵌套一個一行三列的表格-->
                    <table border="1px" width="100%">
                        <tr height="50px">
                            <td width="33.3%">
                                ![](../img/logo2.png)
                            </td>
                            <td width="33.3%">
                                ![](../img/header.png)
                            </td>
                            <td width="33.3%">
                                <a href="#">登錄</a>
                                <a href="#">注冊</a>
                                <a href="#">購物車</a>
                            </td>
                        </tr>
                    </table>
                </td>               
            </tr>
            <!--2.導(dǎo)航欄部分-->
            <tr height="50px">
                <td bgcolor="black">
                        
                    <a href="#">
                        <font size="5" color="white">首頁</font>
                    </a>     
                    <a href="#">
                        <font color="white">手機(jī)數(shù)碼</font>
                    </a>    
                    <a href="#">
                        <font color="white">電腦辦公</font>
                    </a>    
                    <a href="#">
                        <font color="white">鞋靴箱包</font>
                    </a>    
                    <a href="#">
                        <font color="white">家用電器</font>
                    </a>
                </td>
            </tr>
            <!--3.注冊表單-->
            <tr>
                <td height="600px" background="../img/regist_bg.jpg">
                    <!--嵌套一個十行二列的表格-->
                    <form action="#" method="get" name="regForm" onsubmit="return checkForm()">
                        <table border="1px" width="750px" height="400px" align="center" cellpadding="0px" cellspacing="0px" bgcolor="white">
                            <tr height="40px">
                                <td colspan="2">
                                    <font size="4">會員注冊</font>    USER REGISTER 
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    用戶名
                                </td>
                                <td>
                                    <input type="text" name="user" size="34px" id="user"/>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    密碼
                                </td>
                                <td>
                                    <input type="password" name="password" size="34px" id="password"/>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    確認(rèn)密碼
                                </td>
                                <td>
                                    <input type="password" name="repassword" size="34px" id="repassword"></input>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    Emaile
                                </td>
                                <td>
                                    <input type="text" name="email" size="34px" id="eamil"/>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    姓名
                                </td>
                                <td>
                                    <input type="text" name="username" size="34px"/>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    性別
                                </td>
                                <td>
                                    <input type="radio" name="sex" value="男"/>男
                                    <input type="radio" name="sex" value="女"/>女
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    出生日期
                                </td>
                                <td>
                                    <input type="text" name="birthday" size="34px"/>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    驗(yàn)證碼
                                </td>
                                <td>
                                    <input type="text" name="yzm" />
                                    ![](../img/yanzhengma.png)
                                </td>
                            </tr>
                            <tr>
                                <td colspan="2">
                                    <input type="submit" value="注冊" />
                                </td>
                            </tr>
                        </table>
                    </form>
                </td>               
            </tr>
            <!--4.廣告圖片-->
            <tr>
                <td>
                    ![](../img/footer.jpg)
                </td>
            </tr>
            <!--5.友情鏈接和版權(quán)信息-->
            <tr>
                <td align="center">
                    <a href="#">關(guān)于我們</a>
                    <a href="#">聯(lián)系我們</a>
                    <a href="#">招賢納士</a>
                    <a href="#">法律聲明</a>
                    <a href="#">友情鏈接</a>
                    <a href="#">支付方式</a>
                    <a href="#">配送方式</a>
                    <a href="#">服務(wù)聲明</a>
                    <a href="#">廣告聲明</a>
                    <p>
                        Copyright ? 2005-2016 版權(quán)所有 
                    </p>
                </td>
            </tr>
        </table>
    </body>
</html>

JS代碼：

<script>
            function checkForm(){
                //alert("aa");
                /**校驗(yàn)用戶名*/
                //1.獲取用戶輸入的數(shù)據(jù)
                var uValue = document.getElementById("user").value;
                //alert(uValue);
                if(uValue==""){
                    //2.給出錯誤提示信息
                    alert("用戶名不能為空!");
                    return false;
                }
                
                /*校驗(yàn)密碼*/
                var pValue = document.getElementById("password").value;
                if(pValue==""){
                    alert("密碼不能為空!");
                    return false;
                }
                
                /**校驗(yàn)確認(rèn)密碼*/
                var rpValue = document.getElementById("repassword").value;
                if(rpValue!=pValue){
                    alert("兩次密碼輸入不一致!");
                    return false;
                }
                
                /*校驗(yàn)郵箱*/
                var eValue = document.getElementById("eamil").value;
                if(!/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/.test(eValue)){
                    alert("郵箱格式不正確!");
                    return false;
                }
                
            }
        </script>

HTML部分：

<form action="#" method="get" name="regForm"
onsubmit="return checkForm()">
需要在指定位置添加 id

使用 JS 完成首頁輪播圖效果案例

一、技術(shù)分析：

  • 獲取元素 document.getElementById(“id 名稱”)
  • 事件(onload)
  • 定時操作： setInterval(“changeImg()”,3000);

二、步驟分析：

  1. 第一步： 確定事件(onload)并為其綁定一個函數(shù)
  2. 第二步：書寫綁定的這個函數(shù)
  3. 第三步： 書寫定時任務(wù)(setInterval)
  4. 第四步： 書寫定時任務(wù)里面的函數(shù)
  5. 第五步： 通過變量的方式， 進(jìn)行循環(huán)(獲取輪播圖的位置，并設(shè)置 src 屬性)（在循環(huán)的時候需要注意到了最后一張圖片的時候要重置。）

三、代碼實(shí)現(xiàn)：

圖片切換：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>切換圖片</title>
        <style>
            div{
                border: 1px solid white;
                width:500px ;
                height: 350px;
                margin: auto;
                text-align: center;
            }
        </style>
        <script>
            var i=1;
            function changeImg(){
                i++;
                document.getElementById("img1").src="../../img/"+i+".jpg";
                if(i==3){
                    i=0;
                }
            }
        </script>
    </head>
    <body>
        <div>
            <input type="button" value="下一張" onclick="changeImg()"/>
            ![](../../img/1.jpg)
        </div>
    </body>
</html>

javascript代碼：

<script>
        function init(){
            //書寫輪圖片顯示的定時操作
            setInterval("changeImg()",3000);
        }
        
        //書寫函數(shù)
        var i=0
        function changeImg(){
            i++;
            //獲取圖片位置并設(shè)置src屬性值
            document.getElementById("img1").src="../img/"+i+".jpg";
            if(i==3){
                i=0;
            }
        }
</script>

三、使用 JS 完成頁面定時彈出廣告

1.需求分析

我們希望在首頁中的頂部做一個定時彈出廣告圖片。

2.技術(shù)分析

  • 獲取圖片的位置(document.getElementById(“”))
  • 隱藏圖片： display： none
  • 定時操作： setInterval(“顯示圖片的函數(shù)”， 3000);

3.步驟分析

  • 第一步： 在頁面指定位置隱藏一個廣告圖片(使用 display 屬性的 none 值)
  • 第二步： 確定事件(onload)并為其綁定一個函數(shù)
  • 第三步： 書寫這個函數(shù)(設(shè)置一個顯示圖片的定時操作)
  • 第四步： 書寫定時器中的函數(shù)(獲取廣告圖片的位置并設(shè)置屬性style的display值block)
  • 第五步： 清除顯示圖片的定時操作()
  • 第六步： 書寫隱藏圖片的定時操作
  • 第七步：書寫定時器中的函數(shù)(獲取廣告圖片的位置并設(shè)置屬性 style 的 display 值 none)
  • 第八步： 清除隱藏圖片的定時操作()

4.代碼實(shí)現(xiàn)

<script type="text/javascript">
            function init(){
                //書寫輪圖片顯示的定時操作
                setInterval("changeImg()",3000);
                
                //1.設(shè)置顯示廣告圖片的定時操作
                time = setInterval("showAd()",3000);
            }
            
            //書寫函數(shù)
            var i=0
            function changeImg(){
                i++;
                //獲取圖片位置并設(shè)置src屬性值
                document.getElementById("img1").src="../img/"+i+".jpg";
                if(i==3){
                    i=0;
                }
            }
            
            //2.書寫顯示廣告圖片的函數(shù)
            function showAd(){
                //3.獲取廣告圖片的位置
                var adEle = document.getElementById("img2");
                //4.修改廣告圖片元素里面的屬性讓其顯示
                adEle.style.display = "block";
                //5.清除顯示圖片的定時操作
                clearInterval(time);
                //6.設(shè)置隱藏圖片的定時操作
                time = setInterval("hiddenAd()",3000);
            }
            
            //7.書寫隱藏廣告圖片的函數(shù)
            function hiddenAd(){
                //8.獲取廣告圖片并設(shè)置其style屬性的display值為none
                document.getElementById("img2").style.display= "none";
                //9.清除隱藏廣告圖片的定時操作
                clearInterval(time);
            }
            
</script>

html代碼：

<body onload="init()">
    <!--定時彈出廣告圖片位置-->
    ![](../img/f001a62f-a49d-4a4d-b56f-2b6908a0002c_g.jpg)

總結(jié)

javascript 的引入方式

  • 內(nèi)部引入方式：

    直接將 javascript 代碼寫到<script type=”text/javascript”></script>

  • 外部引入方式：

    需要創(chuàng)建一個.js文件，在里面書寫 javascript代碼，然后在 html文件中通過 script標(biāo)簽的 src 屬性引入該外部的 js 文件

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容