Vue.js前端web练习范例:随鼠标移动的小球
技术选型:运用html、css、script、及vue组件
开发需求:编写在指定容器区域内随鼠标移动的小球，当鼠标超出容器，小球保持在边界位置不动
程序设计：
1、创建440px*440px的容器；创建30px半径的小球；
2、记录小球在面板中的位置x坐标、y坐标，其中坐标为动态变化，通过相对位置展示，为left和top；
3、创建方法，监听鼠标事件；获取鼠标所在位置x坐标，y坐标；控制小球在容器内，判断上、下，左、右，不超出边界；
实现代码如下:
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>待办任务列表</title><script src="vue.global.js"> </script><style>body {margin: 0;padding: 0;}.container {margin: 0;padding: 0;position: absolute;width: 440px;height: 440px;background-color: blanchedalmond;display: inline;}.ball {position: absolute;width: 60px;height: 60px;left: 100px;top: 100px;background-color: red;border-radius: 30px;z-index: 100;}</style>
</head><body><div id="Application"><div class="container" @mousemove.stop="move"><div class="ball" :style="{left: offsetX + 'px', top : offsetY +'px'}"></div></div></div><script>const App = {data() {return {offsetX: 0,offsetY: 0}},methods: {move(event) {if (event.clientX + 30 > 440) {this.offsetX = 440 - 60} else if (event.clientX - 30 < 0) {this.offsetX = 0} else {this.offsetX = event.clientX - 30}if (event.clientY + 30 > 440) {this.offsetY = 440 - 60} else if (event.clientY - 30 < 0) {this.offsetY = 0} else {this.offsetY = event.clientY - 30}}}}Vue.createApp(App).mount("#Application")</script>
</body>创作不易，点击关注不迷路~~~
相关文章：
Vue.js前端web练习范例:随鼠标移动的小球
技术选型:运用html、css、script、及vue组件 开发需求:编写在指定容器区域内随鼠标移动的小球，当鼠标超出容器，小球保持在边界位置不动 程序设计： 1、创建440px*440px的容器；创建30px半径的小球； 2、记录小球在面板中…...
计算机网络----基本概念
基本概念 在这一章从整体上介绍计算机网络的概况, 为后续的学习搭建起整体的框架; 介绍计算机网络中的基础术语和概念; 什么是因特网 『 因特网 』是一个世界范围内互联了数以亿计的计算设备的计算机网络; 因特网具体构成 因特网互联了数以亿计的计算设备, 这些设备被称为…...
创建可直接用 root 用户 ssh 登陆的 Docker 镜像
有时候我们在 Mac OS X 或 Windows 平台下需要开发以 Linux 为运行时的应用，IDE 或可直接使用 Docker 容器，或 SSH 远程连接。本地命令行下操作虽然可以用 docker exec 连接正在运行的容器，但 IDE 远程连接的话 SSH 总是一种较为通用的连接方…...
Linux 查看内核日志的方法
文章目录 1. dmesg 命令一. 介绍内核环形缓冲区的特点 二. 主要功能三. dmesg 使用 2. 查看kmsg文件/dev/kmsg 的用途使用 /dev/kmsg与 dmesg 的关系 3. 内核日志消息的打印行为 1. dmesg 命令 一. 介绍 dmesg（display message 或 display driver message 的缩写&…...
详解登录MySQL时出现SSL connection error: unknown error number错误
目录 登录MySQL时出错SSL connection error: unknown error number 出错原因 使用MySQL自带的工具登录MySQL 登陆之后，使用如下命令进行查看 解决方法 找到MySQL8安装目录下的my.ini配置文件 记事本打开my.ini文件，然后按下图所示添加配置 此时再…...
DRNN 神经网络的Jacobian 信息辨识
DRNN 神经网络的 Jacobian 信息辨识 1. 基本原理 Jacobian 矩阵用于描述多输入多输出系统中输入和输出之间的偏导关系，其形式为： 对于 DRNN（Dynamic Recurrent Neural Network），其动态特性使得 y(t)\mathbf{y}(t)y(t…...
麒麟系统x86安装达梦数据库
一、安装准备前工作 操作系统：银河麒麟V10，CPU： x86_64 架构 下载地址，麒麟官网：https://www.kylinos.cn/ 数据库：dm8_20220915_x86_kylin10_64 下载地址，达梦数据库官网：https://…...
uniapp定义new plus.nativeObj.View实现APP端全局弹窗
为什么要用new plus.nativeObj.View在APP端实现弹窗？因为uni.showModal在APP端太难看了。 AppPopupView弹窗函数参数定义 参数一:弹窗信息(所有属性可不填，会有默认值) 1.title:"", //标题 2.content:"", //内容 3.confirmBoxCo…...
git branch -d 删除分支
Git进行版本控制时，删除分支是常见的操作。特别是当特定的功能开发完成或者分支不再需要时，删除分支可以帮助保持仓库的整洁。删除本地分支和删除远端分支是两个独立的操作。如果需要同时删除本地和远端的分支，需要分别执行以下两个命令。 一…...
kafka生产者和消费者命令的使用
kafka-console-producer.sh 生产数据 # 发送信息 指定topic即可 kafka-console-producer.sh \ --bootstrap-server bigdata01:9092 \ --topic topicA # 主题# 进程 29124 ConsoleProducer kafka-console-consumer.sh 消费数据 # 消费数据 kafka-console-consumer.sh \ --boo…...
MyBatis框架介绍、部署及使用
一、MyBatis介绍 1.1 框架概念 **框架：**就是软件的半成品，完成了软件开发过程中的通用操作，开发者只需很少或者不用进行加工，就能 实现特定的功能。从而简化开发人员在开发过程中的步骤，提高开发效率。 1.2 常用框架…...
MySQL INSERT CRTATE DELETE DORP UPDATE WHERE 的用法
MySQL INSERT CRTATE DELETE DORP UPDATE WHERE 的用法 -- 创建数据库 CREATE DATABASE example_db;-- 使用数据库 USE example_db;-- 创建表 CREATE TABLE employees (id INT AUTO_INCREMENT PRIMARY KEY,name VARCHAR(100),position VARCHAR(50),salary DECIMAL(10, 2) );…...
《安富莱嵌入式周报》第346期：开源2GHz带宽，12bit分辨率，3.2Gsps采样率示波，开源固件安全分析器, 开源口袋电源，开源健康测量，FreeCAD
周报汇总地址：嵌入式周报 - uCOS & uCGUI & emWin & embOS & TouchGFX & ThreadX - 硬汉嵌入式论坛 - Powered by Discuz! 视频： https://www.bilibili.com/video/BV1TYBhYKECK/ 《安富莱嵌入式周报》第346期：开源2GHz带…...
Spring ApplicationListener监听
【JavaWeb】Spring ApplicationListener-CSDN博客 ApplicationEvent以及Listener是Spring为我们提供的一个事件监听、订阅的实现，内部实现原理是观察者设计模式，设计初衷也是为了系统业务逻辑之间的解耦，提高可扩展性以及可维护性。事件发布…...
蓝桥杯练习题
目录 1.劲舞团 2.数字诗意 3.封闭图形个数 4.回文数组 欢迎 1.劲舞团 0劲舞团 - 蓝桥云课 #include <iostream> using namespace std; int main() {int num1,M0;long long c[1000000];int cnt0;string a,b ;while(cin>>a>>b>>c[cnt])//系统自动输入…...
【JAVA】Java高级：Java中的常用设计模式——设计模式的基本思想与应用场景
在软件开发中，设计模式是一种被反复使用的解决特定问题的最佳实践。它们提供了一种标准化的方式来解决常见的设计问题，使得代码更具可读性、可维护性和可扩展性。特别是在Java开发中，设计模式的使用可以极大地提高代码的质量和开发效率。 设…...
QT 跨平台实现 SSDP通信 支持多网卡
一.多网卡场景 在做SSDP通信的时候，客户端发出M-search命令后， 主机没有捕捉到SSDP的消息，你可以查看下，是不是局域网下，既打开了wifi，又连接了本地网络，mac os下很容易出现这种场景。此时，我们发送消息时，需要遍历所有网卡并发送M-search命令。 二.QT相关接口介绍 1…...
疑难Tips：NextCloud域名访问登录时卡住，显示违反内容安全策略
[ 知识是人生的灯塔，只有不断学习，才能照亮前行的道路 ] 1使用域名访问Nextcloud用户登录时卡住，显示违反内容安全策略 我使用官方Docker镜像来部署NextCloud 28.0.5，并通过Openresty反向代理Nextcloud，但是在安装后无法稳定工作，每次登录后，页面会卡死在登录界面，无法…...
区块链：非对称加密
在区块链技术中，非对称加密是一项核心技术，用于保障数据的安全性和用户的隐私。它通过公钥和私钥的配合，实现了信息加密、解密、身份验证和数字签名等功能。 1. 非对称加密的基本原理 非对称加密使用两个密钥： 公钥：…...
量子安全与经典密码学：一些现实方面的讨论
量子安全与经典密码学 背景：量子安全与经典密码学量子计算对传统密码学的威胁 安全性分析经典密码学的数学复杂性假设**量子密码学的物理不可克隆性假设** **性能与实现难度**后量子算法在经典计算机上的运行效率**量子通信设备的技术要求与成本** **可扩展性与适用…...
WordCloud参数的用法：
-------------词云图集合------------- 用WordcloudPyQt5写个词云图生成器1.0 WordCloud去掉停用词（fit_wordsgenerate）的2种用法 通过词频来绘制词云图（jiebaWordCloud） Python教程95：去掉停用词词频统计jieba.toke…...
数据库（总结自小林coding）|索引失效的场景、慢查询、原因及如何优化？undo log、redo log、binlog 作用、MySQL和Redis的区别
数据库（总结自小林coding）|索引失效的场景、慢查询、原因及如何优化？undo log、redo log、binlog 作用、MySQL和Redis的区别 说一下索引失效的场景？什么是慢查询？原因是什么？可以怎么优化？undo …...
（计算机组成原理）期末复习
第一章 计算机的基本组成：硬件软件（程序）计算机系统 软件有系统软件（系统管理工具），应用软件 计算机硬件：包括主机和外设，主机包括CPU和内存，***CPU由运算器和控制器所组…...
Linux下一次性关闭多个同名进程
要一次性关闭多个同名的 Python 进程，例如： 你可以使用以下几种方法。在执行这些操作之前，请务必确认这些进程确实是你希望终止的，以避免意外关闭其他重要的进程。 方法一：使用 pkill 命令 pkill 是一个用于根据名称…...
Android显示系统（01）- 架构分析
一、前言： Android是基于Linux的，而显示设备的驱动也都是和Linux普通设备一样去管理，也就是说归根结底还是要按照Linux的方式组织数据送给LCD，因此，我们理解Android设计的这一套复杂的显示系统时候，一定要…...
Bean的生命周期详解保姆级教程，结合spring boot和spring.xml两种方式讲解，5/7/10大小阶段详细分析
文章目录 Spring Bean的生命周期一、为什么知道 Bean 的生命周期？二、生命周期大致了解三、详细分析生命周期3.1 ① 初步划分为 5 步：3.1.1 spring 框架中怎么理解3.1.2 spring boot 项目中怎么理解 3.2 ② 细分 5 步为 7 步：3.2.1 spring 框…...
2024年11月26日Github流行趋势
项目名称：v2rayN 项目维护者：2dust yfdyh000 CGQAQ ShiinaRinne Lemonawa 项目介绍：一个支持Xray核心及其他功能的Windows和Linux图形用户界面客户端。 项目star数：70,383 项目fork数：11,602 项目名称：fre…...
分页/列表分页
分页和单列表差不多,只是多加了点数据 一 : 实体类 1. 原生实体类 和 2.vo实体类 vo实体类包含原生实体类的所有字段 再新字段 原生(数据库里的字段) vo(多条件查询字段 ,分页字段) 分页字段 : private Integer pageNum1 //起始页 private Integer pageSize 4 //显示页数…...
微信小程序学习指南从入门到精通
🗽微信小程序学习指南从入门到精通🗽 🔝微信小程序学习指南从入门到精通🔝✍前言✍💻微信小程序学习指南前言💻一、🚀文章列表🚀二、🔯教程文章的好处🔯1. ✅…...
STM32外设应用
STM32系列单片机是由意法半导体（STMicroelectronics）推出的一款基于ARM Cortex-M内核的32位微控制器。STM32以其高性能、低功耗、丰富的外设接口以及灵活的应用场景，广泛应用于嵌入式系统中。STM32的外设功能非常强大，几乎涵盖了大多数常见嵌入式开发所需的硬件接口。本篇文…...
Vue进阶面试题目（一）
Vue 自定义事件中，父组件如何接收子组件传递的多个参数? 在 Vue 中，子组件可以通过 $emit 方法触发自定义事件，并传递参数。父组件可以通过监听这个事件来接收参数。如果子组件需要传递多个参数，可以将这些参数作为数组或对象传…...
人工智能——大语言模型
5. 大语言模型 5.1. 语言模型历史 20世纪90年代以前的语言模型都是基于语法分析这种方法，效果一直不佳。到了20世纪90年代，采用统计学方法分析语言，取得了重大进展。但是在庞大而复杂的语言信息上，基于传统统计的因为计算量巨大…...
每天五分钟机器学习：支持向量机数学基础之超平面分离定理
本文重点 超平面分离定理（Separating Hyperplane Theorem）是数学和机器学习领域中的一个重要概念，特别是在凸集理论和最优化理论中有着广泛的应用。该定理表明，在特定的条件下，两个不相交的凸集总可以用一个超平面进行分离。 定义与表述 超平面分离定理（Separating Hy…...
树链剖分（重链剖分）
树链剖分的核心思想就是将一棵树剖分成一条一条的链 因为树不好处理 但链比较好处理 为了学会它 我们先要学会树上dfs（深度优先搜索） 然后就没了（雾） Because 树链剖分需要用到两个dfs 哦对了 我们还要了解以下的知识点 1.子…...
Spring Boot 开发环境搭建及示例应用
文章目录 1. 准备开发工具安装 JDK安装 IDE安装 Maven 2. 创建 Spring Boot 项目使用 Spring Initializr 创建项目导入项目到 IDE 3. 编写代码主类创建控制器创建实体类创建仓库接口创建服务类创建控制器 4. 配置文件5. 运行应用程序6. 测试应用程序7. 调试与优化8. 部署应用 1…...
网站布局编辑器前端开发：设计要点与关键考量
一、设计说明 （一）功能模块 可视化操作区域 这是用户进行网站布局设计的主要画布。通过拖放各种页面元素（如文本框、图片、按钮、导航栏等）到该区域，用户能够直观地构建网站页面的布局结构。支持对元素的实时缩放、旋…...
网络编程第一课
0voice第一课 https://github.com/0voice 今日学习：网络通信IO 网络通信的核心是通过系统提供的socket套接字实现的。socket和c语言中文件操作的本质类似，在c语言中，通过fopen、fclose、fread、fwrite实现了对文件的操作，socket…...
关于网络安全攻防知识
DNS 劫持 什么是DNS劫持？ DNS劫持又叫域名劫持，（劫持了路由器或域名服务器等），篡改了域名的解析结果，使得指向该域名的IP指向IP，你想访问正经网站结果给你跳到一个不正经的网站，实现…...
途普科技企业知识中台完成华为昇思MindSpore技术认证
近日，北京途普科技有限公司（以下简称“途普科技”）作为华为昇腾大模型方向的应用软件伙伴，核心产品企业知识中台已成功与华为AI框架昇思MindSpore完成相互兼容性认证。这一成就标志着途普科技在AI领域与华为的合作进一步加深&…...
等保测评在云计算方面的应用讲解
等保测评（信息安全等级保护测评）在云计算方面的应用主要聚焦于如何满足等级保护相关要求，并确保云计算平台及其上运行的业务系统的安全性。以下是主要内容的讲解： 1. 云计算中的等保测评概述 等保测评是在我国网络安全等级保护制…...
【PTA】【数据库】【SQL命令】编程题2
数据库SQL命令测试题2 测试题目录 10-1 查询“李琳”老师所授课程的课程名称10-2 查询成绩比所有课程的平均成绩高的学生的学号及成绩10-3 创建带表达式的视图StuView10-4 从视图PerView中查询数据10-5 查询工资高于在“HR”部门工作的所有员工的工资的员工信息10-6 查询选修的…...
flask请求头回显的学习和探究如何进行错误页面污染回显
请求头 首先我们要了解一些flask的请求和响应是利用了什么。 flask的请求和响应主要利用了werkzeug，那么我们就要先了解一下什么是werkzeug，其结构又是什么。 werkzeug是一个基于python开发的一个web工具包，其是flask的核心组件之一。其功能…...
Node.js的url模块与querystring模块
新书速览|Vue.jsNode.js全栈开发实战-CSDN博客 《Vue.jsNode.js全栈开发实战（第2版）（Web前端技术丛书）》(王金柱)【摘要 书评 试读】- 京东图书 (jd.com) 4.3.1 http模块——创建HTTP服务器、客户端 要使用http模块࿰…...
Spring框架使用xml方式配置ThreadPoolTaskExecutor线程池，并且自定义线程工厂
一、自定义线程工厂 自定义线程工厂需要实现java.util.concurrent.ThreadFactory接口，重写newThread方法。 示例代码： package com.xiaobai.thread;import org.apache.log4j.Logger;import java.util.concurrent.ThreadFactory; import java.util.conc…...
自动化的内存管理技术之垃圾回收机制-JavaScript引用数据内存回收机制
垃圾回收机制（Garbage Collection, GC） 是一种自动化的内存管理技术，用于回收程序中不再使用的内存空间，避免内存泄漏。JavaScript（尤其是 V8 引擎）使用了一些经典的垃圾回收算法，如 标记-清除 …...
如何使用MySQL实现多租户架构：设计与实现全解析
项目背景 在现代SaaS（软件即服务）应用中，多租户架构是一种常见的设计模式。多租户架构能够让多个客户（租户）共享同一个应用实例和数据库资源，而不会相互干扰。在实际的业务场景中，采用多租户架…...
Flink学习连载文章8--时间语义
Time的分类 (时间语义) EventTime:事件(数据)时间,是事件/数据真真正正发生时/产生时的时间 IngestionTime:摄入时间,是事件/数据到达流处理系统的时间 ProcessingTime:处理时间,是事件/数据被处理/计算时的系统的时间 EventTime的重要性 假设，你正在去往地下停…...
jvm核心组件介绍
1. 类加载器（ClassLoader）： • 想象它是一个快递员，负责把Java类（.class文件）这个“包裹”从磁盘这个“发货地”送到JVM内部这个“目的地”。类加载器确保每个类只被加载一次，并维护一个类的层级…...
【WEB开发.js】getElementById ：通过元素id属性获取HTML元素
getElementById 是 JavaScript 中常用的一个 DOM 方法，用于通过元素的 id 属性获取文档中对应的 HTML 元素。这个方法返回的是一个包含该元素的引用，如果没有找到指定的元素，则返回 null。 语法： document.getElementById(id);i…...
java基础知识（Math类）
引入：Math 类包含用于执行基本数学运算的方法，如初等指数、对数、平方根 import java.util.Math 1.abs绝对值 int abs Math.abs(-9); 2.pow求幂 double pow Math.pow(2,4); 3.向上取整 double ceil Math.ceil(3.9);//ceil 4 4.向下取整 dou…...