JS，BOM试题，在实践中应用，非常详细！！

已于 2022-11-20 20:40:26 修改
阅读量566 收藏 2
点赞数
分类专栏： JS试题 JS 文章标签： javascript css 前端
于 2022-11-20 20:40:23 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_62951223/article/details/127953836
版权
JS 同时被 2 个专栏收录
13 篇文章 0 订阅
订阅专栏
JS试题
4 篇文章 0 订阅
订阅专栏

折页特效

页角平滑的展开和收缩

方法1

<!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>
        html,
        body {
            height: 100%;
            margin: 0;
        }

        #top_right {
            width: 248px;
            display: block;
            position: fixed;
            right: 0;
            top: 0;
            background-image: url(top_right.png);
            background-repeat: no-repeat;
        }

        /*需要改变的类*/
        .t_r_0 {
            background-position: right 0;
            height: 41px;
        }

        .t_r_1 {
            background-position: right -100px;
            height: 70px;
        }

        .t_r_2 {
            background-position: right -200px;
            height: 80px;
        }

        .t_r_3 {
            background-position: right -300px;
            height: 90px;
        }

        .t_r_4 {
            background-position: right -400px;
            height: 130px;
        }

        .t_r_5 {
            background-position: right -550px;
            height: 150px;
        }

        .t_r_6 {
            background-position: right -700px;
            height: 150px;
        }
    </style>
</head>

<body style="background-color:#008EDE">
    <a class="t_r_0" id="top_right" href="#">

    </a>
    <script>
        var a = document.querySelector('a');
        var timer;
        var flag = 0, num = 0;
        a.onmouseover = function () {
            flag = 1;
            if (!timer) {
                timer = setInterval(function () {
                    if (flag == 1 && num < 6) {
                        //到达5时，满足num<6，这时会再运行一次num++，num=6
                        console.log(num);
                        num++;
                        a.className = "t_r_" + num;

                    } else if (flag == 0 && num > 0) {
                        //到达1时，满足num>0，这时会再运行一次num--，num=0
                        num--;
                        a.className = "t_r_" + num;
                        console.log(num);
                    }
             
                }, 50)
            }
        }
        a.onmouseout = function () {
            flag = 0;
        }
    </script>
</body>

</html>

方法2

<!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>
        html,
        body {
            height: 100%;
            margin: 0;
        }

        #top_right {
            width: 248px;
            display: block;
            position: fixed;
            right: 0;
            top: 0;
            background-image: url(top_right.png);
            background-repeat: no-repeat;
        }

        /*需要改变的类*/
        .t_r_0 {
            background-position: right 0;
            height: 41px;
        }

        .t_r_1 {
            background-position: right -100px;
            height: 70px;
        }

        .t_r_2 {
            background-position: right -200px;
            height: 80px;
        }

        .t_r_3 {
            background-position: right -300px;
            height: 90px;
        }

        .t_r_4 {
            background-position: right -400px;
            height: 130px;
        }

        .t_r_5 {
            background-position: right -550px;
            height: 150px;
        }

        .t_r_6 {
            background-position: right -700px;
            height: 150px;
        }
    </style>
</head>

<body style="background-color:#008EDE">
    <a class="t_r_0" id="top_right" href="#">

    </a>
    <script>
        var a = document.querySelector('a');
        var timer1, timer2;
        var flag = 0, num = 0;
        a.onmouseover = function () {
            flag = 1;
            if (!timer1) {
                timer1 = setInterval(function () {
                    if (flag == 1 && num < 6) {
                        //到达5时，满足num<6，这时会再运行一次num++，num=6
                        num++;
                        a.className = "t_r_" + num;
                    }
                }, 50)
            }
        }
        a.onmouseout = function () {
            flag = 0;
            if (!timer2) {
                timer2 = setInterval(function () {
                    if (flag == 0 && num > 0) {
                        //到达1时，满足num>0，这时会再运行一次num--，num=0
                        num--;
                        a.className = "t_r_" + num;
                    }
                }, 50)
            }
        }
    </script>
</body>

</html>

思路：分为两个部分，一是把光标移到页角，页角展开，二是把光标移开，页角收缩

因为 css样式设置了7个样式，表现收缩，从 1—>7 展开，从7—>1 收缩

  1. 获取元素 a，设置一个定时器，一个flag
  2. 用flag 表示光标移入(flag=1)和移出(flag=0)
  3. 当移入时 flag = 1 用 a.className = "t_r_" + num; num++不断修改样式
  4. 当移出时，flag=0，然后进行num–

随机点名

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box {
            width: 1000px;
            height: 150px;
            margin: 0 auto;

            clear: both;
        }

        #btn {
            width: 100px;
            height: 30px;
            margin-left: 700px;
            margin-top: 20px;

        }

        .name {
            width: 100px;
            height: 30px;
            float: left;
            background-color: antiquewhite;
            margin-left: 10px;
            margin-top: 10px;
            text-align: center;
            line-height: 30px;
        }

        #span {
            float: right;
            position: relative;
            top: 55px;
            right: 185px;
        }

        h1 {
            text-align: center;
        }
        .color{
            background-color: red;
        }
    </style>

</head>

<body>
    <h1>随机点名系统</h1>

    <div class="box" id="box"></div>
    <input type="button" id="btn" value="点名" />
    <script type="text/javascript">
        var btn = document.getElementById("btn");
        var div = document.getElementById("box");
        var t,sum;
        var flag = 0;

        for (var i = 0; i < 36; i++) {
            var s = document.createElement('div');
            s.innerHTML = "点名" + i;
            s.className = "name";
            div.appendChild(s);
        }
     
        var names = document.querySelectorAll(".name");
        btn.addEventListener('click', function () {
            if (flag == 1) {
                btn.value = "点名";
                flag = 0;
                clearInterval(t);
                return;
            }
            btn.value = "停止";
            flag = 1;
            //if (!t) { 如果加这一句的话，定时器就不会发生改变，导致无法多次点名
                t = setInterval(function () {     
                    for(var j=0;j<i;j++){
                        names[j].className = 'name';
                    }
                    var rou = Math.floor(Math.random()*(i-1));   
                    names[rou].className = 'name color';     
                }, 100)
            //}
        })
    </script>
</body>

</html>

思路：创建若干个div节点，接到父节点(div)上，用name样式，进入点击事件，如果点击“点名”，则“点名”变成“停止”，同时进行随机出现锁定某子节点，且样式变成红色，其他的样式均为原状，再点击，则变回“点名”，锁定某子节点，可以反复点名。

  1. 创建子节点，子节点名称、子节点样式、子节点接到父节点
  2. 设置flag，用于判定点名或截止的状态
  3. 进入定时器，将所有的子节点样式全部变成原状，获取随机数，把当前选定的节点样式修改成红色

注意：定时器需要重复创建

试题在我的资源里，请自行下载

数次拒绝刘亦菲
关注
专栏目录
JavaScript中BOM对象原理与用法分析
12-11
在实际开发中，了解和熟练掌握BOM对象的使用对于创建动态、交互性强的Web应用程序至关重要。同时，学习JavaScript的DOM操作和事件处理也是提升Web前端开发能力的重要环节。通过不断实践和深入学习，可以更好地利用...
《JavaScript前端开发案例教程》------第6章BOM课后练习
homoiotheymy的博客
07-14 2883
一、填空题 1. window或window对象 2. setTimeout() 3. length或length属性 二、判断题 1. 对。 2. 对。 3. 对。 4. 错。 三、选择题 1. B 2. D 四、编程题 <style> div{ height:50px; line-height:50px; text-align:center; border:double #ccc; width:100px; } </style> &l
javaScript 第六Bom编程，含面试题+答案
m0_58269070的博客
03-16 852
基础知识是前端一面必问的，如果你在基础知识这一块翻车了，就算你框架玩的再6，webpack、git、node学习的再好也无济于事，因为对方就不会再给你展示的机会，千万不要因为基础错过了自己心怡的公司。前端的基础知识杂且多，并不是理解就ok了，有些是真的要去记。当然了我们是牛x的前端工程师，每天像背英语单词一样去背知识点就没必要了，只要平时工作中多注意总结，面试前端刷下题目就可以了。73603)][外链图片转存中…(img-9DuJ5jtg-1710599773603)]
JS基础知识复习（三）：BOM对象
mr_foxsand的专栏
07-22 176
1. BOM：Browser Object Model 2. 对话框： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript"> /** * BOM:浏览器对象模型 *
js：BOM学习
xuan971130的博客
03-29 330
一：什么是BOM 二、window对象常用的时间 2.1 窗口加载事件 window.onload;加载完页面后，再触发该事件 但是使用window.addEventListener('load', function(){})//就不回去出现上述2中的问题。 （1）load必须等页面内容全部加载完毕，包含页面dom元素、图片 flash css等 （2）DOMContentLoaded 是DOM加载完毕，不包含图片 flash css等就可以执行，加载速度比...
javascript中DOM,BOM事件常见试题分析
weixin_46226202的博客
10-28 313
从基础知识到JS-Web-API
JavaScript基础&BOM，学习Java第42天
07-31
JavaScript是一种广泛应用于网页和网络应用开发的解释性脚本语言，其主要由ECMAScript、BOM（浏览器对象模型）和DOM（文档对象模型）三部分组成。在HTML、CSS和JS这构建网站的三大技术中，JavaScript负责赋予网页...
《Web应用开发实践》实验课教学大纲.docx
12-15
5. JavaScript事件分析和DOM与BOM操作：通过表单事件、鼠标事件和键盘事件的学习，以及实际操作，学生将理解JavaScript如何响应用户交互，同时掌握文档对象模型（DOM）和浏览器对象模型（BOM）的应用。 6. 大作业：...
14-BOM应用.pptx
07-06
在JavaScript教学中，理解并掌握BOM的应用对于提升网页动态效果和用户体验至关重要。 ### 1. 打开和关闭窗口 - **open() 方法**：用于打开新的浏览器窗口或者标签页。例如： ```javascript var newWindow = ...
实现JavaScript的组成----BOM和DOM详解
10-22
标题所涉及的知识点是JavaScript的组成...上述内容涵盖了BOM和DOM在JavaScript中的角色和应用，进一步的学习需要对每个对象、属性和方法有更深入的理解，同时结合实际项目进行实践，以便更好地掌握JavaScript编程技能。
JS-WebAPI-BOM练习题(定时器/页面跳转)
Fky_mie的博客
03-17 713
JS-API第5天-BOM练习题 文章目录JS-API第5天-BOM练习题一, 定时器练习练习1. 3秒后自动关闭广告练习2. 京东秒杀倒计时牌 一, 定时器练习 练习1. 3秒后自动关闭广告 <body> <img src="images/cj.jpg" alt="" class="ad"> <script> var ad = document.querySelector('.ad'); setTimeout(functi
BOM简单练习题（一）
不言尘世
07-25 2224
今天分享一下一些简单的练习题 1， 当打开页面时，红色方块会自动向后移动 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script type="text/javascript"> </scr...
js中的BOM操作知识整理
热门推荐
冰雪为融的博客
03-06 2万+
一、什么是BOM？BOM：Browser Object Model 是浏览器对象模型，浏览器对象模型提供了独立与内容的、可以与浏览器窗口进行互动的对象结构，BOM由多个对象构成，其中代表浏览器窗口的window对象是BOM的顶层对象，其他对象都是该对象的子对象。二、关于BOM知识的思维导图三、主流浏览器的介绍浏览器内核主要指的是浏览器的渲染引擎，2013 年以前，代表有 Trident（IE），G...
JS基础之BOM基本操作练习（返回网页顶部，吸顶条）
ZQsSpace的博客
02-10 157
JS基础之BOM基本操作练习（返回网页顶部，吸顶条）；本篇文章包含了两个基于BOM基本操作的小练习，用于进一步加强对BOM基本操作的掌握。关于BOM的基本操作可简单参考。
js基础试题及答案(一)
szmtjs10的博客
12-09 1万+
一、单选题（共30题，每题2分） 1.如下代码，会弹出来是什么 var num1=“1” ;var num2=1 alert(num1-num2); A 0 B 11 C 1+1 D 报错 正确答案: A 解析: 相减,进行隐士转换,全部为数字 2.如下代码，会弹出来是什么 var num1=“hi” var num2=1...
js BOM对象 练习题
哈哈绝的博客
10-20 1366
js BOM对象 练习题 在屏幕上显示系统时间，每秒更新。 在页面中有一个button和一个文本输入框，要求：点击button后，在百度搜索文本输入框内的内容 广告弹出自动关闭(效果见页面) 返回顶部
JavaScript学习笔记07 BOM
船长的博客
05-30 267
浏览器对象模型 (BOM) 浏览器对象模型（Browser Object Model (BOM)）尚无正式标准。 由于现代浏览器已经（几乎）实现了 JavaScript 交互性方面的相同方法和属性，因此常被认为是 BOM 的方法和属性。 Window 尺寸 有三种方法能够确定浏览器窗口的尺寸（浏览器的视口，不包括工具栏和滚动条）。 对于Internet E
内页练习
csdnxiaotao的博客
02-23 128
js中【Worker】相关知识点详细解读
最新发布
2301_79858914的博客
09-11 885
JavaScript 中的 Worker 是一个可以在后台线程中运行代码的 API，这样可以避免主线程（通常是 UI 线程）被阻塞。使用 Worker 时，JavaScript 可以在多线程环境中工作，解决了单线程的瓶颈问题。通常情况下，JavaScript 是单线程的，也就是所有的代码（包括 DOM 操作和事件处理等）都在同一个线程里执行。如果某段代码需要大量计算，或者运行时间过长，会阻塞整个页面，导致界面卡顿甚至崩溃。Worker提供了一种将复杂或耗时的任务分配到后台线程执行的方法。
深入理解JavaScript BOM：浏览器对象模型的实践与问题
本文档主要介绍了JavaScript BOM (Browser Object Model)的学习总结，BOM是浏览器对象模型，它赋予JavaScript在浏览器环境中操作的能力。由于BOM缺乏统一标准，各浏览器对其支持存在差异，这往往是开发者遇到问题的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值