JavaScript demo合集（四）——DOM篇（一）

   欢迎加入前端技术营！如果你也是前端学习者或者对前端有学习的想法，那就跟着我一起从零开始进击前端。
  致力于尽可能详细且简洁的介绍前端知识、自己的捷径，也是学习路上的记录。欢迎探讨

---

---

分时显示图片

<img src="images/s.gif" alt="">
    <div>早上好</div>

var img = document.querySelector('img');
        var div = document.querySelector('div');
        var date = new Date();
        var h = date.getHours();
        if(h<12) {
            img.src="images/z.gif";
            div.innerHTML = "早上好，该起床了";
        }else if (h<18) {
            img.src="images/x.gif";
            div.innerHTML = "下午好，该睡觉了";
        }else {
            img.src="images/w.gif";
            div.innerHTML = "晚上好，该起床了";
        }

关闭二维码案例

<div class="box">
        二维码
        <img src="images/tao.png" alt="">
        <i id = 'close-btn'>x</i>
    </div>

var box = document.querySelector('.box');
        var closebtn = document.querySelector('#close-btn');
        closebtn.onclick = function() {
            box.style.display = 'none';
        }

显示隐藏密码

 <div class="box">
        <label for="">
            <img src="images/close.png" alt="" id='eye'>
            <input type="password" id='pwd'>
        </label>
    </div>

var eye = document.getElementById('eye');
        var pwd = document.getElementById('pwd');
        var flag = 0;
        eye.onclick = function () {
            if (flag == 0) {
                pwd.type = 'text';
                eye.src = "images/open.png";
                flag = 1;
            } else {
                pwd.type = 'password';
                eye.src = "images/close.png";
                flag = 0;
            }
        };

密码框验证

<div class="register">
        <input type="password" class="ipt">
        <p class="message">请输入至少6位密码</p>
    </div>

var ipt = document.querySelector('input');
        var message = document.querySelector('p');
        ipt.onblur = function () {
            if (this.value.length < 6 || this.value.length > 16) {
                message.className = 'message change';
                message.innerHTML = '请输入6~16位密码'
            } else {
                message.className = 'message right';
                message.innerHTML = '输入正确'
            }
        }

修改元素内容

 <button>点击查看时间</button>
    <div>时间</div>
    <p>时间</p>

// 获取元素、注册事件
        var btn = document.querySelector('button');
        var di = document.querySelector('div');
        btn.onclick = function () {
            di.innerHTML = getDate();
        }
        function getDate() {
            var date = new Date();
            var year = date.getFullYear();
            var month = date.getMonth() + 1;
            var date1 = date.getDate();
            var arr = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六', ]
            var day = date.getDay();
            var h = date.getHours();
            h = h < 10 ? '0' + h : h;
            var m = date.getMinutes();
            m = m < 10 ? '0' + m : m;
            var s = date.getSeconds();
            s = s < 10 ? '0' + s : s;
            return '今天是：' + year + '年' + month + '月' + date1 + '日' + arr[day] + h + ':' + m + ':' + s;
        }
        //元素可以不添加事件
        var p = document.querySelector('p');
        p.innerHTML = getDate();

修改元素属性：切换图片

<button id='tu1'>图片一</button>
    <button id='tu2'>图片二</button> <br>
    <img src="images/质感.png" alt="" title="质感">

var tu1 = document.getElementById('tu1');
        var tu2 = document.getElementById('tu2');
        var img = document.querySelector('img');
        tu2.onclick = function () {
            img.src = "images/dzq.jpg";
            img.title = "邓紫棋";
        }
        tu1.onclick = function () {
            img.src = "images/质感.png";
            img.title = "质感";
        }

循环精灵图

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

var lis = document.querySelectorAll('li');
        for (var i = 0; i <= lis.length; i++) {
            var index = i * 44;
            lis[i].style.backgroundPosition = '0 -' +index +'px';
        }

换肤效果

<ul class="baidu">
        <li><img src="images/1.jpg"></li>
        <li><img src="images/2.jpg"></li>
        <li><img src="images/3.jpg"></li>
        <li><img src="images/4.jpg"></li>
    </ul>

 var imgs = document.querySelector('.baidu').querySelectorAll('img');
       for(var i=0;i<imgs.length;i++) {
           imgs[i].onclick = function() {
               document.body.style.backgroundImage ='url('+ this.src +')';
           }
       }

表格各行换色

 <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>
            
        </tbody>
    </table>

var trs = document.querySelector('tbody').querySelectorAll('tr');
        for (var i = 0; i < trs.length; i++) {
            trs[i].onmouseover = function () {
                this.className = 'bg';
            }
            trs[i].onmouseout = function() {
                this.className = '';
            }
        }

全选与反选

<div class="wrap">
        <table>
            <thead>
                <tr>
                    <th>
                        <input type="checkbox" id="j_cbAll" />
                    </th>
                    <th>商品</th>
                    <th>价钱</th>
                </tr>
            </thead>
            <tbody id="j_tb">
                <tr>
                    <td>
                        <input type="checkbox" />
                    </td>
                    <td>iPhone8</td>
                    <td>8000</td>
                </tr>
                <tr>
                    <td>
                        <input type="checkbox" />
                    </td>
                    <td>iPad Pro</td>
                    <td>5000</td>
                </tr>
            </tbody>
        </table>
    </div>

var j_cbAll = document.getElementById('j_cbAll');
        var j_tb = document.getElementById('j_tb').getElementsByTagName('input');
        j_cbAll.onclick = function () {
            for (var i = 0; i < j_tb.length; i++) {
                j_tb[i].checked = this.checked;
            }
        }
        for (var i = 0; i < j_tb.length; i++) {
            j_tb[i].onclick = function () {
                var flag = true;
                for (var i = 0; i < j_tb.length; i++) {
                    if (!j_tb[i].checked) {
                        flag = false;
                        break;
                    }
                }
                j_cbAll.checked = flag;
            }
        }

---

• 点赞加关注，持续更新实用技巧、热门资源、软件教程等
• 有任何 软件 影视 教程资源 考证资料等需求留言即可