JavaScript DOM经典的四个案例（划水的一天）

JavaScript DOM经典的四个案例（划水的一天）

越行勤 708 2021-01-23

JavaScript的经典的四个案例

循环精灵图片

精灵图

image-20210123230401144

如上图，其实每一个图片的间距是固定的，所以只需要一个for循环就可以完成如上的操作。但是值得注意的是:

  • 背景位置修改是 style.backgroundPosition属性，驼峰命令

  • style.backgroundPosition = '0 -'+i*44+'px';，给这些属性赋值都是字符串，那么如何解决字符串里的含义变量呢？

    '+变量+' 用'+ +'把变量包起来。

核心代码：

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

循环精灵图片

gif

图片是放在li标签里的img标签的，我们要实现给每一个img注册事件，但是一个一个注册实在太麻烦了，可以尝试使用for循环注册。

值得注意是：

  • 获取body元素是通过 document.body直接来获取的
  • 修改背景图片是修改backgroundImage属性
  • 'url('+ this.src +')' 和前面的问题一样 ，字符串里的含义变量 '++'
  • document.querySelector('.bg').querySelectorAll('img'); 这样可以获取的更加精确一些

主要代码

var imgs = document.querySelector('.bg').querySelectorAll('img');
        // 循环注册事件
        for (var i=0;i<imgs.length;i++){
            imgs[i].onclick=function(){
                document.body.style.backgroundImage='url('+ this.src +')';
            }
        }

显示隐藏文本框

gif

这个就比较简单了，我们只需灵活运用if就好了。

onfocus 获得焦点，onblur 失去焦点

var text=document.querySelector('input');
        text.onfocus= function() {
            if(this.value=='手机'){
                this.value='';
            } 
            this.style.color='#000';  
        }
        text.onblur=function() {
            if(this.value==''){
                this.value='手机';
            }
            this.style.color='#999';
        }

表单的全选和取消全选

其实这看着简单，我实现的时候还是遇到了点麻烦。

全选

        var j_cbAll=document.getElementById('j_cbAll');//全选框
        var j_tbs =document.getElementById('j_tb').getElementsByTagName('input');
        //全选按钮影响下面实现 this.checked得到当前的选择状态,让所有的选择框和 全选框同步即可
        j_cbAll.onclick =function() {
            for (var i=0;i<j_tbs.length;i++)
            {
                j_tbs[i].checked=this.checked;
            }
        }
        //下面的小按钮影响全选按钮
        for(var i=0;i<j_tbs.length;i++)
        {
            j_tbs[i].onclick=function(){
                var flag=1;
                // flag变量就是负责判断标check是不是没有选择的标签
                for(var i=0;i<j_tbs.length;i++)
                {
                    if(!j_tbs[i].checked)
                    {
                        flag=0;
                    }
                }
                j_cbAll.checked=flag;
            }
        }

这个主要分成两个部分

  1. 全选按钮影响下面

    这个其实比较简单，只需要每次点击全选按钮，下面的按钮和全选按钮同步即可。j_tbs[i].checked=this.checked;

  2. 下面的小按钮影响全选按钮

    这个实现起来就有点问题，我们应该每次点击小按钮的时候就检查是否所有下面的按钮都是勾选状态，如果都是勾选那么全选按钮就是选择的状态。

    其实我们可以再每次点击事件里放一个标志，假设全部选中flag=1，在遍历的时候如何有不同的那么全选按钮就不是选择的状态那么flag=0，最后flag赋值给全选按钮即可。

    其实我前面没有flag变量，是这样的

                    for(var i=0;i<j_tbs.length;i++)
                {
                    if(!j_tbs[i].checked)
                    {
                        j_cbAll.checked=false;
                    }
                }

    但是当下面按钮都选择的时候，全选按钮无法还原了，还要做一次判断，实在麻烦。

结语

放假咸鱼的第29天
微信小程序

JavaScript