当前位置: 首页 > news >正文

【JavaScript】移动色块案例 实现一个可以拖动并且在拖动过程中会自动改变颜色的色块(JS 事件监听器)

移动色块案例

实现一个可以拖动并且在拖动过程中会自动改变颜色的色块。

  • 移动色块:用户可以通过鼠标按住并拖动页面上的红色方块(#blocks)。当用户按下鼠标左键时,色块开始跟随鼠标的移动而移动;当用户释放鼠标左键时,色块停止移动。
  • 显示当前位置:随着色块的移动,其当前的屏幕坐标(相对于浏览器窗口)会被实时更新,并显示在页面底部左侧的位置显示区域(#positionDisplay)中。
  • 自动变色:一旦用户开始拖动色块,系统就会每隔300毫秒随机改变一次色块的颜色。颜色的变化是通过调用 getRandomColor() 函数生成一个随机的颜色值,并使用 updateColor(color) 函数来更新色块的背景颜色和颜色显示区域(#colorDisplay)中的文本。
  • 交互反馈:在拖动过程中,用户的每一次鼠标移动都会触发色块位置的更新,同时如果色块正在被拖动,那么颜色也会持续变化,直到用户释放鼠标左键为止。

练习:JavaScript 事件监听器(如 mousedown, mouseup, mousemove)与 CSS 样式

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><title>移动色块</title><style>#blocks {width: 100px;height: 100px;background-color: #FF0000;border-radius: 2px;position: absolute;cursor: pointer;}#colorDisplay,#positionDisplay {position: absolute;bottom: 0;left: 0;}#positionDisplay {left: 160px;}</style></head><body><span id="colorDisplay">当前颜色: #FF0000 </span><span id="positionDisplay">当前位置: (0, 0) </span><div id="blocks"></div><script>// 获取色块var div = document.getElementById("blocks");// 获取颜色位置显示区域var colorDisplay = document.getElementById("colorDisplay");var positionDisplay = document.getElementById("positionDisplay");var posX, posY, mouseX, mouseY;var dragging = false;// 自动变色定时器变量var colorChangeInterval;// 随机生成颜色function getRandomColor() {var letters = '0123456789ABCDEF';var color = '#';for (var i = 0; i < 6; i++) {color += letters[Math.floor(Math.random() * 16)];}return color;}// 更新颜色并显示function updateColor(color) {div.style.backgroundColor = color;colorDisplay.textContent = '当前颜色: ' + color;}// 更新位置并显示function updatePosition(left, top) {div.style.left = left + 'px';div.style.top = top + 'px';positionDisplay.textContent = '当前位置: (' + left + ', ' + top + ')';}// 改变颜色function colorChange() {updateColor(getRandomColor());}// mousedown 开始拖拽div.addEventListener('mousedown', function (e) {dragging = true;mouseX = e.clientX;mouseY = e.clientY;posX = parseInt(div.style.left) || 0;posY = parseInt(div.style.top) || 0;e.preventDefault(); // 防止文本选中等默认行为// 开始拖拽时启动定时器if (!colorChangeInterval) {colorChangeInterval = setInterval(colorChange, 300);}});// mouseup 停止拖拽document.addEventListener('mouseup', function (e) {dragging = false;// 停止拖拽时清除定时器if (colorChangeInterval) {clearInterval(colorChangeInterval);colorChangeInterval = null;}});// mousemove 更新位置document.addEventListener('mousemove', function (e) {if (dragging) {var dx = e.clientX - mouseX;var dy = e.clientY - mouseY;var newX = posX + dx;var newY = posY + dy;updatePosition(newX, newY);}});</script></body>
</html>

jQuery 版本

<body><span id="colorDisplay">当前颜色: #FF0000 </span><span id="positionDisplay">当前位置: (0, 0) </span><div id="blocks"></div><script>$(document).ready(function() {var $div = $('#blocks');var $colorDisplay = $('#colorDisplay');var $positionDisplay = $('#positionDisplay');var posX, posY, mouseX, mouseY;var dragging = false;// 自动变色定时器变量var colorChangeInterval;function getRandomColor() {var letters = '0123456789ABCDEF';var color = '#';for (var i = 0; i < 6; i++) {color += letters[Math.floor(Math.random() * 16)];}return color;}function updateColor(color) {$div.css('backgroundColor', color);$colorDisplay.text('当前颜色: ' + color);}function updatePosition(left, top) {$div.css({left: left + 'px', top: top + 'px'});$positionDisplay.text('当前位置: (' + left + ', ' + top + ')');}function colorChange() {updateColor(getRandomColor());}$div.on('mousedown', function(e) {dragging = true;mouseX = e.clientX;mouseY = e.clientY;posX = parseInt($div.css('left')) || 0;posY = parseInt($div.css('top')) || 0;e.preventDefault();if (!colorChangeInterval) {colorChangeInterval = setInterval(colorChange, 300);}});$(document).on('mouseup', function(e) {dragging = false;if (colorChangeInterval) {clearInterval(colorChangeInterval);colorChangeInterval = null;}});$(document).on('mousemove', function(e) {if (dragging) {var dx = e.clientX - mouseX;var dy = e.clientY - mouseY;var newX = posX + dx;var newY = posY + dy;updatePosition(newX, newY);}});});</script>
</body>

相关文章:

【JavaScript】移动色块案例 实现一个可以拖动并且在拖动过程中会自动改变颜色的色块(JS 事件监听器)

移动色块案例 实现一个可以拖动并且在拖动过程中会自动改变颜色的色块。 移动色块&#xff1a;用户可以通过鼠标按住并拖动页面上的红色方块&#xff08;#blocks&#xff09;。当用户按下鼠标左键时&#xff0c;色块开始跟随鼠标的移动而移动&#xff1b;当用户释放鼠标左键时…...

[Linux#62][TCP] 首位长度:封装与分用 | 序号:可靠性原理 | 滑动窗口:流量控制

目录 一. 认识TCP协议的报头 1.TCP头部格式 2. TCP协议的特点 二. TCP如何封装与分用 TCP 报文封装与解包 如何封装解包&#xff0c;如何分用 分离有效载荷 隐含问题&#xff1a;TCP 与 UDP 报头的区别 封装和解包的逆向过程 如何分用 TCP 报文 如何通过端口号找到绑…...

【中短文】区分神经网络中 表征特征、潜层特征、低秩 概念

1. 表征特征&#xff08;Representational Feature&#xff09;&#xff1a; 表征特征通常指的是输入数据经过NN处理就得到的中间表示或输出表示。 这些特征由NN经学习过程自动提取&#xff0c;能更好捕捉输入数据的本质属性。 例如&#xff1a;在图像识别任务中&…...

MySQL8.0环境部署+Navicat17激活教程

安装MySQL 下载MySQL MySQL官网下载当前最新版本&#xff0c;当前是8.0.39。 选择No thanks, just start my download等待下载即可。 安装MySQL 下载完成后&#xff0c;双击安装进入安装引导页面。选择Custom自定义安装。 选择MySQL Server 8.0.39 - X64安装。 点击Execute执…...

每日读则推(十)——Elon Musk‘s speech on self-driving at Tesla‘s annual meeting

Elon Musk: You cant solve self-driving unless you have millions of cars on the road. n.自动驾驶 v.限制,约束,强迫,迫使“We are no longer compute-constrained for training. 不再 n/v.估算,计…...

C++新特性——外部模板

1、What C++11标准引入的一种机制,允许在头文件中声明模板,但仅在一个单独的源文件中显式实例化这些模板。这一机制使得编译器只需要在源文件中实例化模板一次,其它源文件引用已经实例化的模板,从而减少编译时间和生成的二进制文件大小。 2、Why 2.1 优化编译时间 模板实…...

字节跳动青训营开始报名了!

关于青训营&#xff1a; 青训营是字节跳动技术团队发起的技术系列培训 &人才选拔项目;面向高校在校生&#xff0c;旨在培养优秀且具有职业竞争力的开发工程师。 本次技术训练营由掘金联合豆包MarsCode 团队主办课程包含前端、后端和 A 方向&#xff0c;在这个飞速发…...

从SQL Server过渡到PostgreSQL:理解模式的差异

前言 随着越来越多的企业转向开源技术&#xff0c;商业数据库管理员和开发者也逐渐面临向PostgreSQL迁移的需求。 虽然SQL Server和PostgreSQL共享许多数据库管理系统&#xff08;RDBMS&#xff09;的基本概念&#xff0c;但它们在处理某些结构上的差异可能会让人感到困惑&…...

刷题 排序算法

912. 排序数组 注意这道题目所有 O(n^2) 复杂度的算法都会超过时间限制&#xff0c;只有 O(nlogn) 的可以通过 快速排序空间复杂度为 O(logn)是由于递归的栈的调用归并排序空间复杂度为 O(n) 是由于需要一个临时数组 (当然也需要栈的调用&#xff0c;但是 O(logn) < O(n) 的…...

【python3】tornado高性能编程

使用多进程充分利用cpu使用异步编程 asyncio import asyncio import time from abc import ABC from concurrent.futures import ProcessPoolExecutor from tornado import web, ioloop, genasync def async_task(name):print(f"start: {name}")st int(time.time()…...

构建高效购物推荐系统:SpringBoot实战

1系统概述 1.1 研究背景 如今互联网高速发展&#xff0c;网络遍布全球&#xff0c;通过互联网发布的消息能快而方便的传播到世界每个角落&#xff0c;并且互联网上能传播的信息也很广&#xff0c;比如文字、图片、声音、视频等。从而&#xff0c;这种种好处使得互联网成了信息传…...

docker tar包安装 docker-26.1.4.tgz

一、docker安装 1.先将docker安装包&#xff08;docker-26.1.4.tgz&#xff09;拷贝到DM系统中。 下载地址 Index of linux/static/stable/x86_64/ 1.先将docker安装包&#xff08;docker-26.1.4.tgz&#xff09;拷贝到DM系统中。 2.解压docker安装包 tar zxf docker-26.1.…...

Github 2024-10-12 Rust开源项目日报 Top10

根据Github Trendings的统计,今日(2024-10-12统计)共有10个项目上榜。根据开发语言中项目的数量,汇总情况如下: 开发语言项目数量Rust项目10JavaScript项目1Svelte项目1TypeScript项目1Rust: 构建可靠高效软件的开源项目 创建周期:5064 天开发语言:Rust协议类型:OtherSta…...

Spring Cloud 微服务架构及其应用:设计、实现与优化

引言 随着互联网技术的不断发展,传统的单体应用架构逐渐暴露出了一些问题,如扩展性差、维护复杂、部署不灵活等。为了解决这些问题,微服务架构应运而生。微服务是一种将应用程序分解为一组小的、自治的服务的架构模式,服务之间通过轻量级的通信协议(如HTTP)进行交互。Sp…...

Rider + xmake DX12 开发环境

Rider xmake DX12 开发环境 背景 如题&#xff0c;想要接近 UE 的开发流程 正文 大的流程就是 xmake 生成 vs 的 sln&#xff0c;用 Rider 进行开发 intellisense&#xff0c;断点调试 加了个脚本手动刷新 sln xmake project -k vsxmake -m "debug;release" -…...

控制台java原生工具打包jar文件

1、进入java源代码所在路径&#xff0c;或者包起始文件的所在路径 2、编译为class文件 我没配全局变量&#xff0c;这里使用jdk的完整路径来调用 3、jar命令进行打包 -cfe后面: svnHook.jar 指定jar包文件名 Request 包名入口类名&#xff0c;如果有包含包的话&#xff0c;应…...

MySQL主从同步

MySQL主从同步 作用 减少单台服务器的压力&#xff0c;防止单点故障 部署 主库 编辑/etc/mysql/mysql.conf.d/mysqld.cnf log_binmysql-bin server-id1 #服务器的id,再主从数据库里不能重复重启MySQL服务器 systemctl restart mysql连接mysql&#xff0c;并创建用于主从…...

ansible 学习之变量

参考文档&#xff1a; http://www.ansible.com.cn/docs/playbooks_variables.html#variables 合法的变量 ansible变量是有数字&#xff0c;字母&#xff0c;下划线组成并且变量始终应该以字母开头。 “foo_port”是个合法的变量名.”foo5”也是. “foo-port”, “foo port”, …...

【知识科普】Markdown语法内容看这一篇就够了

文章目录 1. 标题2. 段落3. 字体4. 分隔线5. 删除线6. 列表7. 区块引用8. 代码11. HTML元素12. 特殊字符13. 数学公式14. 其他高级技巧 Markdown是一种轻量级标记语言&#xff0c;其排版语法简洁&#xff0c;让人们能更多地关注内容本身而非排版。以下是对Markdown语法的详细解…...

什么是智能合约?

什么是智能合约&#xff1f; 智能合约&#xff0c;就是一段写在区块链上的代码&#xff0c;一旦某个事件触发合约中的条款&#xff0c;代码即自动执行。也就是说&#xff0c;满足条件就执行&#xff0c;不需要人为操控、不需要第三方信任。区块链的安全性和不可篡改性&#xf…...

利用最小二乘法找圆心和半径

#include <iostream> #include <vector> #include <cmath> #include <Eigen/Dense> // 需安装Eigen库用于矩阵运算 // 定义点结构 struct Point { double x, y; Point(double x_, double y_) : x(x_), y(y_) {} }; // 最小二乘法求圆心和半径 …...

ffmpeg(四):滤镜命令

FFmpeg 的滤镜命令是用于音视频处理中的强大工具&#xff0c;可以完成剪裁、缩放、加水印、调色、合成、旋转、模糊、叠加字幕等复杂的操作。其核心语法格式一般如下&#xff1a; ffmpeg -i input.mp4 -vf "滤镜参数" output.mp4或者带音频滤镜&#xff1a; ffmpeg…...

Robots.txt 文件

什么是robots.txt&#xff1f; robots.txt 是一个位于网站根目录下的文本文件&#xff08;如&#xff1a;https://example.com/robots.txt&#xff09;&#xff0c;它用于指导网络爬虫&#xff08;如搜索引擎的蜘蛛程序&#xff09;如何抓取该网站的内容。这个文件遵循 Robots…...

让AI看见世界:MCP协议与服务器的工作原理

让AI看见世界&#xff1a;MCP协议与服务器的工作原理 MCP&#xff08;Model Context Protocol&#xff09;是一种创新的通信协议&#xff0c;旨在让大型语言模型能够安全、高效地与外部资源进行交互。在AI技术快速发展的今天&#xff0c;MCP正成为连接AI与现实世界的重要桥梁。…...

Java + Spring Boot + Mybatis 实现批量插入

在 Java 中使用 Spring Boot 和 MyBatis 实现批量插入可以通过以下步骤完成。这里提供两种常用方法&#xff1a;使用 MyBatis 的 <foreach> 标签和批处理模式&#xff08;ExecutorType.BATCH&#xff09;。 方法一&#xff1a;使用 XML 的 <foreach> 标签&#xff…...

保姆级教程:在无网络无显卡的Windows电脑的vscode本地部署deepseek

文章目录 1 前言2 部署流程2.1 准备工作2.2 Ollama2.2.1 使用有网络的电脑下载Ollama2.2.2 安装Ollama&#xff08;有网络的电脑&#xff09;2.2.3 安装Ollama&#xff08;无网络的电脑&#xff09;2.2.4 安装验证2.2.5 修改大模型安装位置2.2.6 下载Deepseek模型 2.3 将deepse…...

springboot整合VUE之在线教育管理系统简介

可以学习到的技能 学会常用技术栈的使用 独立开发项目 学会前端的开发流程 学会后端的开发流程 学会数据库的设计 学会前后端接口调用方式 学会多模块之间的关联 学会数据的处理 适用人群 在校学生&#xff0c;小白用户&#xff0c;想学习知识的 有点基础&#xff0c;想要通过项…...

LINUX 69 FTP 客服管理系统 man 5 /etc/vsftpd/vsftpd.conf

FTP 客服管理系统 实现kefu123登录&#xff0c;不允许匿名访问&#xff0c;kefu只能访问/data/kefu目录&#xff0c;不能查看其他目录 创建账号密码 useradd kefu echo 123|passwd -stdin kefu [rootcode caozx26420]# echo 123|passwd --stdin kefu 更改用户 kefu 的密码…...

AI+无人机如何守护濒危物种?YOLOv8实现95%精准识别

【导读】 野生动物监测在理解和保护生态系统中发挥着至关重要的作用。然而&#xff0c;传统的野生动物观察方法往往耗时耗力、成本高昂且范围有限。无人机的出现为野生动物监测提供了有前景的替代方案&#xff0c;能够实现大范围覆盖并远程采集数据。尽管具备这些优势&#xf…...

Kubernetes 网络模型深度解析:Pod IP 与 Service 的负载均衡机制,Service到底是什么?

Pod IP 的本质与特性 Pod IP 的定位 纯端点地址&#xff1a;Pod IP 是分配给 Pod 网络命名空间的真实 IP 地址&#xff08;如 10.244.1.2&#xff09;无特殊名称&#xff1a;在 Kubernetes 中&#xff0c;它通常被称为 “Pod IP” 或 “容器 IP”生命周期&#xff1a;与 Pod …...