day14+15:对事件的操作案例：电商放大镜和计算器实例练习

分手后的思念是犯贱 2021-11-09 01:24 122阅读 0赞

我发现如果你想不通一个问题，你就把它放脑子里，没事就想一想，跟别人讨论讨论，突然有一天就柳暗花明又一村了！

**概念**

1.  js只能操作行内样式，读取内嵌（style标签）和外部样式（link引入）  
    外部要通过windows操作，操作结束后变为行内标签  
    但是实际操作时，**宽高只能写在标签中才能调用**，其他元素可以内嵌调用
2.  `vertical-align:middle`,相对于上一层子元素居中，设置宽高后相对于父容器，宽度填满高度上留border
3.  将块级元素变为行内元素后会有5px的缝隙，`font-size：0；`后取消缝隙，如果里面有文字，则文字被覆盖（如放大镜中的左右两侧的箭头被覆盖，需要单独重新设置字体大小）
4.  盒子模型中左右margin累加，上下重叠取最大
    
    **上下重叠取最大：**![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzAxOTk5_size_16_color_FFFFFF_t_70]  
    测试代码如下：

<!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title>margin</title>
        <style>
            *{
                margin:0;
                padding:0;
            }
            #a{
                background-color: #ffd457;
                border:2px solid #ff7167;
                width:100px;
                height:100px;
                margin:20px;
                float:left;//消除方法
            }
            #b{
                background-color:#cccccc;
                border:2px solid #000000;
                width:100px;
                height:100px;
                margin:10px;
                float:left;//消除方法
                clear:left;//消除方法
            }
        </style>
    </head>
    <body>
    <div id ="a">a</div>
    <div id="b">b</div>
    </body>
    </html>

效果为：![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzAxOTk5_size_16_color_FFFFFF_t_70 1]  
![在这里插入图片描述][20190806234759856.png]  
若要想正常显示设置的margin值，则将注释掉的补充上，添加float属性后不再取最大显示，而是都显示  
**左右margin累加**：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzAxOTk5_size_16_color_FFFFFF_t_70 2]

1.  如果父容器里只有子容器，没有文本内容，给子元素设置margin值时会连带父容器移动，此时给父容器设置移动方向相仿的border边线；  
    我看到一个写的很棒的文章  
    [https://blog.csdn.net/sun\_DongLiang/article/details/81321637][https_blog.csdn.net_sun_DongLiang_article_details_81321637]
2.  设置红色边框移动效果时，记录上一个选中的元素，选中后一个是将其按一个清空，并记录当前元素  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzAxOTk5_size_16_color_FFFFFF_t_70 3]  
    第二种方法为操作对象属性，改变颜色

//红色边框第二种添加方法
    /*
    var oldEle = null;
    window.onload = function () {
        //加载完成事件
        var sblock = document.getElementsByClassName("s-block");
        //默认第一个变色
        oldEle = sblock[0];
        for (var i = 0; i < sblock.length; i++) {
            sblock[i].onmouseenter = function () {
                oldEle.style.borderColor = "transparent";
                this.style.borderColor = "#e40000";
                oldEle = this;
            }

**在实现放大镜功能中遇到的问题：**

1.  substr字符串的截取 (抽取从strat开始指定长度的字符串)
2.  `this.className = "sblockhold smblock";`

> 在给元素添加新的样式时，一定要记得加上原来的样式，否则直接覆盖之前的效果会丢失

1.  `var bigceng=document.getElementsByClassName("bigCeng")[0];`

> 注意获取变量与原变量名称相同！(大小写)，在检查很多次后都没有发现代码逻辑上的问题，这个时候可以看看在html中生命的变量和js中的变量有没有大小写字母的不同等

var sblock = document.getElementsByClassName("smblock");
    var middleimg = document.getElementsByClassName("middle-img")[0];

> 也可以写成sblock的形式，调用时再使用索引  
> 也可以直接在声明变量时就是用索引，只获取第一个（唯一一个）元素

`document.querySelectorAll("#id名");`

> 此种选择器使用时要加上类名或ID名的符号！

var sblock = document.getElementsByClassName("smblock");
    temp = sblock[0];

> //先获取到smblock后才能赋值！否则没有切换效果，即先获取到元素在对元素进行操作

1.  `getComputedStyle` 获取该元素所有样式,只读属性  
    补充：  
    1）`obj.style:`：只能获得写在标签内的属性值，不能获得内嵌样式中的属性  
    2）获取元素所有样式：IE中使用`obj.currentStyle`方法，火狐及谷歌使用`getComputedStyle` 方式，在获取border相关的属性时会将颜色转换为RGB格式
2.  `事件对象e和event`：不同浏览器对JS的事件对象解析不同，在主流的浏览器中常规写法是简写e，低版本的浏览器中事件对象通过window对象获取，即window.event;  
    所以在调用时考虑兼容性可以写为：

e=e||window.event;

e在调用函数时可加可不加，如果后面需要获取操作的信息就可以加，如果只是事件就不需要添加  
如监听事件中没有对事件的相关操作时可以不写  
阻止事件冒泡时需要对事件进行操作就要写

**监听事件：**

var ul = document.getElementsByTagName("ul");
     var li = document.getElementsByTagName("li");
     ul[0].addEventListener("click", function () { 
     console.log(1);
     },true);
     li[0].addEventListener("click", function () { 
     console.log(2);
     },true);

**阻止：**

var ul = document.getElementsByTagName("ul");
    var li = document.getElementsByTagName("li");
    ul[0].addEventListener("click", function () { 
        console.log(1);
    });
    li[0].addEventListener("click", function (e) { 
        console.log(2);
                e.stopPropagation(e);
    }
    );

1.  算式的意义——有几处需要计算的地方

x = x - big.offsetLeft - parseFloat(kuang.style.width) / 2;
     y = y - big.offsetTop - parseFloat(kuang.style.height) / 2;

> 改变的并不是鼠标坐标，而是想鼠标在蓝色选中框的中心显示，所以是想做向上向左移动半个蓝色选中框的距离

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzAxOTk5_size_16_color_FFFFFF_t_70 4]

bigceng.style.backgroundPosition = (-x * 2) + "px " + (-y * 1.9047) + "px";

> 注意第一个px后要留有空格才能实现功能！且大框中的图片与蓝色选中框中的图片移动位置相反，所以为负

1.  区别：**obj.style只能获取行内样式**
    
    console.log(parseFloat(window.getComputedStyle(middle).width));  
    console.log(parseFloat(middle.style.width));

400  
NaN

1.  `offset`是相对于父元素的偏移量
2.  `e.target || e.srcElement`

> //获取事件触发的对象

**Eg**:

var ul = document.getElementsByTagName("ul")[0];
        var li = document.getElementsByTagName("li")[0];
        ul.onclick = function (e) {
            //输出的当前点击的元素
            //1.找到委托的元素对象
            var child = e.target || e.srcElement;
            console.log(e);//输出为LI
            if (child.nodeName.toLowerCase() == "li") {
                console.log(1);//toLowerCase() 转化为小写
            }
        }

![在这里插入图片描述][2019080621282579.png]  
![在这里插入图片描述][20190806212745413.png]

框架结构：

css样式

js核心代码  
1）**页面加载完后执行函数，所有的内容都写在该函数中，且for循环在加载时已经将函数赋值给了每一个图片对应的鼠标进入事件`onmuseenter`,之后当触发了图片的该属性后便执行时间对应的操作，而不是一直执行for循环函数调用事件**

window.onload = function () { 
        //加载完成事件
        }

2）在对事件进行操作时首先要获取对象，所以将对象获取统一声明在最前方  
3）鼠标放在小图上时会显示红色边框，鼠标移开时会消失，在css中已经提前定义好了原先的透明边框`.smblock {……border: 3px solid transparent;}`，及红色边框`.sblockhold{ border:3px solid #e20000!important; }`所以使用一个for循环，写一个鼠标移上去的事件对应的方法（函数）：提前定一一个临时变量存放上一个被选中的图片，属下离开后将原有属性赋值给他，并将当前正在访问的对象存储在临时变量中，并将红色边框添加到当前选中对象上，注意时添加不是直接覆盖掉原有样式  
4）`data-big="img/big8.jpg"` **data-名称** 为**自定义属性**，为了方便选中小图时中图也变换成 相应的图片，自定义属性的获取使用`this.getAttribute("data-big")`

var temp=null;
    window.onload = function () { 
        //加载完成事件
        var sblock = document.getElementsByClassName("smblock");
        var middleimg = document.getElementsByClassName("middle-img")[0];//也可以写成sblock的形式，调用时再使用索引
        var btnleft = document.getElementsByClassName("leftbtn")[0];
        var btnright = document.getElementsByClassName("rightbtn")[0];
        var bscontent = document.getElementsByClassName("small-middle-content")[0];
        var middle = document.getElementsByClassName("middle")[0];
        var kuang=document.getElementsByClassName("kuang")[0];
        var big=document.getElementsByClassName("big")[0];
        var bigceng=document.getElementsByClassName("bigCeng")[0];//注意获取变量与原变量名称相同！
    
        temp = sblock[0];//先获取到smblock后才能赋值！否则没有切换效果
        for (var i = 0; i < sblock.length; i++) { 
            sblock[i].onmouseenter = function () { 
                temp.className = "smblock";
                this.className = "sblockhold smblock";//要加上原来的样式，否则直接覆盖之前的效果会丢失
                temp = this;
    
        //中等图片的对应变化
                middleimg.src = this.getAttribute("data-src");
                bigceng.style.backgroundImage="url(" + this.getAttribute("data-big") + ")";
            }
        }

5）点击左右的箭头让小图左右滑动轮播显示，其实控制好图片的左margin距离即可，关于margin为负值的意义和作用，我参考了别人的讲解，觉得十分全面：以下为链接地址  
[https://blog.csdn.net/nicexibeidage/article/details/78431756][https_blog.csdn.net_nicexibeidage_article_details_78431756]  
我们用到的主要是

> 当元素不存在width属性或则width:auto的时候,负值margin会增加元素的宽度.(注意:这仅仅是在元素不存在width属性或则width属性默认的时候,如果有宽度设置,margin-left和margin-right为负值时,会发生位移.)

![在这里插入图片描述][20190806215859725.png]  
![在这里插入图片描述][20190806224450381.png]

btnleft.onclick = function () { 
            bscontent.style.marginLeft = "0px";
        }
            btnright.onclick = function () { 
            bscontent.style.marginLeft = -(456 - 360) + "px";//总内容宽度-能显示内容的卷度
        }

6）中图上的网格框，跟右边的大图一样，鼠标移上去之后才显示，否则隐藏

// 中图上的网格框
        middle.onmouseenter=function(){ 
            kuang.style.display ="block";
            bigceng.style.display = "block";
        }
        middle.onmouseleave=function(){ 
            kuang.style.display ="none";
            bigceng.style.display = "none";
        }

7）接下来就是各种计算的部分了，首先获取到鼠标的位置，要确立好鼠标和网格移动的关系，为了更好的合理性用户体验，我们选择让鼠标显示在网格的中间位置，

middle.onmousemove=function(e){ 
            var x= e.pageX|| e.clientX;
            var y= e.pageY|| e.clientY;
    
             x = x - big.offsetLeft - parseFloat(kuang.style.width) / 2;/*改变的并不是鼠标坐标，而是想鼠标在蓝色选中框的中心显示*/
            y = y - big.offsetTop - parseFloat(kuang.style.height) / 2;/*x,y为蓝色选中框相对于middle的left和top*/

8）还要考虑到蓝色的网格选中框不能超出middle的范围，所以再加以限制，还有一定的逻辑语法在里面

//限制蓝色选中框的左右位置
            var bigleft = (parseFloat(window.getComputedStyle(middle).width) - parseFloat(kuang.style.width));
            var bigtop = (parseFloat(window.getComputedStyle(middle).height) - parseFloat(kuang.style.height));
            
            x = x <= 0 ? 0 : x >= bigleft ? bigleft : x;
            y = y <= 0 ? 0 : y >= bigtop ? bigtop : y;
            kuang.style.left = x + "px";
            kuang.style.top = y + "px";

9）所有的东西都准备好后就只需要再让大图显示在合理位置，并且让大图中的图片显示跟蓝色网格选中的内容要对应上，所以就要计算大框的宽高和中框的宽高比例，也就是蓝色选中框的图片和大框中的图片显示比例；  
其次，中框中移动鼠标时大框中的图片时往相反位置移动

// 大图实际宽高 800*800 和中图实际宽高 400*420 比例 宽 2 高 1.9047
    //根据大块的实际宽和高 计算小块的宽高 ----
     bigceng.style.backgroundPosition =
      (-x * 2) + "px " + (-y * 1.9047) + "px";
     //注意第一个px后留有空格！
     //且大框中的图片与蓝色选中框中的图片移动位置相反，所以为负

实现的效果图如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzAxOTk5_size_16_color_FFFFFF_t_70 5]

**闭包中的一个遗留问题**

function f1(){ 
     var a=1;
     t=function (){ 
     a++;
     }
     return function (){ 
     console.log(a);
     }
    }

var a1=f1();
     a1();//1
     a2=f1();//此时a已经变为未定义类型
     t();//t操作的是a2重新调用的f1()
     a1();//1
     t();//此时的t操作的还是a2调用的f1()，并不影响a1()调用执行时a的值
     a1();//1

同理，可得到如下计算结果

var a1 = f1();
    a1();//1
    a2 = f1();
    t();
    a2();//2
    a1();//1
    t();
    a1();//1

var a1=f1();
         a1();//1
         t();
         a1();//2
         t();
         a1();//3

### 计算器实现过程中的思路和问题 ###

1.  substr字符串的截取 (抽取从strat开始指定长度的字符串)
2.  **计算器的逻辑设计（思路）**  
    a) 总体结构布局使用table,tr,td  
    单元格合并：  
    `<td colspan="4"><input type="text" class="screen" disabled value="0"/></td>`  
    b) 设定好相应的样式

border-collapse: collapse; /*把表格边框重叠部分合并*/

c) 在鼠标点击事件后添加相应功能switch,case语句中判断符号，进入show函数

1.  join和split

数组转换为字符串  
eg:

var a = ["l", "m", "n"];
        console.log(a.join(","));//l,m,n
        /*想让字符串输出为“lmn”的格式join是最好的选择！*/
        console.log(a.join(""));//lmn

相当于把字符串转换为数组 而split相当于join的逆操作

s = "1+2+3+4+5";
        console.log(s.split("+"));//["1", "2", "3", "4", "5"]

1.  `indexof`:查找指定字符的位置，若没有说明起始位置，则默认从头开始查找,找到后返回首次出现的索引值, 没找到返回-1
2.  实现第二次运算时将上一次的计算结果清零:  
    在判断符号时，如果是等号，定义一个全局变量接收等号

case "=":
             result[result.length] = texts.value；
             texts.value = eval(result.join(""));
             console.log(result);
             result = [];
             x = "=";
             break;

在判断到屏幕显示的不为零时增加判断“=”的语句

else {
      /*indexof:查找指定字符的位置，若没有说明起始
      位置，则默认从头开始查找 */
      if (x !== "=") {
     if (texts.value.indexOf(".") == -1 || this.innerHTML !== ".") 
     { //如果之前没有小数点或者输入的不是小数点就可以进行拼接
    		texts.value += this.innerHTML;
          }
          }
                     else {
                         texts.value = this.innerHTML;
                        x = "";
                   }
        }

完整代码：

<!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title>计算器</title>
        <style>
            * {
                margin: 0;
                padding: 0;
            }
    
            table {
                border-collapse: collapse; /*把表格边框重叠部分合并*/
                border: 1px solid black;
                width: 240px;
                margin: auto;
            }
    
            td {
                width: 60px;
                height: 50px;
                border: 1px solid #737373;
            }
    
            .btn {
                width: 100%;
                height: 100%;
                font-size: 20px;
            }
    
            input[type="text"] {
                outline: none;
                text-align: right;
                height: 100%;
                width: 98%;
                font-size: 28px;
            }
        </style>
    </head>
    <body>
    <table>
        <tr>
            <td colspan="4"><input type="text" class="screen" disabled value="0"/></td>
        </tr>
        <tr>
            <td colspan="2">
                <button class="btn">c</button>
            </td>
            <td colspan="2">
                <button class="btn">del</button>
            </td>
        </tr>
        <tr>
            <td>
                <button class="btn">7</button>
            </td>
            <td>
                <button class="btn">8</button>
            </td>
            <td>
                <button class="btn">9</button>
            </td>
            <td>
                <button class="btn">*</button>
            </td>
        </tr>
        <tr>
            <td>
                <button class="btn">6</button>
            </td>
            <td>
                <button class="btn">5</button>
            </td>
            <td>
                <button class="btn">4</button>
            </td>
            <td>
                <button class="btn">/</button>
            </td>
        </tr>
        <tr>
            <td>
                <button class="btn">3</button>
            </td>
            <td>
                <button class="btn">2</button>
            </td>
            <td>
                <button class="btn">1</button>
            </td>
            <td>
                <button class="btn">+</button>
            </td>
        </tr>
        <tr>
            <td>
                <button class="btn">0</button>
            </td>
            <td>
                <button class="btn">.</button>
            </td>
            <td>
                <button class="btn">-</button>
            </td>
            <td>
                <button class="btn">=</button>
            </td>
        </tr>
    </table>
    <script>
        var result = [];//声明一个存储数据的空数组
        var isnumber = true;
        var x = null;//用一个全局变量存储当前输入值
        var btn = document.querySelectorAll(".btn");//选择器要加.
        var texts = document.getElementsByClassName("screen")[0];//不加.
        for (var i = 0; i < btn.length; i++) {
            btn[i].onclick = function () {
                if (!isNaN(this.innerHTML) || this.innerHTML == ".") {
                    isnumber = true;
                    if (texts.value == "0") {
                        if (this.innerHTML == ".") {
                            texts.value = "0" + this.innerHTML;
                        }
                        else {
                            texts.value = this.innerHTML;
                        }
                    }
                    else {
                        /*indexof:查找指定字符的位置，若没有说明起始位置，则默认从头开始查找 */
                            if (x !== "=") {
                                if (texts.value.indexOf(".") == -1 || this.innerHTML !== ".") {
                                    //如果之前没有小数点或者输入的不是小数点就可以进行拼接
                                    texts.value += this.innerHTML;
                                }
                            }
                            else {
                                texts.value = this.innerHTML;
                                x = "";
                            }
    
                    }
                }
                else {
                    //+ - * / =  c  del
                    switch (this.innerHTML) {
                        case "+":
                            show("+");
                            break;
                        case "-":
                            show("-");
                            break;
                        case "*":
                            show("*");
                            break;
                        case "/":
                            show("/");
                            break;
                        case "=":
                            result[result.length] = texts.value;
                            /*jion用分隔符把多个字符连接起来
                             * 对数组对象来说，相当于把数组转换为字符串
                             * 而split相当于jion的逆操作
                             * eg:join split.html
                             * */
                            texts.value = eval(result.join(""));
                            console.log(result);
                            result = [];
                            x = "=";
                            console.log(x);
                            break;
                        case "c":
                            result = [];
                            texts.value = "0";
                            break;
                        case "del":
                            //substr 字符串的截取   index   length (抽取从strat开始指定长度的字符串)
                            texts.value = texts.value.length > 1 ? texts.value.substr(0, texts.value.length - 1) : 0;
                            break;
                    }
                }
            }
        }
        function show(str) {
            if (isnumber) {//判断用户是否连续输入字符
    
                //result.length初始值为0，存放第一个数字，即result[0]=texts.value;数组长度增加，存放下一个数字
                result[result.length] = texts.value;
                //    获取传来的符号
                result[result.length] = str;
                texts.value = "0";
                isnumber = false;
            }
            else {
                result[result.length - 1] = str;
            }
        }
    
    </script>
    </body>
    </html>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzAxOTk5_size_16_color_FFFFFF_t_70]: /images/20211108/9238414953ea4f88a709d70536520fde.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzAxOTk5_size_16_color_FFFFFF_t_70 1]: /images/20211108/d3911a22845d4bb0b03d314ca7f5898a.png
[20190806234759856.png]: /images/20211108/9c3db479e2a64f4296c5c1eee8d05b82.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzAxOTk5_size_16_color_FFFFFF_t_70 2]: /images/20211108/d352a1b4e8b649c0a5e062a60d26fc1b.png
[https_blog.csdn.net_sun_DongLiang_article_details_81321637]: https://blog.csdn.net/sun_DongLiang/article/details/81321637
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzAxOTk5_size_16_color_FFFFFF_t_70 3]: /images/20211108/85835856926447e3a1e116fa613293b4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzAxOTk5_size_16_color_FFFFFF_t_70 4]: /images/20211108/2fc2b2932dd7435a828ae747bf120f17.png
[2019080621282579.png]: /images/20211108/5b5c042c85064eccaba40b6f81fbae80.png
[20190806212745413.png]: /images/20211108/9faa4a6610a24ec5837b6468c6dd57b8.png
[https_blog.csdn.net_nicexibeidage_article_details_78431756]: https://blog.csdn.net/nicexibeidage/article/details/78431756
[20190806215859725.png]: /images/20211108/57ba5233a475474e9da904bab3111445.png
[20190806224450381.png]: /images/20211108/053734b935d940f4a04f152e4cba3d7e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzAxOTk5_size_16_color_FFFFFF_t_70 5]: /images/20211108/a238d94798684881a6592206095faf5b.png