密码框查看功能 购物车全选功能 页面回到顶部功能 几个案例让你熟悉DOM 操作 快来看

H5阿垚
154 阅读3分钟

通过 DOM 操作，实现密码输入框的查看密码按钮功能

/* 实现功能：
点击查看密码(button)  密码输入框(input)内密码可以显示看见 ，再次点击查看密码(button)  输入框密码加密
*/


/*  html结构：
    密码: <input type = "password">
    <button>查看密码</button>
*/

var In = document.querySelector('input');  // 获取input输入框
var bu = document.querySelector('button'); // 获取 button 按钮
        
// 给 button 添加点击事件 实现点击时显示密码 再次点击时密码加密
bu.onclick = function(){
    if(In.type === 'password'){ // 如果 输入框 type属性等于password 点击button时显示密码
    In.type = 'text';  // 将type属性赋值为文本 达到密码可以看见的效果
    }else{
        n.type = 'password';  // 如过输入框type属性不等于 password 就说明 已经点击查看了密码 再次点击加密密码
    }
}

购物车全选案例

/* 功能实现:
选中全选框 选择框全被选中 若某一个选择框取消选中 全选框也会跟着取消选中  
若选择框全选中  全选框也会跟着选中
*/


// html 结构:
    <input type="checkbox" id="che"> 全选
    <hr>
    <input type="checkbox" id="ch"> 选择1
    <input type="checkbox" id="ch"> 选择2
    <input type="checkbox" id="ch"> 选择3
    <input type="checkbox" id="ch"> 选择4

// js 功能实现:

var All = document.querySelector('#che'); // 获取全选
var One = [...document.querySelectorAll('#ch')];  //获取全部选择 并将拿出的数据转换为数组  

// 功能1：选中全选框  选择框全部会被选中  取消选中全选框 选择框全部也会跟着取消选中
All.onclick = function () {  // 给全选添加点击事件
    if (All.checked) { // 如果全选被为true => 被选中
        One.forEach(function (item){  // 拿到每一个选择
            item.checked = true;  // 让每一个选择被选中
         })
    }else{  // 如果全选没有被选中 
        One.forEach(function (item){  
            item.checked = false;   // 让每一个选中不被选中
        })
    }
}

// 功能2: 若选中框有一个没有选中 全选框不选中  若选择框全选中  全选框也会跟着选中
One.forEach(function (item) {  // 拿到每一个选择
    item.onclick = function () {  // 给每一个选择添加点击事件
        var boo = One.every(function (item) {  // 全都选中才为true
            return item.checked;  // 返回是否选中
        })
        All.checked = boo;  // 拿到ever的返回值  => 如果每一个选择被选中 全选才被选中 否则反之
    }
})

购物车案例 代码优化

var All = document.querySelector('#che'); // 获取全选
var One = [...document.querySelectorAll('#ch')];  //获取全部选择 并将拿出的数据转换为数组  

// 功能1
All.onclick = function(){ // 给全选框添加点击事件
    One.forEach(function (item){ // 拿到每一个选择框
        item.checked = All.checked;  
        // 全选框选中 选择框全部都会跟着选中  全选框不选中  选择框全部都不选中
    })
}

// 功能2
One.forEach(function (item) {  // 拿到每一个选择
    item.onclick = function () {  // 给每一个选择添加点击事件
        All.checked = One.every(function (item) {  // 全都选中才为true
            return item.checked;  // 返回是否选中
        })           
    }
})

通过 DOM 操作 实现下滑页面时 头部 回到顶部显示 当点击回到顶部时 页面跳转到顶部 ，回到顶部时头部和回到顶部隐藏

// css 部分
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #top{
            height: 200px;
            width: 100%;
            background-color: antiquewhite;
            transition: all 2s;
            position: fixed;
            top: -200px;

        }
        #bu{
            width: 50px;
            height: 50px;
            position: fixed;
            right: 100px;
            bottom: 100px;
            background-color: aqua;
            display: none;
        }
        li{
            height: 50px;
            /* background-color: blue; */
            margin-top: 10px;
        }

    </style>


// html 部分
 <div id="top">顶部</div>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
        <li>10</li>
        <li>11</li>
        <li>12</li>
        <li>13</li>
        <li>14</li>
        <li>15</li>
        <li>16</li>
        <li>17</li>
        <li>18</li>
        <li>19</li>
        <li>20</li>
        <li>21</li>
        <li>22</li>
        <li>23</li>
        <li>24</li>
        <li>25</li>
        <li>26</li>
        <li>27</li>
        <li>28</li>
        <li>29</li>
        <li>30</li>
        <li>31</li>
        <li>32</li>
        <li>33</li>
        <li>34</li>
        <li>35</li>
        <li>36</li>
        <li>37</li>
        <li>38</li>
        <li>39</li>
        <li>40</li>
        <li>41</li>
        <li>42</li>
        <li>43</li>
        <li>44</li>
        <li>45</li>
        <li>46</li>
        <li>47</li>
        <li>48</li>
        <li>49</li>
        <li>50</li>
        <li>51</li>
        <li>52</li>
        <li>53</li>
        <li>54</li>
        <li>55</li>
        <li>56</li>
        <li>57</li>
        <li>58</li>
        <li>59</li>
        <li>60</li>
        <li>61</li>
        <li>62</li>
        <li>63</li>
        <li>64</li>
        <li>65</li>
        <li>66</li>
        <li>67</li>
        <li>68</li>
        <li>69</li>
        <li>70</li>
        <li>71</li>
        <li>72</li>
        <li>73</li>
        <li>74</li>
        <li>75</li>
        <li>76</li>
        <li>77</li>
        <li>78</li>
        <li>79</li>
        <li>80</li>
        <li>81</li>
        <li>82</li>
        <li>83</li>
        <li>84</li>
        <li>85</li>
        <li>86</li>
        <li>87</li>
        <li>88</li>
        <li>89</li>
        <li>90</li>
        <li>91</li>
        <li>92</li>
        <li>93</li>
        <li>94</li>
        <li>95</li>
        <li>96</li>
        <li>97</li>
        <li>98</li>
        <li>99</li>
        <li>100</li>
        <button id="bu">回到顶部</button>
    </ul>


// JS 实现部分：

var Top = document.getElementById('top');  //获取头部 
var bu = document.getElementById('bu');     // 获取button 标签

// 滚动事件
window.onscroll = function(){
    if(document.documentElement.scrollTop > 300){  // 当滚动高度大于300时 头部展现出来  回到顶部按钮出现
        Top.style.top = 0;  
        bu.style.display = 'block'; 
    }else{                                  // 当滚动高度小于300时  头部隐藏  回到顶部按钮隐藏
         op.style.top = -200 + 'px';   
         bu.style.display = 'none';
     }
}

// button 点击回到顶部效果
bu.onclick = function(){  // 给button标签添加点击事件
      document.documentElement.scrollTop = 0;   // 点击button时回到顶部
}
avatar
文章
阅读
粉丝