JavaScript

最新推荐文章于 2024-04-23 20:28:43 发布

紫夜✘

最新推荐文章于 2024-04-23 20:28:43 发布

阅读量236

点赞数

分类专栏： javascript javascript小项目文章标签： css html javascript Powered by 金山文档

本文链接：https://blog.csdn.net/Purple_night_/article/details/128960862

版权

javascript 同时被 2 个专栏收录

4 篇文章 0 订阅

订阅专栏

javascript小项目

3 篇文章 0 订阅

订阅专栏

文章介绍了BOM中的核心对象如document和window，以及navigator、history、location和screen等属性。提到了JavaScript的输出方式，包括alert、confirm和prompt函数，以及console.log用于控制台输出。此外，文章通过一个实例展示了如何使用JavaScript实现页面上的广告关闭功能，通过事件监听和处理实现元素隐藏。

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

BOM核心对象docunment

BOM核心对象window

BOM包含着DOM

F12即可打开浏览器控制台

navigator(浏览器版本）、history(浏览器历史记录），location(地址信息）、screen(屏幕相关）

JS输出形式：

浏览器输出：

window.alert() 弹窗

confirm("请输入姓名") //会有取消确认键

prompt("你叫什么？"，"请问？") 已经不怎么用了？

console.log("控制台输出日志！")

断点调试

页面输出：

document.write("你好！");

不能识别标签

关闭广告小功能实现！

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        body{
            height: 2000px;
            background: rgba(206, 196, 133, 0.5);
        }
        section{
            position: fixed;
            right:0;
            top: 100px;
        }
        span{
            color:white;
            position: absolute;
            right: 0;
            bottom: -21px;
            cursor:pointer;
        }
    </style>
</head>
<body>
    <section id="ad"> 
        <img src="E:\JS\.vscode\春.jpg" alt="你">
        <span id="btn">关闭 X</span>
    </section>
    <script>
        //需求分析：点击按钮，关闭广告
        //获取事件源
        var ad=document.getElementById("ad");
        var btn=document.getElementById("btn");
        //事件类型
        btn.onclick=function(){
            //书写事件驱动程序 section 隐藏
            ad.style.display="none";
        }
        //书写事件驱动程序
    </script>
</body>
</html>