BOM基础1-21 编程练习

最新推荐文章于 2024-09-14 11:12:01 发布

原创

最新推荐文章于 2024-09-14 11:12:01 发布 · 514 阅读

收录于

当前文章被以下社区和专栏收录：

这篇博客提供了一道编程练习，涉及JavaScript操作DOM元素。内容包括：当点击‘删除’按钮后，3秒内若未点击‘取消删除’，div内容将在3秒后消失；若在这3秒内点击了‘取消删除’，则删除操作会被取消。解答步骤涵盖获取DOM元素、设置定时器及绑定事件处理函数。

1-21 编程练习

根据gif效果图补充代码，实现以下要求：

（1）点击“删除”按钮3秒后，页面上div里面的文字消失

（2）点击“删除”按钮之后的3秒内，如果点击“取消删除”按钮，那么页面上div里面的文字就不会被删除

第一步：获取到页面上的两个按钮对象以及div对象

第二步：声明一个变量，用来接收下面即将定义的定时器

第三步：给“删除”按钮绑定事件，点击“删除”按钮3秒后，div里的文本为空

Tips：事件里面放置定时器，点击按钮3秒后清空div里面的内容

第四步：给“取消删除”按钮绑定事件，点击“删除”按钮3秒内，再点击“取消删除”按钮，则会取消清空div里面的文本

参考答案：

<!DOCTYPE html>
<html>
<head lang="zh-CN">
    <meta charset="UTF-8">
    <title>定时器</title>
    <style type="text/css">
        div {
            width: 400px;
            height: 120px;
            margin-top: 50px;
            border: 2px solid gray;
            padding: 10px;
        }
    </style>
</head>

<body>
    &