Web实现悬浮球-可点击拖拽禁止区域

news2025/1/24 10:45:56

这次要实现的是这种效果，能够在页面上推拽和点击的，拖拽的话，就跟随鼠标移动，点击的话，就触发新的行为，当然也有指定某些区域不能拖拽，接下来就一起来看看有什么难点吧~

需要监听的鼠标事件

既然是web页面，那肯定要监听的就算鼠标事件

mousedown(MDN: https://developer.mozilla.org/zh-CN/docs/Web/API/Element/mousedown_event)

mousemove(MDN: https://developer.mozilla.org/zh-CN/docs/Web/API/Element/mousemove_event )

mouseup(MDN: https://developer.mozilla.org/zh-CN/docs/Web/API/Element/mouseup_event)

这三个事件应该大家都不陌生mousedown（鼠标按下）,mousemove（鼠标移动）, mouseup（鼠标抬起）

mousedown

window.onload = () => {
  ballDom.addEventListener('mousedown', ballMoveDown)
  ballDom.addEventListener('touchstart', ballMoveDown)
}

window.unload = () => {
  ballDom.removeEventListener('mousedown', ballMoveDown)
  ballDom.removeEventListener('touchstart', ballMoveDown)
}

页面初始化完成就监听这两个事件，touchstart是为了在移动端也能正常，所以也监听。

页面卸载，就取消绑定事件。

接下来就算鼠标按下事件触发，就需要监听鼠标移动和鼠标抬起事件

const ballMoveDown = (event) => {
      window.addEventListener('mousemove', ballMove, false)
      window.addEventListener('mouseup', ballUp, false)
      window.addEventListener('touchmove', ballMove, false)
      window.addEventListener('touchend', ballUp, false)
    }

mouseup

同样，鼠标抬起，需要把这些事件给取消

const ballUp = (event) => {
      // 移除鼠标移动事件
      window.removeEventListener('mousemove', ballMove)
      window.removeEventListener('touchmove', ballMove)
      // 移除鼠标松开事件
      window.removeEventListener('mouseup', ballUp)
      window.removeEventListener('touchend', ballUp)
    }

接下来，最重要的就是鼠标移动

mousemove

由于鼠标移动到哪里，我们需要把悬浮球也移动到相应的位置，所以我这里使用的是transform属性，使用这个属性的好处就是，不会脱离文档流，不影响页面布局，可以优化动画的性能。

然后，就是计算了，（event.touches[0].clientX， event.touches[0].clientY）可以得到鼠标在页面上的坐标，这会是我们的移动距离吗？

这里区分情况，如果你是全屏都是移动区域，那肯定就是啦

如果移动的区域不是全屏，就需要计算了。

所以我们页面初始化的时候，需要得到移动区域的范围，我这里就用上下左右来表示

window.onload = () => {
  // 移动的范围
  containerProfile = {
    bottom: window.innerHeight,
    left: 0,
    right: window.innerWidth,
    top: 0
  }
  
  ballDom.addEventListener('mousedown', ballMoveDown)
  ballDom.addEventListener('touchstart', ballMoveDown)
}

拿到移动的范围，我们就可以开始计算了


const ballDom = document.getElementById('ballBtn')

const ballMove = (event) => {
  const clientX = event.touches && event.touches[0] && event.touches[0].clientX || event.clientX
  const clientY = event.touches && event.touches[0] && event.touches[0].clientY || event.clientY
  
  ballDom.style.transform = `translate3d(${clientX}px, ${clientY}px, 0)`
}

效果如下图：

然后，你会发现，鼠标一直在悬浮球的左上角，而不是居中的位置，这是为什么导致的，以开始鼠标是在元素内部的，然后一移动，就移动到元素左上角了呢？

所以，我们应该在鼠标按下的时候，记录一下鼠标的位置，然后鼠标移动的时候，计算这个距离

这样就能的得到鼠标按下和鼠标移动时，鼠标两个位置之间的距离

const moveXDiff = clientX - mousedownPos.x // 鼠标在x 轴移动的距离
const moveYDiff = clientY - mousedownPos.y // 鼠标在y 轴移动的距离

那这肯定不是移动后，悬浮球的位置，因为这跟距离肯定特别小，还要加上悬浮球未移动前的top和left

按下和鼠标移动的两个位置之间的距离，就算元素需要移动的距离

鼠标按下的时候，需要获取到元素在移动前的位置

const moveXDiff = clientX - mousedownPos.x // 鼠标在x 轴移动的距离
const moveYDiff = clientY - mousedownPos.y // 鼠标在y 轴移动的距离
// 悬浮球的位置
const canMoveX = bindDomProfile.left + moveXDiff
const canMoveY = bindDomProfile.top + moveYDiff

现在就能正常的移动了，这样移动就变得很丝滑了

以为到这里就结束了吗？还不行哦，还需要优化一下

我们之前是获取了鼠标移动的范围的，那么在移动的时候，我们肯定需要限制一下范围，不能超出屏幕了还能移动，对吧~

限制一下，不能超过移动的最大范围

const moveArrangeX = containerProfile.right - bindDomProfile.width // 元素可在x 轴移动的最大值
const moveArrangeY = containerProfile.bottom - bindDomProfile.height // 元素可在y 轴移动的最大值

let canMoveX = Math.max(0, Math.min(bindDomProfile.left + moveXDiff, moveArrangeX))
let canMoveY = Math.max(0, Math.min(bindDomProfile.top + moveYDiff, moveArrangeY))

限制在400*400的区域内

window.onload = () => {
      // 拖拽的范围
      containerProfile = {
        bottom: 400,
        left: 0,
        right: 400,
        top: 0
      }
      
      ballDom.addEventListener('mousedown', ballMoveDown)
      ballDom.addEventListener('touchstart', ballMoveDown)
      // 监听drag 一系列事件 防止元素松开鼠标的时候还可以拖动
      ballDom.addEventListener('dragstart', ballUp)
      ballDom.addEventListener('dragover', ballUp)
      ballDom.addEventListener('drop', ballUp)
      
      ballDom.addEventListener('click', clickBall)
    }

现在移动的最基本功能，已经满足啦，接下来在此基础上，新增其他功能

移动之后触发点击事件

除了悬浮球移动，肯定还是希望它能够执行点击事件，但是你会发现，绑定了点击事件之后，移动也会触发点击

效果如下：


const clickBall = () => {
  ballDom.classList.add('playBall')
  setTimeout(() => {
    ballDom.classList.remove('playBall')
  }, 500)
}

 window.onload = () => {
  // 拖拽的范围
  containerProfile = {
    bottom: 400,
    left: 0,
    right: 400,
    top: 0
  }
  
  ballDom.addEventListener('mousedown', ballMoveDown)
  ballDom.addEventListener('touchstart', ballMoveDown)
  // 监听drag 一系列事件 防止元素松开鼠标的时候还可以拖动
  ballDom.addEventListener('dragstart', ballUp)
  ballDom.addEventListener('dragover', ballUp)
  ballDom.addEventListener('drop', ballUp)
  
  ballDom.addEventListener('click', clickBall)
}

这样肯定就不满意了，也许点击悬浮球，是为了执行点击的逻辑，但是移动，肯定是不能触发点击的

怎么办呢？其实很好解决，只需要加个变量，移动的时候，不触发点击逻辑就可以了

正常情况下是这样：

点击：mousedown -> mouseup -> click

移动：mousedown -> mousemove -> mouseup -> click

let isDragging = false

const ballMoveDown = (event) => {
  isDragging = false
  bindDomProfile = ballDom.getBoundingClientRect()
  mousedownPos.x = event.touches && event.touches[0].clientX || event.clientX
  mousedownPos.y = event.touches && event.touches[0].clientY ||event.clientY

  window.addEventListener('mousemove', ballMove, false)
  window.addEventListener('mouseup', ballUp, false)
  window.addEventListener('touchmove', ballMove, false)
  window.addEventListener('touchend', ballUp, false)
}

const ballMove = (event) => {
  isDragging = true
  const moveArrangeX = containerProfile.right - bindDomProfile.width // 元素可在x 轴移动的最大值
  const moveArrangeY = containerProfile.bottom - bindDomProfile.height // 元素可在y 轴移动的最大值
  const clientX = event.touches && event.touches[0] && event.touches[0].clientX || event.clientX
  const clientY = event.touches && event.touches[0] && event.touches[0].clientY || event.clientY

  const moveXDiff = clientX - mousedownPos.x // 鼠标在x 轴移动的距离
  const moveYDiff = clientY - mousedownPos.y // 鼠标在y 轴移动的距离
  let canMoveX = Math.max(0, Math.min(bindDomProfile.left + moveXDiff, moveArrangeX))
  let canMoveY = Math.max(0, Math.min(bindDomProfile.top + moveYDiff, moveArrangeY))
  ballDom.style.transform = `translate3d(${canMoveX}px, ${canMoveY}px, 0)`
}

const clickBall = () => {
  if (!isDragging) {
    ballDom.classList.add('playBall')
    setTimeout(() => {
      ballDom.classList.remove('playBall')
    }, 500)
  }
}

这样就解决了这个问题，接下来来个难度大点的需求

异常情况下，点击的时候也触发了mousemove事件

这就需要css控制pointer-events

https://developer.mozilla.org/zh-CN/docs/Web/CSS/pointer-events

使用pointer-events来阻止元素成为鼠标事件目标不一定意味着元素上的事件侦听器永远不会触发。如果元素后代明确指定了pointer-events属性并允许其成为鼠标事件的目标，那么指向该元素的任何事件在事件传播过程中都将通过父元素，并以适当的方式触发其上的事件侦听器。当然，位于父元素但不在后代元素上的鼠标活动都不会被父元素和后代元素捕获（鼠标活动将会穿过父元素而指向位于其下面的元素）。

我们希望为 HTML 提供更为精细的控制（而不仅仅是auto和none），以控制元素哪一部分何时会捕获鼠标事件。如果你有独特的想法，请添加至wiki 页面的 Use Cases 部分，以帮助我们如何针对 HTML 扩展pointer-events。

该属性也可用来提高滚动时的帧频。的确，当滚动时，鼠标悬停在某些元素上，则触发其上的 hover 效果，然而这些影响通常不被用户注意，并多半导致滚动出现问题。对body元素应用pointer-events：none，禁用了包括hover在内的鼠标事件，从而提高滚动性能。

const ballMove = (event) => {
  console.log('mousemove')
  isDragging = true
  const moveArrangeX = containerProfile.right - bindDomProfile.width // 元素可在x 轴移动的最大值
  const moveArrangeY = containerProfile.bottom - bindDomProfile.height // 元素可在y 轴移动的最大值
  const clientX = event.touches && event.touches[0] && event.touches[0].clientX || event.clientX
  const clientY = event.touches && event.touches[0] && event.touches[0].clientY || event.clientY

  const moveXDiff = clientX - mousedownPos.x // 鼠标在x 轴移动的距离
  const moveYDiff = clientY - mousedownPos.y // 鼠标在y 轴移动的距离
  let canMoveX = Math.max(0, Math.min(bindDomProfile.left + moveXDiff, moveArrangeX))
  let canMoveY = Math.max(0, Math.min(bindDomProfile.top + moveYDiff, moveArrangeY))
  
  ballDom.style.transform = `translate3d(${canMoveX}px, ${canMoveY}px, 0)`
  ballDom.style.pointerEvents = 'none'
}

const ballUp = (event) => {
  console.log('mouseup')
  // 移除鼠标移动事件
  window.removeEventListener('mousemove', ballMove)
  window.removeEventListener('touchmove', ballMove)
  // 移除鼠标松开事件
  window.removeEventListener('mouseup', ballUp)
  window.removeEventListener('touchend', ballUp)
  ballDom.style.pointerEvents = null
}

加上这个属性之后, 移动就不会触发点击事件了

移动：mousedown -> mousemove -> mouseup

点击：mousedown->mouseup->click

移动范围内，指定区域不能移入

这是什么意思呢？

看图更加容易理解，真很显然，就是在移动的时候要做判断，移入移动的区域位于禁止移入的范围中，那就需要将悬浮球停留在禁止移入的边缘线上。

当然如果鼠标进入到禁止移动的区域中，那应该立刻结束移动事件，也就是手动触发mouseover，因为不能让悬浮球碰壁了，鼠标进入禁止移入的区域，出来时，还能继续移动，对吧

这里，第二个很好解决

// 拿到禁止移动的尺寸
const unMoveContain = unMoveArea.getBoundingClientRect()

const ballMove = (event) => {
  ...
  const forbidViewX = Math.floor(unMoveContain.left) // (forbidViewX, forbidViewY)是禁止区域的左上角
  const forbidViewY = Math.floor(unMoveContain.top)

  const forbidViewWidth = Math.ceil(unMoveContain.width)
  const forbidViewHeight = Math.ceil(unMoveContain.height)
	// 结束移动，只要移动进禁止区域，就结束移动
  if (clientX > forbidViewX && clientX < (forbidViewWidth + forbidViewX) && clientY > forbidViewY && clientY < (forbidViewHight + forbidViewY)) {
    ballUp()
  }
  ...
}

鼠标进入禁止区域的条件，如图：

上图的cx和cy

let cx = forbidViewX
let cy = forbidViewY
let fx = forbidViewX + forbidViewWidth
let fy = forbidViewY + forbidViewHeight

找到条件之后，条件内，需要怎么做呢？

如果鼠标的坐标距离禁止区域的4条边最近的一条边，那悬浮球就会停在这条边上，也就是说，这里可能是x轴坐标不变，也可能是y坐标不变

距离禁止区域的4条边

这需要计算出来

let topLeftY = Math.abs(clientY - forbidViewY) // 当前坐标y轴距离禁止区域上方距离
let bottomLeftY = Math.abs(clientY - (forbidViewHeight + forbidViewY)) // 当前坐标y轴距离禁止区域下方距离
let topRightX = Math.abs(clientX - (forbidViewWidth + forbidViewX)) // 当前坐标x轴距离禁止区域右方距离
let topLeftX = Math.abs(clientX - forbidViewX) // 当前坐标x轴距离禁止区域左方距离

然后需要比较这四条边，哪条边最端，得到鼠标是从哪条边移入禁止区域的

const minVal = Math.min(...[topLeftY, topLeftX, bottomLeftY, topRightX])

得到最短的边之后，接下来就是悬浮球的坐标了

if (topLeftY == minVal) {
  canMoveY = forbidViewY - bindDomProfile.height // 距离禁止区域上方最近，悬浮球y坐标位于禁止区域最上方
} else if (bottomLeftY  === minVal) {
  canMoveY = forbidViewHeight + forbidViewY // 距离禁止区域下方最近，悬浮球y坐标位于禁止区域最下方
} else if (topRightX === minVal) {
  canMoveX = forbidViewWidth + forbidViewX // 距离禁止区域右边最近，悬浮球x坐标位于禁止最右边
} else if (topLeftX  === minVal){ 
  canMoveX = forbidViewX - bindDomProfile.width // 距离禁止区域左边最近，悬浮球x坐标位于禁止最右边
}

这两条边是需要减去悬浮球的宽高的，因为鼠标移入了，鼠标本身就需要在悬浮球里的，那悬浮球就不能一半进入禁止区域

这就是mousemove的全部代码了，看下面

const handleForbidArea = ({canMoveX, canMoveY, clientX, clientY}) => {
  const forbidViewX = Math.floor(unMoveContain.left) // (forbidViewX, forbidViewY)是禁止区域的左上角
  const forbidViewY = Math.floor(unMoveContain.top)

  const forbidViewWidth = Math.ceil(unMoveContain.width)
  const forbidViewHeight = Math.ceil(unMoveContain.height)

  // 结束拖拽，只要拖拽进禁止区域，就结束拖拽
  if (clientX > forbidViewX && clientX < (forbidViewWidth + forbidViewX) && clientY > forbidViewY && clientY < (forbidViewHeight + forbidViewY)) {
    ballUp()
  }
  // 控制悬浮球不能进入禁止区域
  if (clientX > forbidViewX && clientY > forbidViewY && clientY < (forbidViewHeight + forbidViewY) && clientX < (forbidViewWidth + forbidViewX)) {
    let topLeftY = Math.abs(clientY - forbidViewY) // 当前坐标y轴距离禁止区域上方距离
    let bottomLeftY = Math.abs(clientY - (forbidViewHeight + forbidViewY)) // 当前坐标y轴距离禁止区域下方距离
    let topRightX = Math.abs(clientX - (forbidViewWidth + forbidViewX)) // 当前坐标x轴距离禁止区域右方距离
    let topLeftX = Math.abs(clientX - forbidViewX) // 当前坐标x轴距离禁止区域左方距离

    const minVal = Math.min(...[topLeftY, topLeftX, bottomLeftY, topRightX])
    if (topLeftY == minVal) {
      canMoveY = forbidViewY - bindDomProfile.height // 距离禁止区域上方最近，悬浮球y坐标位于禁止区域最上方
    } else if (bottomLeftY  === minVal) {
      canMoveY = forbidViewHeight + forbidViewY // 距离禁止区域下方最近，悬浮球y坐标位于禁止区域最下方
    } else if (topRightX === minVal) {
      canMoveX = forbidViewWidth + forbidViewX // 距离禁止区域右边最近，悬浮球x坐标位于禁止最右边
    } else if (topLeftX  === minVal){ 
      canMoveX = forbidViewX - bindDomProfile.width // 距离禁止区域左边最近，悬浮球x坐标位于禁止最右边
    }
  }
  return {x: canMoveX, y: canMoveY}
}

const ballMove = (event) => {
  isDragging = true
  const moveArrangeX = containerProfile.right - bindDomProfile.width // 元素可在x 轴移动的最大值
  const moveArrangeY = containerProfile.bottom - bindDomProfile.height // 元素可在y 轴移动的最大值
  const clientX = event.touches && event.touches[0] && event.touches[0].clientX || event.clientX
  const clientY = event.touches && event.touches[0] && event.touches[0].clientY || event.clientY

  const moveXDiff = clientX - mousedownPos.x // 鼠标在x 轴移动的距离
  const moveYDiff = clientY - mousedownPos.y // 鼠标在y 轴移动的距离
  let canMoveX = Math.max(0, Math.min(bindDomProfile.left + moveXDiff, moveArrangeX))
  let canMoveY = Math.max(0, Math.min(bindDomProfile.top + moveYDiff, moveArrangeY))
  let { x, y } = handleForbidArea({canMoveX, canMoveY, clientX, clientY})
  
  ballDom.style.transform = `translate3d(${x}px, ${y}px, 0)`
}

最终效果就是这样的：

如果出现松开鼠标，还能拖动的情况，就需要监听drag一系列事件，这个不一定都会出现，因为这只是在鼠标移动的时候，mousemove事件还没有执行完，导致鼠标离开了悬浮球，然后再鼠标抬起，这跟个时候就会产生这个现象。

// 监听drag 一系列事件 防止元素松开鼠标的时候还可以拖动
ballDom.addEventListener('dragstart', ballUp)
ballDom.addEventListener('dragover', ballUp)
ballDom.addEventListener('drop', ballUp)

全部的代码：
jcode

总结

1.处理图像边界问题，最好画图，比较清晰，单纯的想象，容易遗漏

2.JavaScript基础很重要

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

30岁+项目经理和PMO少奋斗10年的职业规划路线

30岁+项目经理和PMO少奋斗10年的职业规划路线

大家好&#xff0c;我是老原。 很多项目经理小白出来工作遇到困惑时又以得过且过的态度拒绝了别人的指导和建议&#xff0c;磨磨蹭蹭的就到了30岁。 大多数人会感到迷茫的原因&#xff0c;是因为对自己要往什么方向发展&#xff1f;做什么样的事情毫无计划和想象。 为什么会…
阅读更多...
goweb入门教程

goweb入门教程

本文是作者自己学习goweb时写的笔记&#xff0c;分享给大家&#xff0c;希望能有些帮助 前言&#xff1a; 关于web&#xff1a;本质 ​ ​ web中最重要的就是浏览器和服务器的request(请求)和response(响应)&#xff1b; ​ 一个请求对应一个响应。 一个请求对应一个响应&…
阅读更多...
从独立求存到登顶市场，荣耀为何能在手机红海翻出新的浪花？

从独立求存到登顶市场，荣耀为何能在手机红海翻出新的浪花？

对企业的价值评估&#xff0c;往往离不开对其所处行业前景的考量。在蓝海赛道布局的企业&#xff0c;往往要比在红海市场突围的企业更容易受到资本重视。 但这并非绝对&#xff0c;若是一家企业能够在饱和的红海市场中&#xff0c;实现新的增长&#xff0c;其蕴涵的成长价值便…
阅读更多...
【LeetCode刷题】-- 78.子集

【LeetCode刷题】-- 78.子集

78.子集 class Solution {public List<List<Integer>> subsets(int[] nums) {List<List<Integer>> ans new ArrayList<>();List<Integer> list new ArrayList<>();dfs(0,nums,ans,list);return ans;}private void dfs(int cur,int…
阅读更多...
maven 常用命令解析

maven 常用命令解析

maven 是什么 Maven 是一个流行的项目管理和构建工具&#xff0c;用于帮助开发人员管理 Java 项目的构建、依赖管理和文档生成等任务。它提供了一种标准化的项目结构和一套规范来管理项目的生命周期。 Maven 的主要功能包括&#xff1a; 项目对象模型&#xff08;Project Obje…
阅读更多...
【AI数字人-论文】Wav2lip论文解读

【AI数字人-论文】Wav2lip论文解读

文章目录 Wav2lip前言Lip-sync Expert DiscriminatorGeneratorvisual quality discriminator生成器总损失函数 论文 Wav2lip 前言 Wav2Lip 是第一个通用说话者的模型&#xff0c;可生成与真实同步视频相匹配的口型同步精度的视频&#xff0c;它的核心架构概括为“通过向训练有…
阅读更多...
服务器之间的conda环境迁移

服务器之间的conda环境迁移

有的时候python环境中可能包含了我们编译好的很多库文件&#xff0c;如果在别的服务器想直接使用环境就会比较困难些。最好的办法就是直接迁移环境。而传统的迁移方法导出“*.yaml”环境配置的这种方法&#xff0c;实际是需要重新安装环境&#xff0c;对于这种安装好的环境是不…
阅读更多...
龙芯loongarch64服务器编译安装maturin

龙芯loongarch64服务器编译安装maturin

前言 maturin 是一个构建和发布基于 Rust 的 Python 包的工具，但是在安装maturin的时候，会出现如下报错：error: cant find Rust compiler 这里记录问题解决过程中遇到的问题： 1、根据错误的提示需要安装Rust Compiler，首先去其官网按照官网给的解决办法提供进行安装 curl…
阅读更多...
flink源码分析之功能组件(四)-slotpool组件II

flink源码分析之功能组件(四)-slotpool组件II

简介 本系列是flink源码分析的第二个系列&#xff0c;上一个《flink源码分析之集群与资源》分析集群与资源&#xff0c;本系列分析功能组件&#xff0c;kubeclient&#xff0c;rpc&#xff0c;心跳&#xff0c;高可用&#xff0c;slotpool&#xff0c;rest&#xff0c;metrics&…
阅读更多...
联想Lenovo购入一套DTX-1800线缆分析仪作为自检

联想Lenovo购入一套DTX-1800线缆分析仪作为自检

福禄克经典6a线缆认证分析仪历经20年&#xff0c;依旧活跃在各个重要场合。线缆厂、布线商、网络工程师的利器&#xff0c;依旧经久不衰。 提供的最新原厂校准过的设备&#xff0c;精度和质量尤为重要。得到了充分的保证。使用起来&#xff0c;放心&#xff0c;可以送第三方计量…
阅读更多...
数据结构-二叉树（2）

数据结构-二叉树（2）

3.4堆的应用 3.4.1 堆排序 堆排序即利用堆的思想来进行排序&#xff0c;总共分为两个步骤&#xff1a; 1. 建堆 1.升序&#xff1a;建大堆&#xff1b; 2.降序&#xff1a;建小堆。 2. 利用堆删除思想来进行排序 这种写法有两个缺点&#xff1a; 1、先有一个堆的数据结构 …
阅读更多...
详解Python中httptools模块的使用

详解Python中httptools模块的使用

httptools 是一个 HTTP 解析器&#xff0c;它首先提供了一个 parse_url 函数&#xff0c;用来解析 URL。这篇文章就来和大家聊聊它的用法吧&#xff0c;感兴趣的可以了解一下 如果你用过 FastAPI 的话&#xff0c;那么你一定知道 uvicorn&#xff0c;它是一个基于 uvloop 和 h…
阅读更多...
Python (十五) 面向对象之多继承问题

Python (十五) 面向对象之多继承问题

程序员的公众号&#xff1a;源1024&#xff0c;获取更多资料&#xff0c;无加密无套路&#xff01; 最近整理了一波电子书籍资料&#xff0c;包含《Effective Java中文版 第2版》《深入JAVA虚拟机》&#xff0c;《重构改善既有代码设计》&#xff0c;《MySQL高性能-第3版》&…
阅读更多...
电子学会C/C++编程等级考试2022年09月（三级）真题解析

电子学会C/C++编程等级考试2022年09月（三级）真题解析

C/C++等级考试（1~8级）全部真题・点这里 第1题：课程冲突 小 A 修了 n 门课程, 第 i 门课程是从第 ai 天一直上到第 bi 天。 定义两门课程的冲突程度为 : 有几天是这两门课程都要上的。 例如 a1=1，b1=3，a2=2，b2=4 时, 这两门课的冲突程度为 2。 现在你需要求的是这 n 门课…
阅读更多...
Verilog 入门（一）（Verilog 简介）

Verilog 入门（一）（Verilog 简介）

文章目录 什么是 Verilog HDL&#xff1f;Verilog 主要能力模块时延数据流描述方式 什么是 Verilog HDL&#xff1f; Verilog HDL是一种硬件描述语言&#xff0c;用于从算法级、门级到开关级的多种抽象设计层次的数字系统建模。被建模的数字系统对象的复杂性可以介于简单的门和…
阅读更多...
Windows 11的新功能不适用于所有人，但对将要使用的人来说非常酷

Windows 11的新功能不适用于所有人，但对将要使用的人来说非常酷

正如一个新的预览版本所示&#xff0c;Windows 11即将为那些使用手写笔的人添加一些智能功能&#xff0c;以及其他改进。 这是预览版22635.2776&#xff08;也称为KB5032292&#xff09;&#xff0c;已推出Beta频道&#xff0c;这是发布预览版之前的最后一个测试方法&#xff…
阅读更多...
Oracle E-Business Suite软件 任意文件上传漏洞（CVE-2022-21587）

Oracle E-Business Suite软件 任意文件上传漏洞（CVE-2022-21587）

0x01 产品简介 Oracle E-Business Suite&#xff08;电子商务套件&#xff09;是美国甲骨文&#xff08;Oracle&#xff09;公司的一套全面集成式的全球业务管理软件。该软件提供了客户关系管理、服务管理、财务管理等功能。 0x02 漏洞概述 Oracle E-Business Suite 的 Oracle…
阅读更多...
创建Asp.net MVC项目Ajax实现视图页面数据与后端Json传值显示

创建Asp.net MVC项目Ajax实现视图页面数据与后端Json传值显示

简述回顾 继上篇文章创建的mvc传值这里说明一下Json传值。在mvc框架中&#xff0c;不可避免地会遇到前台传值到后台&#xff0c;前台接收后台的值的情况&#xff08;前台指view&#xff0c;后台指controller&#xff09;&#xff0c;有时只需要从控制器中返回一个处理的结果&a…
阅读更多...
Lombok工具包的安装和使用

Lombok工具包的安装和使用

目录 一.常用的注解 二.引入依赖的两种方式 1.在maven仓库中引入 2.安装插件EditStarter 三.使用举例 四.原理 Lombok是一个java库&#xff0c;它可以自动插入到编辑器和构建工具中&#xff0c;增强java的性能。不需要再写getter、setter或equals方法&#xff0c;只要有一…
阅读更多...
使用MAT分析内存泄漏（mac）

使用MAT分析内存泄漏（mac）

前言 今天主要简单分享下Eclipse的Memory Analyzer在mac下的使用。 一、Mat&#xff08;简称&#xff09;干什么的&#xff1f; 就是分析java内存泄漏的工具。 二、使用步骤 1.下载 mac版的现在也分芯片&#xff0c;别下错了。我这里是M2芯片的&#xff0c;下载的Arch64的。 …
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023