emmmmmm，昨天下午那会儿，出现了一点小插曲，电脑进水了。。。。。。。。

还好最后没事，不让我就要报废了，今天夜里把昨天没有完成的知识点来完成一下。

上篇文章介绍了其他的元素操作，今天再对表单元素进行补充说明一下。

表单元素的属性操作

src属性的应用

今天又找一个案例做做：点击图片，背景就变成点击的那个图片

其实也可以看成是换头像，原理是一样的

这个案例对src的应用我感觉是比较典型的，其中是把src的属性动态的运用了。

下面红字部分是最重要的

body.style.backgroundImage = 'url(' + this.src + ')'

主要技术点：循环注册事件、鼠标点击事件

上代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            background: url('./img/1.jpg') repeat-x;
        }

        div {
            width: 400px;
            margin: 100px auto;
        }

        ul {
            background-color: pink;
            list-style: none;
            padding: 0;
        }

        li {
            float: left;
            overflow: hidden;
            width: 80px;
            height: 50px;
            margin: 1px;
        }

        img {
            width: 80px;
        }
    </style>
</head>

<body>
    <div>
        <ul>
            <li><img src="./img/lyf.jpg" alt=""></li>
            <li><img src="./img/xzq.jpg" alt=""></li>
            <li><img src="./img/lyf.jpg" alt=""></li>
            <li><img src="./img/xzq.jpg" alt=""></li>
            <li><img src="./img/1.jpg" alt=""></li>
            <li><img src="./img/2.jpg" alt=""></li>
            <li><img src="./img/3.jpg" alt=""></li>
            <li><img src="./img/4.jpg" alt=""></li>
        </ul>
    </div>
    <script>
        // 点击图片，背景图片变为被点击的图片
        // 主要思路：点击时，body的背景为img的src
        // 1.获取事件源——图片、body
        var img = document.querySelectorAll('img');
        var body = document.body;
        // 2.注册事件 程序处理
        for (var i = 0; i < img.length; i++) {
            img[i].onclick = function () {
                body.style.backgroundImage = 'url(' + this.src + ')';
            }
        }
    </script>
</body>

</html>

效果图：

显示密码——type属性的运用

在登陆时，输入的密码是不可见的，但是点击右边那个闭眼的按钮又是可以看见密码的；

主要技术点：鼠标点击事件、表单type属性的变换、点击时换图

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .jd {
            position: relative;
            width: 400px;
            margin: 100px auto;
            border-bottom: 1px solid #ccc;

        }

        .jd input {
            width: 300px;
            height: 30px;
            outline: none;
            box-sizing: border-box;
            border: none;
            padding-left: 10px;
        }

        .jd img {
            position: absolute;
            top: 8;
            right: 0;
            width: 24px;
            height: 24px;
        }
    </style>
</head>

<body>
    <div class="jd">
        <label for="pwd">
            <img src="images/close.png" id="eye">
        </label>
        <input type="password" id="pwd">
    </div>
    <script>
        // 点击眼睛显示密码，同时图标也变成眼睛图片
        // 再点击时，变回密文形式，图标变回来
        // 1. 获取事件源
        var pwd = document.getElementById('pwd');
        var eye = document.getElementById('eye');
        // 一个按钮点击两个状态，需要一个变量来检测状态
        // 0为闭眼状态，点击变为眼睛，然后flag==1
        // 1为眼睛状态，点击变为闭眼状态，然后flag == 0
        var flag = 0;
        // 2. 注册事件， 进行事件处理程序
        eye.onclick = function () {
            // 点击一次后flag一定要变化
            if (flag == 0) {
                pwd.type = 'text';
                eye.src = 'images/open.png';
                flag = 1; // 赋值操作
            } else {
                pwd.type = 'password';
                eye.src = 'images/close.png';
                flag = 0;
            }
        }
    </script>
</body>

</html>

点击效果：

密码框格式化提示信息

在注册时，密码的格式输入不对，是会出现提示信息的；

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 600px;
            margin: 100px auto;
        }

        div input {
            width: 300px;
            height: 30px;
            outline: none;
            box-sizing: border-box;
            padding-left: 10px;
            margin-right: 5px;
        }

        .message {
            font-size: 16px;
            color: gray;
            padding-left: 20px;
            background: url('./images/mess.png') no-repeat left center;
        }

        .w {
            color: red;
            background-image: url('./images/wrong.png');
        }

        .r {
            color: green;
            background-image: url('./images/right.png');
        }
    </style>
</head>

<body>
    <div>
        设置密码：<input type="password" id="pwd">
        <span class="message">请输入6-16位的密码</span>
    </div>
    <script>
        // 输入密码的位数不对：提示位数不对
        // 获取元素
        var pwd = document.getElementById('pwd');
        var meanage = document.querySelector('span');

        // 注册事件 程序处理
        pwd.onblur = function () {
            // 判断表单值的长度
            if (this.value.length >= 6 && this.value.length <= 16) {
                meanage.innerHTML = '您输入正确';
                meanage.className = 'message r';

            } else {
                meanage.innerHTML = '您输入的密码位数不对';
                meanage.className = 'message w';
            }
        }
    </script>
</body>

</html>

效果图：

默认显示

输入错误

输入正确

显示隐藏文本框内容——value的运用

在搜索框中一般都有默认的文字，但是鼠标点击或用户输入后，鼠标再移开搜索框，该搜索框里面的文字是会变的。

搜索框中的默认文字其实是与页面的主题是对应的。

举个具体的例子：我进入到一个手机商城的页面，那搜索框的默认文字肯定与手机有关；我进入护肤品的页面，搜索框的默认文字是与护肤品相关的名词。

主要技术点：判断用户输入的信息与默认是否相等

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 200px;
            margin: 100px auto;
        }

        input {
            color: #999;
            outline: none;
        }
    </style>
</head>

<body>
    <div class="box">
        <input type="text" value="默认文字">
    </div>
    <!-- 需求：
    1.当表单获得焦点时，用户没有输入信息，隐藏表单中默认文本信息
    失去焦点默认文本显示
    2.获焦时，用户输入与默认文本信息不同得信息，表单值为用户输入的信息(字体颜色稍微深一点)
    失去焦点时，显示的仍然是用户输入的信息(字体颜色变浅) -->
    <script>
        // 获取事件源
        var input = document.querySelector('input');
        // 注册事件 事件处理程序
        input.onfocus = function () {
            // 只要用户输入的信息与默认文字不同，就返回为空
            if (this.value === '默认文字') {
                input.value = '';
            }
            // 获焦时，更改字体颜色深一点
            this.style.color = '#333';
        }
        // 失去焦点
        input.onblur = function () {
            // 用户没有输入信息
            if (this.value === '默认文字') {
                input.value = '默认文字';
            }
            // 失去焦点时字体颜色变浅一点
            input.style.color = '#999';
        }
    </script>

</body>

</html>

效果图：

默认显示

输入显示

巧用循环设置精灵图

很多网页都有类似这样图的板块，在之前都是用纯CSS代码设置背景图片的位置来实现的，比较麻烦的是要找到每个元素进行添加设置背景图的位置。现在学习了JS的循环，可以用循环设置精灵图的背景图的位置了。但是有一个要求，就是这个精灵图必须比较整齐，就是精灵图里面的图片放的有规律可言，不然循环也是麻烦的。

主要技术点：循环、利用规律计算精灵图位置(数学问题)

代码代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .sprite {
            width: 350px;
            margin: 200px auto;
            ;
        }

        li {
            float: left;
            list-style: none;
            width: 24px;
            height: 24px;
            margin: 20px;
            background-color: pink;
            background: url('./images/sprite.png') no-repeat;
        }
    </style>
</head>

<body>
    <div class="sprite">
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
    <script>
        // 让每个li的背景为精灵图中的背景
        // 这就使用到循环，遍历ul中所有的li，改变li中的background-position
        var lis = document.querySelector('.sprite').getElementsByTagName('li');
        // console.log(lis.length);  li的个数，进行遍历，更改背景图片的属性
        // 记录y座标的值
        var index = 0;
        for (var i = 0; i < lis.length; i++) {
            // 每一个当前的li
            // x座标： 0
            // y座标： 每一个li之间相差 44 px；
            lis[i].style.backgroundPosition = '0 -' + index + 'px';
            index += 44;
        }
    </script>
</body>

</html>

效果图：

表格隔行换色

表格中隔行换色也是比较常见的，就是鼠标经过表格的行，行的背景颜色变化，鼠标移开变回原样。

主要技术点：循环注册事件、鼠标经过和移开事件

代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表格隔行换色</title>
    <style>
        table {
            width: 800px;
            margin: 100px auto;
            border-collapse: collapse;
            text-align: center;
        }

        thead tr {
            line-height: 33px;
            font-size: 16px;
            background-color: skyblue;
        }

        tbody tr {
            border-bottom: 1px solid gray;
            font-size: 13px;
            line-height: 33px;
            color: blue;
        }

        .bg {
            background-color: pink;
            color: white;
            cursor: default;
        }
    </style>
</head>

<body>
    <table>
        <thead>
            <tr>
                <th>代码</th>
                <th>名称</th>
                <th>最新公布净值</th>
                <th>累计净值</th>
                <th>前单位净值</th>
                <th>净值增长率</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>003526</td>
                <td>农银金穗3个月定期开放债券</td>
                <td>1.075</td>
                <td>1.079</td>
                <td>1.074</td>
                <td>+0.047%</td>
            </tr>
            <tr>
                <td>003526</td>
                <td>农银金穗3个月定期开放债券</td>
                <td>1.075</td>
                <td>1.079</td>
                <td>1.074</td>
                <td>+0.047%</td>
            </tr>
            <tr>
                <td>003526</td>
                <td>农银金穗3个月定期开放债券</td>
                <td>1.075</td>
                <td>1.079</td>
                <td>1.074</td>
                <td>+0.047%</td>
            </tr>
            <tr>
                <td>003526</td>
                <td>农银金穗3个月定期开放债券</td>
                <td>1.075</td>
                <td>1.079</td>
                <td>1.074</td>
                <td>+0.047%</td>
            </tr>
            <tr>
                <td>003526</td>
                <td>农银金穗3个月定期开放债券</td>
                <td>1.075</td>
                <td>1.079</td>
                <td>1.074</td>
                <td>+0.047%</td>
            </tr>
            <tr>
                <td>003526</td>
                <td>农银金穗3个月定期开放债券</td>
                <td>1.075</td>
                <td>1.079</td>
                <td>1.074</td>
                <td>+0.047%</td>
            </tr>
        </tbody>
    </table>
    <!-- 鼠标放到行上变色 -->
    <script>
        // 1.获取事件源 tbody中的所有tr————————是一组事件集合，需要循环绑定注册事件
        var trs = document.querySelector('tbody').querySelectorAll('tr');
        // 2.利用循环注册绑定事件
        for (var i = 0; i < trs.length; i++) {
            // 鼠标经过， 背景颜色和字体颜色改变
            trs[i].onmousemove = function () {
                this.className = 'bg';
            }
            // 鼠标离开 变回原样
            trs[i].onmouseout = function () {
                this.className = '';
            }
        }
    </script>
</body>

</html>

效果图：

排他思想——实现点击按钮事件

排他思想：当一组元素实现事件变化时，某一个元素对象点击时，只能当前元素对象拥有变换。

最简单的实例：有一组按钮，点击按钮，按钮背景变色。点击另一个时，当前有变化，其余按钮没有变化。

主要技术点：排他思想、循环注册事件

用我的大白话总结一下：

排他思想

1. 先把一组元素对象遍历一遍，去除你要添加的变化。(案例中，去除所有按钮的背景色)

2. 再把当前元素对象的变换加上。(案例中为当前循环中的按钮添加背景色)

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        button {
            float: left;
            width: 30px;
            height: 30px;
            border: 1px dotted rgb(179, 179, 179);
            background: none;
            box-shadow: 2px 3px 10px rgb(179, 179, 179);
            margin: 100px 30px;
            border-radius: 50%;
            outline: none;
        }
    </style>
</head>

<body>
    <button></button>
    <button></button>
    <button></button>
    <button></button>
    <button></button>
    <button></button>
    <script>
        // 点击按钮时，按钮背景颜色变pink
        // 1.获取事件源 所有的按钮
        var btn = document.getElementsByTagName('button');
        for (var i = 0; i < btn.length; i++) {
            // 2.注册事件  程序处理
            // 每一个按钮被点击的时候都触发事件
            btn[i].onclick = function () {
                // 点击当前任何一个按钮，应该先循环所有的按钮把样式去掉
                // 再设置当前按钮的样式
                // 1.先遍历所有按钮，去掉样式
                for (var i = 0; i < btn.length; i++) {
                    btn[i].style.backgroundColor = '';
                }
                // 2.设置当前按钮的样式
                this.style.backgroundColor = ' rgb(216, 216, 216)';
            }
        }
    </script>
</body>

</html>

效果图：

用排他思想

没有使用排他思想

今天的所有案例都结束了！！！

要记得回头复习学过的知识，温故而知新！！！！

JavaScript基础——DOM案例

表单元素的属性操作

src属性的应用

显示密码——type属性的运用

密码框格式化提示信息

显示隐藏文本框内容——value的运用

巧用循环设置精灵图

表格隔行换色

排他思想——实现点击按钮事件

PDManer [元数建模]-v4.9.0 发布：一款简单好用的数据库建模平台

使用neovim打造go ide(支持代码跳转, 代码补全, 实时语法检查)

sql求连续值问题

cs01 CSS Syntax

sql server sp_executesql 中使用表变量进行查询

挑战程序设计竞赛 2.3章习题 poj 3046 Ant Counting

[MASM拾遗]Offset伪指令

h30 HTML Layout Elements

了解显卡

一款基于C#开发的通讯调试工具（支持Modbus RTU、MQTT调试）

JavaScript 中特別的類型 —— RegExp類型正則表達式

JavaScript —— 理解深拷貝，封裝深拷貝方法

JavaScript 之繼承，封裝一個最佳的繼承函數 —— 聖盃模式

JavaScript中的原型、原型鏈、構造函數以及實例對象

jQuery案例 —— todoList待辦事項列表

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結