web APIs总结(2)

1. 页面滚动事件

  • 很多网页需要检测用户把页面滚动到某个区域后做一些处理, 比如固定导航栏、返回顶部
  • 事件名:scroll
  • 监听某个元素的内部滚动直接给某个元素加即可

获取位置
scrollLeft和scrollTop (属性)
(注:获取html元素写法:document.documentElement)

  • 获取被卷去的大小
  • 获取元素内容往左、往上滚出去看不到的距离
  • 这两个值是可读写
  • 检测页面滚动的头部距离(被卷去的头部)用那个属性?
    document.documentElement.scrollTop
    window.scrollTo
    在这里插入图片描述

2. 页面加载事件有哪两个?如何添加?

load 事件:监听整个页面资源给 window
DOMContentLoaded:给 document 加;无需等待样式表、图像等完全加载

3. 页面尺寸事件

会在窗口尺寸改变的时候触发事件:

window.addEventListener('resize', function () {
	//执行的代码
})

检测屏幕宽度:

window.addEventListener('resize', function () {
	let w = document.documentElement.clientWidth
	console.log(w)
})

获取宽高clientWidth和clientHeight:获取元素的可见部分宽高(不包含边框,margin,滚动条等)

4. 元素尺寸于位置

通过js的方式,得到元素在页面中的位置

  • offsetWidth和offsetHeight是得到元素什么的宽高?(只读属性
    内容 + padding + bord
  • offsetTop和offsetLeft 得到位置以谁为准?
    有定位的父级;如果都没有则以 文档左上角 为准
    注意: 获取的是可视宽高, 如果盒子是隐藏的,获取的结果是0
  • element.getBoundingClientRect():方法返回元素的大小及其相对于视口的位置

5. 总结

在这里插入图片描述

6. 小tips

/* 页面滑动 */
html {
  /* 让滚动条丝滑的滚动 */
  scroll-behavior: smooth;
}

属性选择器:[data-name=new]

7. 日期对象方法

在这里插入图片描述

显示格式化的时间:(输出:今天是: 2024年4月9号 23:23:48)

<div></div>
  <script>
    const div = document.querySelector('div')
    function getMyDate() {
      const date = new Date()
      let h = date.getHours()
      let m = date.getMinutes()
      let s = date.getSeconds()
	  //数字要补0
      h = h < 10 ? '0' + h : h
      m = m < 10 ? '0' + m : m
      s = s < 10 ? '0' + s : s
      return `今天是: ${date.getFullYear()}${date.getMonth() + 1}${date.getDate()}${h}:${m}:${s}`
    }
    div.innerHTML = getMyDate()
	//回调函数
    setInterval(function () {
      div.innerHTML = getMyDate()
    }, 1000)
  </script>

时间的另外一个写法:(输出:2024/4/9 23:29:03)

<div></div>
  <script>
    const div = document.querySelector('div')
    // 得到日期对象
    const date = new Date()
    div.innerHTML = date.toLocaleString()  // 2022/4/1 09:41:21
    setInterval(function () {
      const date = new Date()
      div.innerHTML = date.toLocaleString()  // 2022/4/1 09:41:21
    }, 1000)
    // div.innerHTML = date.toLocaleDateString()  // 2022/4/1
    // div.innerHTML = date.toLocaleTimeString()  // 09:41:21
  </script>

8. 时间戳

  • 定义:是指1970年01月01日00时00分00秒起至现在的毫秒数,它是一种特殊的计量时间的方式
  • 使用场景:果计算倒计时效果,前面方法无法直接计算,需要借助于时间戳完成
  • 日期对象方法里面月份和星期有什么注意的?月份是0~11, 星期是 0~6
  • 获取时间戳有哪三种方式?重点记住那个?
    date.getTime();+new Date();Date.now()
    重点记住 +new Date() 因为可以返回当前时间戳或者指定的时间戳

9. 查找DOM节点

  • 父节点查找:parentNode 属性;返回最近一级的父节点 找不到返回为null`(子元素.parentNode)
  • 子节点查找:children 属性 (重点);仅获得所有元素节点;返回的还是一个伪数组
    (父元素.children)
  • 查找兄弟节点用那个属性?nextElementSibling;previousElementSibling

10. 增加DOM节点(重要)

1. 创建节点

  • 即创造出一个新的网页元素,再添加到网页内,一般先创建节点,然后插入节点
  • 创建元素节点方法:
//创造一个新的元素节点
document.createElement('标签名')

2. 追加节点

  • 要想在界面看到,还得插入到某个父元素中
  • 插入到父元素的最后一个子元素:
//插入到这个父元素的最后
父元素.appendChild(要插入的元素)
  • 插入到父元素中某个子元素的前面:
//插入到某个子元素的前面
父元素.insertBefore(插入的元素, 放到哪个元素的前面)

3. 克隆节点
cloneNode会克隆出一个跟原标签一样的元素,括号内传入布尔值

  • 若为true,则代表克隆时会包含后代节点(文字)一起克隆
  • 若为false,则代表克隆时不包含后代节点(文字)
  • 默认为false
//克隆一个已有的元素节点
元素.cloneNode(布尔值)

11. 删除DOM节点

  • 若一个节点在页面中已不需要时,可以删除它
  • 在 JavaScript 原生DOM操作中,要删除元素必须通过父元素删除
  • 注:
    不存在父子关系则删除不成功
    删除节点和隐藏节点(display:none) 有区别的: 隐藏节点还是存在的,但是删除,则从html中删除节点

12. 移动端事件

常见的触屏事件如下:
在这里插入图片描述

13. Swiper轮播图

swiper官网地址:https://www.swiper.com.cn/
导入最新版本的swiper的js、css文件即使手动滑动了轮播图,过一会儿也还会自动播放
以下为额外增加的js代码

<script>
        var swiper = new Swiper(".mySwiper", {
          //小圆点
            pagination: {
              el: ".swiper-pagination",
            },
            //自动播放
            autoplay: {
            delay: 1000,//1秒切换一次
          },
          //键盘点击轮播图
          keyboard: {
            enabled: true,
            onlyInViewport: true,
          }
          });
  </script>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/533017.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

智能时代中的工业应用中前所未有的灵活桥接和I/O扩展功能解决方案MachXO2系列LCMXO2-1200HC-4TG100I FPGA可编程逻辑IC

lattice莱迪斯 MachXO2系列LCMXO2-1200HC-4TG100I超低密度FPGA现场可编程门阵列&#xff0c;适用于低成本的复杂系统控制和视频接口设计开发&#xff0c;满足了通信、计算、工业、消费电子和医疗市场所需的系统控制和接口应用。 瞬时启动&#xff0c;迅速实现控制——启动时间…

ORCAL SQLPLUS上机6-1

SQL> declare2 v_num number:9;3 begin4 v_num:v_num1;5 dbms_output.put_line(v_num);6 end;7 / --定义记录类型&#xff0c;类似结构体&#xff0c;用select...into --定义记录类型&#xff0c;类似结构体&#xff0c;用select...into SQL> declaretype employe…

OVITO-2.9版本

关注 M r . m a t e r i a l , \color{Violet} \rm Mr.material\ , Mr.material , 更 \color{red}{更} 更 多 \color{blue}{多} 多 精 \color{orange}{精} 精 彩 \color{green}{彩} 彩&#xff01; 主要专栏内容包括&#xff1a; †《LAMMPS小技巧》&#xff1a; ‾ \textbf…

蓝桥杯刷题 二分-[2145]求阶乘(C++)

问题描述 满足 N! 的末尾恰好有 K 个 0 的最小的 N 是多少? 如果这样的 N 不存在输出 −1。 输入格式 一个整数 K。 输出格式 一个整数代表答案。 样例输入 2 样例输出 10 评测用例规模与约定 对于 30% 的数据&#xff0c;1 ≤ K ≤ 10的6次方 对于 100% 的数据&…

云手机解决海外社媒运营的诸多挑战

随着海外社交媒体运营的兴起&#xff0c;如何有效管理多个账户成为了一项挑战。云手机作为一种新兴的解决方案&#xff0c;为海外社媒运营带来了前所未有的便利。 云手机的基本原理是基于云计算和虚拟化技术&#xff0c;允许用户在物理手机之外创建和使用多个虚拟手机。这种创新…

嵌入式学习52-ARM1

知识零散&#xff1a; 1.flash&#xff1a; nor flash 可被寻地址 …

SOCKS代理概述

在网络技术的广阔领域中&#x1f310;&#xff0c;SOCKS代理是一个核心组件&#xff0c;它在提升在线隐私保护&#x1f6e1;️、实现匿名通信&#x1f3ad;以及突破网络访问限制&#x1f6ab;方面发挥着至关重要的作用。本文旨在深入探讨SOCKS代理的基础&#xff0c;包括其定义…

FPGA - 以太网UDP通信(一)

一&#xff0c;简述以太网 以太网简介 ​以太网是一种计算机局域网技术。IEEE组织的IEEE 802.3标准制定了以太网的技术标准&#xff0c;它规定了包括物理层的连线、电子信号和介质访问层协议的内容。 ​ 以太网类型介绍 以太网是现实世界中最普遍的一种计算机网络。以太网有…

python篇---图片转成视频

python篇—图片转成视频 import cv2 import os# 设置图片文件夹路径和视频输出路径 image_folder /workspace/11 video_name output_video.mp4# 获取图片文件夹中的所有图片文件名&#xff0c;并按顺序排序 images [img for img in os.listdir(image_folder) if img.endswi…

SSH穿透ECS访问内网RDS数据库

处于安全考虑&#xff0c;RDS一般只会允许指定的IP进行访问&#xff0c;而我们开发环境的IP往往是动态的&#xff0c;每次IP变动都需要去修改RDS的白名单&#xff0c;为我们的工作带来很大的不便。 那么如何去解决这个问题&#xff1f; 假如我们有一台ESC服务器&#xff0c;E…

虹科Pico汽车示波器 | 免拆诊断案例 | 2011款东风悦达起亚K5车发动机偶尔起动困难

一、故障现象 一辆2011款东风悦达起亚K5车&#xff0c;搭载G4KD发动机&#xff0c;累计行驶里程约为24.5万km。车主反映&#xff0c;第1次起动发动机时偶尔无法起动着机&#xff0c;第2次能够正常起动着机&#xff0c;但发动机故障灯异常点亮。为此在其他维修厂维修过&#xf…

java Web课程管理系统用eclipse定制开发mysql数据库BS模式java编程jdbc

一、源码特点 JSP 课程管理系统是一套完善的web设计系统&#xff0c;对理解JSP java 编程开发语言有帮助&#xff0c;系统具有完整的源代码和数据库&#xff0c;系统主要采用B/S模式开发。开发环境为TOMCAT7.0,eclipse开发&#xff0c;数据库为Mysql5.0&#xff0c;使用ja…

【PDF.js】PDF文件预览

【PDF.js】PDF文件预览 一、PDF.js二、PDF.js 下载1、下载PDF.js2、在项目中引入3、屏蔽跨域错误 三、项目中使用四、说明五、实现效果 使用PDFJS实现pdf文件的预览&#xff0c;支持预览指定页、关键词搜索、缩略图、页面尺寸调整等等。 一、PDF.js 官方地址 文档地址 二、PD…

SpringCloudAlibaba-整合sleuth和zipkin(六)

目录地址&#xff1a; SpringCloudAlibaba整合-CSDN博客 一、整合sleuth 1.引入依赖 在需要追踪的微服务中引入依赖&#xff0c;user、order、product <dependency><groupId>org.springframework.cloud</groupId><artifactId>spring-cloud-starter…

spring boot 集成 flyway依赖 做数据库迁移,让部署没烦恼

flyway 是一个敏捷工具&#xff0c;用于数据库的移植。采用 Java 开发&#xff0c;支持所有兼容 JDBC 的数据库。 主要用于在你的应用版本不断升级的同时&#xff0c;升级你的数据库结构和里面的数据。 还是直接上代码 第一步&#xff1a; <!-- Flyway 数据库迁移 依赖 他…

LeetCode第22题:生成括号【22/1000 python 递归|动态规划】

作者介绍&#xff1a;10年大厂数据\经营分析经验&#xff0c;现任大厂数据部门负责人。 会一些的技术&#xff1a;数据分析、算法、SQL、大数据相关、python 欢迎加入社区&#xff1a;码上找工作http://t.csdnimg.cn/Q59WX作者专栏每日更新&#xff1a; LeetCode解锁1000题: 打…

【I/O】基于事件驱动的 I/O 模型---Reactor

Reactor 模型 BIO 到 I/O 多路复用 为每个连接都创建一个线程 假设我们现在有一个服务器&#xff0c;想要对接多个客户端&#xff0c;那么最简单的方法就是服务端为每个连接都创建一个线程&#xff0c;处理完业务逻辑后&#xff0c;随着连接关闭线程也要销毁&#xff0c;但是…

Meta的新AI深度伪造策略:增加标签,减少下架

每周跟踪AI热点新闻动向和震撼发展 想要探索生成式人工智能的前沿进展吗&#xff1f;订阅我们的简报&#xff0c;深入解析最新的技术突破、实际应用案例和未来的趋势。与全球数同行一同&#xff0c;从行业内部的深度分析和实用指南中受益。不要错过这个机会&#xff0c;成为AI领…

【MYSQL锁】透彻地理解MYSQL锁

&#x1f525;作者主页&#xff1a;小林同学的学习笔录 &#x1f525;mysql专栏&#xff1a;小林同学的专栏 目录 1.锁 1.1 概述 1.2 全局锁 1.2.1 语法 1.2.1.1 加全局锁 1.2.1.2 数据备份 1.2.1.3 释放锁 1.2.1.4 特点 1.2.1.5 演示 1.3 表级锁 1.3.1 介绍 …

spring-cloud微服务openfeign

Spring Cloud openfeign对Feign进行了增强&#xff0c;使其支持Spring MVC注解&#xff0c;另外还整合了Ribbon和Nacos&#xff0c;从而使得Feign的使用更加方便 优势&#xff0c;openfeign可以做到使用HTTP请求远程服务时就像洞用本地方法一样的体验&#xff0c;开发者完全感…