python大佬养成计划----JavaScript对html的优化

头像
SheenStar
    阅读 10 分钟

    切换图片

    当我们浏览网页时，时常出现图片轮播场景。实现用鼠标点击‘下一页’时，更换图片的功能。

    #当前目录下建立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>

    图片描述

    轮播图片

    实现方式：内部引用

    自动实现图片切换，无需点击

    <!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>

    这里也是动态变化的，广告图片在轮播里只会出现一次
    图片描述

    优化用户注册页面

    <!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>

    图片描述

    用户注册条件的判断

    当我们注册用户时，需要对用户名和密码进行判断，是否合法。

    <!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>

    图片描述
    图片描述

    表格全选和全不选

    便于操作方便，在表格中，勾选所有或取消勾选项具有使用价值。

    <!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>

    图片描述

    javascript
    SheenStar
    168 声望26 粉丝

    祝你坚强

    « 上一篇
    python大佬养成计划----JavaScript基础
    下一篇 »
    python大佬养成计划----HTML DOM

    引用和评论

    推荐阅读
    头像
    python 青蛙跳台阶，变态跳台阶

    SheenStar阅读 1.9k

    头像
    腾讯新闻中心首页改版啦

    小蚊酱赞 11阅读 8.7k评论 7

    头像
    前端如何入门 Go 语言

    robin赞 25阅读 7.2k评论 8

    头像
    前站 - 前端导航，搜索社区，阅读文章，提升技术

    bestvist赞 25阅读 13.6k评论 3

    头像
    前端开发工具

    寒青赞 15阅读 4.1k

    头像
    100个React最佳实践小技巧

    夕水赞 13阅读 1.3k评论 3

    头像
    开发插件集合

    寒青赞 11阅读 2.9k

    0 条评论
    得票最新