javascript练习题（六）

最新推荐文章于 2023-03-24 09:09:41 发布

k_shl_2011

最新推荐文章于 2023-03-24 09:09:41 发布

阅读量1.8k

点赞数

分类专栏： javascript web前端文章标签： javascript

本文链接：https://blog.csdn.net/k_shl_2011/article/details/51321473

版权

本章节的JavaScript练习涉及浏览器对象模型（BOM）、DOM操作、事件处理和XMLHttpRequest对象。挑战包括创建地震效果的窗口，实现安全的DOM移除，构建事件工具集，以及实现基于键盘移动的div元素和AJAX请求。通过这些练习，读者可以加深对JavaScript在浏览器环境中的实际应用的理解。

摘要由CSDN通过智能技术生成

第7章浏览器环境
在本章之前，我们的练习题都是可以在各自章节的正文中找到解决方案的。但这一次，您会发现有些练习题需要我们对本书意外的内容有更多的了解（或实践经验）。

1.BOM
作为BOM的练习来说，我们可以试着写出许多错误的、富有骚扰性的、对用户非常不友好的代码，以及所有非常Web1.0的东西。例如晃动的浏览器窗口。请试着令浏览器弹出一个200*200的窗口，然后将其大小渐变成400*400，接着将窗口上下左右不停移动，造成地震效果。为了实现这种效果，我们需要move*（）函数，其中需要一次货多次调用setInterval（），最后可能还需要setTimeout（）及clearInterval（）来令其停止操作。或者我们可以更简单一些，将当前日期通过document.title实时显示在浏览器的标题栏中，并像钟表一样每秒更新一次。

参考答案：

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>

<script type="text/javascript">
    var winSize=200;
    var win=window.open("","","width=200,height=200,resizable=yes");
    var sizeTimer=setInterval(function(){
    
        winSize+=5;
        if(winSize>=400){
            winSize=400;
            clearInterval(sizeTimer);
            startShake();
        }
        win.resizeTo(winSize,winSize);
    },40);

    function startShake(){
    
        var distance=10;
        var shakeTimer=setInterval(function(){
    
            win.moveBy(distance,distance);
            distance*=-1;
        },40);
        setTimeout(function(){
    
            clearInterval(shakeTimer);
        },10000);
    }

    showTitleTime();
    function showTitleTime() {
    
        setInterval(function(){
    
            var date=new Date();
            document.title=date.getHours()+" : "+date.getMinutes()+ " : "+date.getSeconds();
        },1000);
    }
</script>
</body>
</html>

2.DOM
1）换一种方式来实现walkDom（）方法，以回调函数参数的形式来代替console.log（）硬编码。
2）使用innerHTML来移除相关内容确实很方便（即document.body.innerHTML=”“），但未必总是最好的选择。如果在其中有元素被设置了事件监听器，那么当该元素被移除时，IE并不会接触该元素与监听器之间的关联。这就有可能导致浏览器中内存泄漏，因为它们所引用的内容已经不存在了。因此，请你实现一个通用的移除DOM节点的函数，它会在移除节点的同事移除相关的事件监听器。你可以遍历目标节点的属性，检查这些属性值是否属于函数类型，如果是（例如最常见的onclick属性），你就需要在该元素节点被删除之前将该属性设置为null。
1）和2）共用的html内容