python大佬養成計劃----JavaScript對html的優化

時間  2020-02-11
標籤 python 大佬 養成 計劃 javascript html 優化 欄目 Python 简体版
原文   原文鏈接

切換圖片

當咱們瀏覽網頁時，時常出現圖片輪播場景。實現用鼠標點擊‘下一頁’時，更換圖片的功能。css

#當前目錄下創建img目錄，存放圖片，圖片命名格式'img1.jpg'
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>圖片切換</title>
    <style>
        #snow_maps{
            width: 600px;
            height: 500px;
            margin: 0 auto;
            text-align: center;

        }
    </style>
    <script>
        var i = 0;
        function change_map() {
            i+=1;
            document.getElementById('show_map').src = 'img/img'+i+'.jpg'
            if (i === 6) {
                i = 1
            }
        }


    </script>
</head>
<body>
<!--思路:
    1. 肯定事件類型爲onclick事件；
    2. 並跟對應的函數changeImg綁定在一塊兒；
    3. 實現函數功能；
       當點擊下一頁按鈕以後， 修改img標籤裏面的src屬性內容;
-->
<div id="snow_maps">
    <img src="img/img7_ad.jpg"  width="1190px" height="80px">
    <img id="show_map" src="img/img1.jpg">
    <input type="button" value="下一頁" onclick="change_map()">

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

圖片描述

輪播圖片

實現方式：內部引用

自動實現圖片切換，無需點擊html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>輪播圖片</title>
        <style>
        #sowing_map{
            width: 590px;
            height:500px;
            margin: 0 auto;
            text-align: center;

        }
    </style>
    <script>
        window.onload = function () {
            setInterval('change_map()',1000)
        };
                var i = 1;
        function  change_map() {

            // 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/img1.jpg" id="img">
</div>
</body>
</html>

這裏是動態變化的，你們能夠本身試。函數

實現方式：外部引用

網頁定時彈出廣告圖片，自動消失優化

//JS文件
window.onload = function () {
    // 每隔1s自動執行某一個函數
    setInterval('changeImg()', 1000);
    //每隔1s執行顯示廣告的函數;
    // 由 setInterval() 返回的 ID 值可用做 clearInterval() 方法的參數。
    //(http://www.w3school.com.cn/jsref/met_win_setinterval.asp)
    // 在js的函數裏面。 變量名沒有var時， 是一個全局變量;
    adtime = setInterval('showAd()', 1000);

};

var i = 1;

function changeImg() {
    i += 1;
    document.getElementById('img').src = 'img/img' + i + '.jpg';
    if (i === 6) {
        i = 0;
    }
}


// 編寫顯示隱藏圖片的函數
function showAd() {
    // 獲取到廣告圖片對應的標籤對象
    var adEle = document.getElementById('ad_img');
    //修改廣告圖片元素裏面的style屬性裏面的display
    adEle.style.display = 'block';

    // 清除顯示圖片的定時操做；
    clearInterval(adtime);

    // 設置隱藏廣告圖片的定時任務；
    hiddentime = setInterval('hiddenAd()', 1000);

}

function hiddenAd() {
    // 獲取到廣告圖片對應的標籤對象
    var adEle = document.getElementById('ad_img');
    //修改廣告圖片元素裏面的style屬性裏面的display
    adEle.style.display = 'none';
    //清除隱藏圖片的定時任務;
    clearInterval(hiddentime);
}
//css文件
#sowing_map{
    width: 590px;
    height:500px;
    margin: 0 auto;
    text-align: center;

}

#ad{
    width: 1190px;
    height: 80px;
    margin: 0 auto;
    text-align: center;
}
#主程序
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--
    塊級元素居中:margin: 0 auto;
    行內元素居中:  text-align: center;
   Js的引入方式:
        - 內部引入: 直接在head標籤裏面的<script>寫的內容;
        - 外部引入:<script src="js/main.js" ></script>
     -->
    <link href="css/main.css" rel="stylesheet">
    <script src="js/main.js" ></script>
</head>
<body>
<!--思路:
    1. 肯定事件類型爲onclick事件；
    2. 並跟對應的函數changeImg綁定在一塊兒；
    3. 實現函數功能；
        1). 當點擊下一頁按鈕以後， 修改img標籤裏面的src屬性內容;

-->
<div id="sowing_map">
    <img src="img/img1.jpg" id="img">
    <!--<input type="button" value="下一頁" onclick="changeImg()">-->
</div>
</body>
</html>

這裏也是動態變化的，廣告圖片在輪播裏只會出現一次
圖片描述spa

優化用戶註冊頁面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用戶註冊</title>
    <style>
        #login {
        width: 362px;
        height: 362px;
        border: 1px solid #f10180;
        margin: 0 auto;
        text-align: center;
        margin-top: 100px;
        background: snow;
        }
        #login_top {
            width: 100%;
            height: 50px;
            /*border: 1px solid black;*/
        }
        #login_font {
            color: #f10180;
        }
        #login-body{
            margin: 0 auto;
            text-align: center;
        }

    </style>
</head>
<body>
<div id="login">
    <div id="login_top">
        <h2 id="login_font">用戶註冊</h2>

    </div>
    <div id="login_body">
        <table style="width: 100%; padding-top: 50px">
            <tr>
                <td>用戶名</td>
                <td><input type="text" placeholder="輸入用戶名" name="username"></td>
            </tr>
            <tr>
                <td>密&nbsp;&nbsp;&nbsp;&nbsp;碼</td>
                <td><input type="password" placeholder="密碼" name="passwd"></td>
            </tr>
            <tr >
                <td><input type="submit" value="註冊"></td>
                <td><input type="reset" value="重置" ></td>
            </tr>
        </table>

    </div>


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

圖片描述

用戶註冊條件的判斷

當咱們註冊用戶時，須要對用戶名和密碼進行判斷，是否合法。code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>註冊判別</title>
    <script>
        function showUserTip() {
            document.getElementById('userTip').innerHTML = '<b style="color: lightgray;">用戶名不能爲空</b>';
        }
        function showPwdTip() {
            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() {
            var pwd = document.getElementById('pwd').value;
            if (pwd.length<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>

圖片描述
圖片描述

表格全選和全不選

便於操做方便，在表格中，勾選全部或取消勾選項具備使用價值。orm

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格全選</title>
    <script>
        function checkAll() {
            var check= document.getElementById('checkAll');
            alert(check.checked);
            if (check.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++) {

                    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>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
    </tr>
    <tr>
        <td><input type="checkbox" name="checkOne" ></td>
        <td>2</td>
        <td>1</td>
        <td>2</td>
        <td>2</td>
    </tr>
    <tr>
        <td><input type="checkbox" name="checkOne"></td>
        <td>3</td>
        <td>3</td>
        <td>3</td>
        <td>1</td>
    </tr>
    <tr>
        <td><input type="checkbox" name="checkOne"></td>
        <td>4</td>
        <td>4</td>
        <td>1</td>
        <td>4</td>
    </tr>
    <tr>
        <td><input type="checkbox" name="checkOne"></td>
        <td>5</td>
        <td>5</td>
        <td>1</td>
        <td>5</td>
    </tr>
</table>
</body>
</html>

圖片描述

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程