![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
BOM和DOM操作
今天会下雨吗
多动脑思考吧
展开
-
纯js实现轮播图
结合我们前面学过的:鼠标监听事件(移入移出、点击),创建节点,排他思想、定时器等,就可以实现一个能手动和自动播放的轮播图效果图代码1. css /*清除元素默认的内外边距 */* { margin: 0; padding: 0}body{ width: 1000px; margin: 0 auto;}/*去掉列表前面的小点*/li { list-style: none;}/*图片没有边框 去掉图片底侧的空白缝隙*/img {原创 2021-05-06 16:47:26 · 90 阅读 · 0 评论 -
JavaScript实现 - 仿京东放大镜效果
案例分析整个案例可以分为三个功能模块鼠标经过小图片盒子, 黄色的遮挡层 和 大图片盒子显示,离开隐藏2个盒子功能黄色的遮挡层跟随鼠标功能。移动黄色遮挡层,大图片跟随移动功能。鼠标经过小图片盒子, 黄色的遮挡层 和 大图片盒子显示,离开隐藏2个盒子功能就是显示与隐藏移动黄色遮挡层,大图片跟随移动功能,大图片的移动距离要跟黄色遮挡层的比例相等。求大图片的移动距离公式代码<!DOCTYPE html><html lang="en"><head>原创 2021-05-02 16:42:22 · 396 阅读 · 2 评论 -
模态框拖拽
弹出框,我们也称为模态框。点击弹出层, 会弹出模态框, 并且显示灰色半透明的遮挡层。点击关闭按钮,可以关闭模态框,并且同时关闭灰色半透明遮挡层。鼠标放到模态框最上面一行,可以按住鼠标拖拽模态框在页面中移动。鼠标松开,可以停止拖动模态框移动。案例分析点击弹出层, 模态框和遮挡层就会显示出来 display:block;点击关闭按钮,模态框和遮挡层就会隐藏起来 display:none;在页面中拖拽的原理: 鼠标按下并且移动, 之后松开鼠标触发事件是鼠标按下 mousedown, 鼠标移原创 2021-05-02 15:14:04 · 147 阅读 · 0 评论 -
setInterval() 定时器 - 实现发送短信倒计时
知识点 - 清除定时器setInterval()clearInterval()方法取消了先前通过调用 setInterval()建立的定时器。 window.clearInterval(intervalID);注意:window 可以省略。里面的参数就是定时器的标识符 。案例: 发送短信点击按钮后,该按钮60秒之内不能再次点击,防止重复发送短信案例分析按钮点击之后,会禁用 disabled 为true同时按钮里面的内容会变化, 注意 button 里面的内容通过 inne原创 2021-04-28 13:36:16 · 335 阅读 · 0 评论 -
setInterval() 定时器 - 倒计时
setInterval() 方法重复调用一个函数,每隔这个时间,就去调用一次回调函数。 window.setInterval(回调函数, [间隔的毫秒数]);注意:window 可以省略。这个调用函数可以直接写函数,或者写函数名或者采取字符串 ‘函数名()’ 三种形式。间隔的毫秒数省略默认是 0,如果写,必须是毫秒,表示每隔多少毫秒就自动调用这个函数。因为定时器可能有很多,所以我们经常给定时器赋值一个标识符。第一次执行也是间隔毫秒数之后执行,之后每隔毫秒数就执行一次。原创 2021-04-28 13:30:36 · 850 阅读 · 0 评论 -
BOM和DOM操作 - Day2 - 常用的键盘事件
8.常用的键盘事件8.1 常用键盘事件事件除了使用鼠标触发,还可以使用键盘触发。注意:如果使用addEventListener 不需要加 ononkeypress 和前面2个的区别是,它不识别功能键,比如左右箭头,shift等。三个事件的执行顺序是:keydown -- keypress --- keyup8.2 键盘事件对象注意: onkeydown 和 onkeyup 不区分字母大小写,onkeypress 区分字母大小写。在我们实际开发中,我们更多的使用keydown和k原创 2021-04-27 20:51:03 · 149 阅读 · 0 评论 -
BOM和DOM操作 - Day2 - 常用的鼠标事件
7. 常用的鼠标事件7.1 常用的鼠标事件1.禁止鼠标右键菜单contextmenu主要控制应该何时显示上下文菜单,主要用于程序员取消默认的上下文菜单document.addEventListener('contextmenu', function(e) {e.preventDefault();})2.禁止鼠标选中(selectstart 开始选中)document.addEventListener('selectstart', function(e) { e.preventDe原创 2021-04-27 20:50:13 · 203 阅读 · 0 评论 -
BOM和DOM操作 - Day2 -事件委托
6. 事件委托(代理、委派)事件冒泡本身的特性,会带来的坏处,也会带来的好处,需要我们灵活掌握。生活中有如下场景:咱们班有100个学生, 快递员有100个快递, 如果一个个的送花费时间较长。同时每个学生领取的时候,也需要排队领取,也花费时间较长,何如?解决方案:快递员把100个快递,委托给班主任,班主任把这些快递放到办公室,同学们下课自行领取即可。优势:快递员省事,委托给班主任就可以走了。 同学们领取也方便,因为相信班主任。事件冒泡本身的特性,会带来的坏处,也会带来的好处,需要我们灵活掌原创 2021-04-27 20:49:21 · 124 阅读 · 0 评论 -
BOM和DOM操作 - Day2 - 阻止事件冒泡
5. 阻止事件冒泡5.1 阻止事件冒泡的两种方式事件冒泡:开始时由最具体的元素接收,然后逐级向上传播到到 DOM 最顶层节点。事件冒泡本身的特性,会带来的坏处,也会带来的好处,需要我们灵活掌握。阻止事件冒泡标准写法:利用事件对象里面的 stopPropagation()方法 e.stopPropagation() 非标准写法:IE 6-8 利用事件对象 cancelBubble 属性 e.cancelBubble = true;5.2 阻止事件冒泡的兼容性解决方案 if(原创 2021-04-27 20:48:06 · 136 阅读 · 0 评论 -
BOM和DOM操作 - Day2 - 事件对象
4. 事件对象4.1 什么是事件对象官方解释:event 对象代表事件的状态,比如键盘按键的状态、鼠标的位置、鼠标按钮的状态。简单理解:事件发生后,跟事件相关的一系列信息数据的集合都放到这个对象里面,这个对象就是事件对象 event,它有很多属性和方法。 eventTarget.onclick = function(event) {} eventTarget.addEventListener('click', function(event) {}) // 这个 event 就是事件对象,原创 2021-04-27 20:46:43 · 120 阅读 · 0 评论 -
BOM和DOM操作 - Day2 - 事件(注册事件、删除事件、DOM事件流等)
1. 注册事件(绑定事件)1.1 注册事件概述给元素添加事件,称为注册事件或者绑定事件。注册事件有两种方式:传统方式和方法监听注册方式1.1.1 传统注册方式利用 on 开头的事件 onclick<button onclick=“alert('hi~')”></button>btn.onclick = function() {}特点: 注册事件的唯一性// 唯一性: 当同一个按钮有两个或多个点击事件时,只会执行最后一个<button>0原创 2021-04-27 20:40:30 · 151 阅读 · 0 评论 -
BOM和BOM操作 - Day1 - Web APIs
1. Web APIs 和 JS 基础关联性1.1 JS 的组成[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NwPUJDis-1619160672604)(C:\Users\xmydd\AppData\Roaming\Typora\typora-user-images\image-20210423143809287.png)]1.2 JS基础阶段以及 Web APIs 阶段1.2.1 JS 基础阶段我们学习的是 ECMAScript 标准规定的基本语法要求同学原创 2021-04-23 14:53:04 · 147 阅读 · 0 评论