Python入門23之JS

阿新 • • 發佈：2018-12-23

JS

JS是javascript的簡稱；
1)是指令碼語言，為瀏覽器的一部分;
2)廣泛用於客戶端的指令碼語言，現在也用於服務端;
常用來為網頁新增各式各樣的動態功能（如：輪播圖、tab切換等），為使用者提供更流暢美觀的瀏覽效果。
3)通常JavaScript指令碼是通過嵌入在HTML中來實現自身的功能的。

一.JS表單註冊雛形
需求:
1). 使用者在註冊的時候會輸入一些資訊，但是使用者輸入的內容有可能不合法，會導致伺服器端壓力過大;
2). 當用戶填寫資訊之後，對填寫的資訊進行校驗，不光是前臺需要校驗，後臺也是需要校驗的
這是就需要用到JS，來對前後臺的資料進行交流.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--<style></style>-->
    <!--<link>-->
    <script>
        window.onload = function () {
            // 1. 獲取使用者輸入的使用者名稱的標籤物件;
            var uEle = document.getElementById('username');
            alert(uEle);    //用來彈出指示框
            // 2. 獲取這個物件裡面的值；
            var uValue = uEle.value;
            alert(uValue);
        }
    </script>
</head>
<body>
<form action="#" method="get">
    <!--get: 填寫的資訊會在url裡面顯示， 對於重要的資料來說是不安全的；
        post: 填寫的資訊不會在url裡面顯示
        -->
    使用者名稱: <input type="text" name="username" placeholder="使用者名稱" id="username"><br/>
    密碼: <input type="password" name="passwd" placeholder="密碼"><br/>
    <input type="submit" value="註冊">
</form>
</body>
</html>

在這裡插入圖片描述

二.上面的只是一個雛形，並沒有對註冊資訊提出任何要求
現在的需求如下現在的需求如下：
1）判斷使用者名稱是否為空?
2）校驗密碼是否大於6位，如果不滿足則不合法？
實現步驟：
1). 確定事件型別onsubmit(常見事件型別的網址: http://www.w3school.com.cn/js/js_htmldom_events.asp);
2). 對這個事件繫結一個函式(執行的操作寫在函式裡面);
3).函式的核心功能: 校驗使用者名稱是否為空?
1.獲取輸入使用者名稱標籤提交的內容；
2. if判斷使用者名稱是否為空?
3. 如果資料合法，繼續執行，提交表單；
4. 如果資料不合法，不讓表單提交? (顯示彈出框報錯) — alert

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--<style></style>-->
    <!--<link>-->
    <script>


//  *****************************1. 校驗使用者名稱是否為空? ***************************
        // 定義一個函式
        function checkForm() {
//        1). 獲取輸入使用者名稱標籤提交的內容；
            var user = document.getElementById('username').value;
//        2). if判斷使用者名稱是否為空?
//        3). 如果資料合法， 繼續執行， 提交表單；
//        4). 如果資料不合法， 不讓表單提交? (顯示彈出框報錯) --- alert
            if (user === '') {
                alert("使用者名稱不能為空!");
                return false;
            }
// ******************************2. 校驗密碼長度是否小於6 **************************
// 難點: 獲取密碼長度(http://www.w3school.com.cn/js/js_obj_string.asp)
            var passwdlen = document.getElementById('passwd').value.length;
            if (passwdlen < 6){
                alert("密碼不合法: 長度小於6！");
                return false;
            }
        }
    </script>
</head>
<body>
<form action="#" method="get" onsubmit="return checkForm()">
    使用者名稱: <input type="text" name="username" placeholder="使用者名稱" id="username"><br/>
    密碼: <input type="password" name="passwd" placeholder="密碼" id="passwd"><br/>
    <input type="submit" value="註冊">
</form>
</body>
</html>

在這裡插入圖片描述

三.JS如何實現輪播圖
實現圖片的自動轉換功能
實現步驟：
1）確定事件型別為onclick事件；
2）並跟對應的函式changeImg繫結在一起；
3）實現函式功能；
當點選下一頁按鈕之後，修改img標籤裡面的src屬性內容

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Title</title>
   <style>
       #sowing_map{
           width: 590px;
           height:500px;
           margin: 0 auto;
           text-align: center;
       }
   </style>
   <script>
       // 1. 定義一個變數， 控制圖片的迴圈順序;
       var i = 1;
       function  changeImg() {
           // 2. 當點選下一頁時， i+1, 這個時候， 圖片變成img2;
           i += 1;
           // 3.  修改img標籤裡面的src屬性內容;
           document.getElementById('img').src = 'img/img' + i + '.jpg';
           // 4. 如果圖片輪播結束， 從頭開始輪播；
           if (i === 6){
               i = 0;
           }
       }
   </script>
</head>
<body>
<div id="sowing_map"><img src="img/img7_ad.jpg" height="80" width="1190"/>
   <img src="img/img1.jpg" id="img">
   <input type="button" value="下一頁" onclick="changeImg()">
</div>
</body>
</html>

四.外部引入JS程式碼和CSS樣式實現輪播圖
同時實現網頁定時彈出廣告,並定時取消彈出的廣告：
1.在頁面設定一個隱藏的圖片，style=“display:none”
2.確定事件型別為onload，為其繫結一個函式
3.設定執行的函式
4.編寫定時任務裡面的函式img_Ad()
獲取標籤的樣式display==‘block’
清除顯示的廣告的定時任務
隱藏廣告的定時任務
5.實現定時任務裡面的函式hiddenAd（）
獲取標籤的樣式display==‘block’
清除顯示的廣告的定時任務
主程式碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--Js的引入方式:-->
        <!-- - 內部引入: 直接在head標籤裡面的<script>寫的內容;-->
        <!-- - 外部引入:<script src="js/main.js" ></script-->
    <link href="CSS/main.css" rel="stylesheet">
    <script src="JS/main.js"></script>
</head>
<body>
<div id="sowing_map">
    <img src="img/img1.jpg" id="img">
    <!--<input type="button" value="下一頁" onclick="changeImg()">-->
</div>
<div>
    <img src="img/img7_ad.jpg" id="img_ad" style="display:none">
</div>
</body>
</html>

CSS裡面的程式碼：

#sowing_map{
            width: 590px;
            height: 500px;
            margin: 0 auto;
            text-align: center;
        }
#img_ad{
    width: 1190px;
    height: 80px;
    margin: 0 auto;
    text-align: center;
}

JS裡面的程式碼：

window.onload=function () {
            //每隔1s自動執行某函式
            setInterval('changeImg()',1000);
            //每隔1s執行
            setInterval('img_Ad()',1000);
            adtime=clearInterval(img_Ad(),1000)
        };
        //定義一個變數，控制函式的迴圈順序
        var i=1;
        function changeImg() {
            //當點選下一頁的時候，i+1，這時，圖片變為img2
            i += 1;
            //修改img標籤裡面src的屬性內容
            document.getElementById("img").src = "img/img" + i + ".jpg";
            //如果圖片輪播結束，從頭開始重來
            if (i === 6) {
                i = 0;
            }
        }
        //編寫顯示隱藏圖片的函式
        function img_Ad() {
            //獲取到廣告圖片對應的標籤物件
            var ad=document.getElementById('img_ad');
            //修改廣告裡面的style的屬性display
            ad.style.display='block';
            //設定隱藏廣告圖片的定時任務
            hiddentime=setInterval('hiddenAd()',1000)
        }
        function hiddenAd() {
            var ad=document.getElementById('img_ad');
            ad.style.display='none';
            clearInterval(hiddentime)
        }

這樣一來，就可以減輕主程式碼的榮雜程度，使得程式碼更加的清晰
五.JS使用者註冊介面的優化
填寫使用者名稱和密碼時，旁邊需有提示；
使用者名稱或者密碼註冊時，離開當前填寫框時，立即作出判斷，填寫內容是否符合要求

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function  showUserTip() {
            // 1. 獲取標籤物件;
            document.getElementById('userTip').innerHTML = '<b style="color: lightgray;">使用者名稱不能為空</b>';
        }
        function showPwdTip() {
       // 1. 獲取標籤物件;
            document.getElementById('pwdTip').innerHTML = '<b style="color: lightgray;">密碼必須大於6位</b>';
        }
        function  checkUser() {
            //1. 離焦時判斷使用者名稱是否為空?
            var name = document.getElementById('user').value;
            // 2. 如果為空， 右邊來一個紅色的提示;
            // 3. 如果不為空， 則取消所有提示;
            if (name === ''){
                document.getElementById('userTip').innerHTML = '<b style="color: #f10180">使用者名稱不能為空</b>'
                return false;
            }else{
                document.getElementById('userTip').innerHTML = '<b style="color:  green"> ok </b>'
                return true;
            }
        }
        function  checkPwd() {
//            alert('離焦');
             //1. 離焦時判斷使用者名稱是否為空?
            var pwdLen = document.getElementById('pwd').value.length;
            // 2. 如果為空， 右邊來一個紅色的提示;
            // 3. 如果不為空， 則取消所有提示;
            if (pwdLen < 6){
                document.getElementById('pwdTip').innerHTML = '<b style="color: #f10180">密碼必須大於等於6位</b>'
                return false;
            }else{
                document.getElementById('pwdTip').innerHTML = '<b style="color:  green"> ok </b>'
                return true;
            }
        }
    </script>
</head>
<body>
<!--
    1). 確定事件型別(onfocus-聚焦事件)， 併為其繫結一個函式;
    2). 確定事件型別(onblur-離焦事件)， 併為其繫結一個函式;
-->
<form action="#" method="get">
    <input type="text" id='user' placeholder="輸入使用者名稱" name="username" onfocus="showUserTip()"
           onblur="checkUser()">
    <span id="userTip"></span><br/>
    <input type="password" id="pwd" placeholder="密碼" name="passwd" onfocus="showPwdTip()"
           onblur="checkPwd()">
    <span id="pwdTip"></span><br/>
    <input type="submit" value="註冊">
</form>
</body>
</html>

在這裡插入圖片描述

六.實現表單選項的全選與全不選
步驟分析:
1). 確定事件型別:滑鼠單擊單選按鈕時(onclick事件)，繫結一個函式；
2). 編寫函式checkAll()
當選中編號前面的方框時，不管下面的選沒選，都會被自動選擇；
同理當取消選中編號前面的方框時，下面選則的，都會被自動取消
在這裡插入圖片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function  checkAll() {
            //1. 獲取全選框物件
            var checkAllEle = document.getElementById('checkAll');
//            alert(checkAllEle);
//            //判斷該單選框是否被選中，
//            alert(checkAllEle.checked);
            // 2. 對編號前面的複選框的狀態進行判斷;
            //      - 如果狀態為選中， 則設定所有的單選框為選中狀態;
            //      - 如果狀態為沒有選中， 則設定所有的單選框為沒有選中狀態;
            if (checkAllEle.checked){
                    //- 如果狀態為選中， 則設定所有的單選框為選中狀態;
                    var checkOnes = document.getElementsByName('checkOne');
                    // 依次遍歷所有的單選框， 設定狀態為選中;li = [1,2,3,4]
                    for(var i =0; i<checkOnes.length; i++){
                        // li[0] li[1] li[2] li[3]
                        checkOnes[i].checked = true;
                    }
            }else{
                    //- 如果狀態為未選中， 則設定所有的單選框為未選中狀態;
                    var checkOnes = document.getElementsByName('checkOne');
                    // 依次遍歷所有的單選框， 設定狀態為選中;li = [1,2,3,4]
                    for(var i =0; i<checkOnes.length; i++){
                        // li[0] li[1] li[2] li[3]
                        checkOnes[i].checked = false;
                    }
            }
        }
    </script>
</head>
<body>
<table style="width: 600px;margin: 0 auto;margin-top: 50px;text-align: center;" border="1px">
    <th style="text-align: center;" colspan="5">
        <input type="button" value="新增">
        <input type="button" value="刪除">
    </th>
    <tr>
        <th><input type="checkbox" id="checkAll" onclick="checkAll()"></th>
        <th>編號</th>
        <th>姓名</th>
        <th>性別</th>
        <th>年齡</th>
    </tr>
    <tr>
        <td><input type="checkbox" name="checkOne"></td>
        <td>one</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
    </tr>
    <tr>
        <td><input type="checkbox" name="checkOne" ></td>
        <td>two</td>
        <td>1</td>
        <td>2</td>
        <td>2</td>
    </tr>
    <tr>
        <td><input type="checkbox" name="checkOne"></td>
        <td>three</td>
        <td>3</td>
        <td>3</td>
        <td>1</td>
    </tr>
    <tr>
        <td><input type="checkbox" name="checkOne"></td>
        <td>four</td>
        <td>4</td>
        <td>1</td>
        <td>4</td>
    </tr>
    <tr>
        <td><input type="checkbox" name="checkOne"></td>
        <td>five</td>
        <td>5</td>
        <td>1</td>
        <td>5</td>
    </tr>
</table>
</body>
</html>

七.JS實現動態新增城市

實現步驟:
確定事件型別onclick
對於事件繫結一個函式addLiElement()
1).獲取到使用者在input輸入框中填寫的資訊;
city = document.getElementById(“city”).value
2). 建立一個城市的文字節點；document.createTextNode(‘xxxx’)
3). 建立一個li的元素節點; document.createElement(‘xxxx’)
4). 將文字節點新增到li元素節點裡面去;
5). 將整體新增到ul標籤裡面去;
使用appendChild()來新增子節點

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function addCity() {
            var city=document.getElementById('city').value;
            var textNode=document.createTextNode(city);
            var liEleNode=document.createElement('li');
            liEleNode.appendChild(textNode);
            var ulEleNode=document.getElementById('ul_city');
            ulEleNode.appendChild(liEleNode);
        }
    </script>
</head>
<body>
    <input type="text" placeholder="請輸入城市" id="city">
    <input type="submit" value="新增城市" id="citybtn" onclick="addCity()">
<ul id="ul_city">
    <li>北京</li>
    <li>上海</li>
    <li>西安</li>
</ul>
</body>
</html>

在這裡插入圖片描述

八.JS實現省市的二級聯動

步驟實現：
1). 確定事件型別onchange, 併為其繫結一個函式;
2). 修改下拉列表內容;
2-1). 獲取使用者選擇的省份;
2-2). 建立一個二維陣列，用來儲存省份和城市的對應關係;
2-3). 遍歷二維陣列中的省份；
2-4). 遍歷時省份編號和使用者選擇的省份編號進行比較，
2-5). 如果相同，遍歷該省份下的所有城市;
將每一個城市以城市名新增到select裡面去

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function changecity() {
            var choiceProvince=document.getElementById('province').value;
            var cites=new Array(3);
            cites[0]=new Array('青島','煙臺','濟南');
            cites[1]=new Array('成都','綿陽','廣元');
            cites[2]=new Array('西安','咸陽','寶雞');
            var selectEleNode=document.getElementById('city');
            selectEleNode.options.length=0;
            for(var i=0;i<cites.length;i++){
                if (choiceProvince==i){
                    for(var j=0;j<cites[i].length;j++){
                        var textNode=document.createTextNode(cites[i][j]);
                        var optionEleNode=document.createElement('option');
                        optionEleNode.appendChild(textNode);
                        selectEleNode.appendChild(optionEleNode);
                    }

                }

            }

        }
    </script>
</head>
<body>
<form>
    <div style="text-align: center">
        <span>籍貫:</span>
        <select onchange="changecity()" id="province">
            <option>請選擇省份</option>
            <option value="0">山東</option>
            <option value="1">四川</option>
            <option value="2">陝西</option>
        </select>
        <select id="city">
            <option>請選擇城市</option>
        </select>
    </div>
</form>
</body>
</html>

在這裡插入圖片描述

Python入門23之JS

JS

Python入門23之JS

Python入門基礎之函數、切片

python入門23 pymssql模組（python連線sql server增刪改資料）

c++中嵌入python入門4 之 Boost.Python

LayaBox入門基礎之JS程式碼實現按鈕增加功能

LayaBox入門基礎之JS程式碼實現序號邏輯

python入門學習之Django框架設計思想

Python入門22之CSS

Python入門21之HTML

1.2 python入門學習之mac開發工具

Python ORM框架之 Peewee入門

Python 入門網絡爬蟲之精華版

python入門到放棄之面向對象vs面向過程

Python爬蟲入門一之綜述

Python爬蟲入門三之Urllib庫的基本使用

python 入門之路總結

python仙修之入門之後不放棄？

6.Python爬蟲入門六之Cookie的使用

python之路-----前端之js(一)

python學習_day54_前端基礎之js（2）

Python入門23之JS

JS

相關推薦