前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >使用js在网页上记录鼠标划圈的小程序

使用js在网页上记录鼠标划圈的小程序

作者头像
用户1105954
发布于 2018-01-12 10:10:46
发布于 2018-01-12 10:10:46
1.4K0
举报
文章被收录于专栏:mini188mini188

Spin-Wheel

实现鼠标在网页上转圈时记录转动圈数的小程序,每转一圈记录一次,同时要是顺时针方向的。

问题分析与实现

这个小程序的难点在于如何知道鼠标完成了一个转圈的动作,而且人工使用鼠标划圈时也不会是一个标准的圆,通常都是很不规律的。这点上我网上找了找发现浏览器的鼠标手势实现了。

而且我找了一个人实现的手势识别,是通过计算两个点形成的角度来判断,我开始也觉得这种方法不错。但是我在具体实现的时候想到了另一个方法。

我的实现方法:把一个圆分为4个等分,也就是扇区:左上,左下,右上,右下。然后通过记录鼠标经过的点与前一个点坐标来判断是在哪个扇区,只要四个扇区都经过了就表示划了一个圆。这样做的话对鼠标轨迹要求不高,只要走的方向对就行了。

如何计算扇区

那么来看看如何知道是在哪个扇区呢?因为鼠标在刚开始时只是在某一个点上,只有移动了一段距离后才知道在哪。我们看一下下面的图:

这里面我标识了10个点,我们可以发现鼠标在经过这10个点说明就是画了一个圈,对吧。然后我们看这些点有哪些规律?

比如,假如我们鼠标是从P1开始移动的,然后移动到P2,再到P3,可以发现x轴是越来越大的,同时y轴也是越来越大。也就是说我们只要将鼠标移动的轨迹记录下来,然后逐个点进行分析,只要符合上面规律的就可以理解为在【右上扇区】。

同理,我们再看P3->P6,则发现x轴是越来越小,而y轴是越来越大的,说明是【右下扇区】,后面两个扇区以此类推。

然后考虑顺时针问题

上面说了每个扇区的计算方式,但是这个如果不考虑时针方向是不成立的,上面的计算方式必须是顺时针才行。如果是逆时针则要反过来计算,所以一旦鼠标逆时针转到,那么也会计算扇区,只不过计算的扇区就不是自己想要的结果啦。

在此我的解决方法是,在计算了扇区后进行一次检查,如果发现前一个扇区不是连续的就说明时针方向错了,重新开始记录轨迹。还是以上面那个图为例子:

当P1-P3开始移动后,说明在【右上扇区】,然后判断前一个扇区是否有经过,如果没有经过说明当前扇区可能是开始扇区,然后判断后一个扇区是否有经过,如果没有经过说明确实是首扇区,是正常的轨迹。反之则说明鼠标转反了。

其他的扇区以此类推。

最后发一下代码

代码我丢到github上了,https://github.com/mini188/Spin-Wheel

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2017-03-09 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
25个实用的JavaScript开发小技巧
今天,我将与你分享一系列令人惊叹的 JavaScript 技巧,它可以使用你的代码更具可读性、简洁性和专业性。
前端达人
2021/07/16
7960
有个开发者总结这 15 优雅的 JavaScript 个技巧
JavaScript 有很多很酷的特性,大多数初学者和中级开发人员都不知道。今天分享一些,我经常在项目中使用一些技巧。
前端小智@大迁世界
2022/06/15
7330
有个开发者总结这 15 优雅的 JavaScript 个技巧
ES6笔记2
一共有3种状态,pending(进行中)、fulfilled(已成功)和rejected(已失败)
小丞同学
2021/08/16
3550
《你不知道的JavaScript》:值类型坑2
js中只有一种数值类型,即number,包括"整数"和带小数的十进制数。js中其实是没有真正意义上的整数的,这个整数就是没有小数的十进制数。js使用的双精度格式。
前端_AWhile
2019/08/29
5270
ECMAScript6 基础知识点(下)
Symbol 为独一无二的值,当 Symbol 值作为对象的属性名的时候,不能用点运算符获取对应的值,因为用点运算符的话,会导致 JavaScript 把后面的属性名为理解为一个字符串类型,而不是 Symbol 类型
Nian糕
2020/05/18
3690
ECMAScript6 基础知识点(下)
面向 JavaScript 开发人员的 ECMAScript 6 指南(2):ECMAScript 6 中的函数增强
第 2 部分专门介绍将改变您使用 JavaScript 中的函数的方式的语言更新。在这一部分中,我们将介绍函数定义和调用语法,您将进一步了解解构赋值(这一次在函数定义中)。我还将介绍新的箭头函数语法和生成器函数,后者给经典的迭代器和古老的for 循环带来了有趣的转机。
疯狂的技术宅
2019/03/28
7570
你不知道的javaScript笔记(4)
类型: JavaScript 有7种内置类型 空值 (null) 未定义(undefined) 布尔值(boolean) 数字(number) 字符串(string) 对象(object) 符号(symbol) 除对象以外,其他统称为“基本类型” 用typeof 运算符来查看值的类型 typeof undefined  === "undefined";   // true typeof true === "boolean";  // true typeof 42 === "number";  // tru
用户1197315
2018/01/22
6530
猿创征文| ES 6 学习笔记6- Proxy
Proxy ​用于修改某些操作的默认行为,等同于在语言层面做出修改,所以属于一种​“元编程”​(meta programming),即对编程语言进行编程。
破晓之翼
2022/12/02
3520
现在就可以使用的 20 个 JavaScript 技巧和窍门
今天探讨 20 种 JavaScript 技巧和窍门,每种技巧和窍门都有通俗易懂的示例。让我们一起来提升你的 JavaScript 技能吧!
前端小智@大迁世界
2024/02/12
1570
一文快速掌握 es6+新特性及核心语法
接下来我会总结一些工作中常用也比较核心的es6+的语法知识,后面又要慢慢开始工作之旅了,希望在总结自己经验的过程中大家会有所收获~
徐小夕
2019/10/08
9210
一文快速掌握 es6+新特性及核心语法
分享7个实用的 JavaScript 方法技巧
在本文中,我收集了一些关于JavaScript 技巧和窍门,我相信它们可以让你成为更好的 JavaScript 开发人员。没有特别的顺序,这里一共收集整理了7个 JavaScript 技巧!
前端达人
2021/07/16
9030
javascript你必须知道的面试题
从上面的输出结果可知,typeof bar === "object" 并不能准确判断 bar 就是一个 Object。可以通过 Object.prototype.toString.call(bar) === "[object Object]" 来避免这种弊端:
javascript艺术
2021/05/28
7210
javascript你必须知道的面试题
JavaScript类型、值和原生函数大揭秘, 前端开发者必看!
沉浸式趣谈
2024/03/13
1120
JavaScript类型、值和原生函数大揭秘, 前端开发者必看!
《现代Javascript高级教程》深入理解Proxy
在现代JavaScript中,Proxy是一种非常有用的特性,它允许我们在许多常规操作中插入自定义行为。然而,由于其深度和复杂性,很多开发者可能会对如何使用它或它的工作原理感到困惑。在本篇文章中,我们将详细讨论JavaScript Proxy,并通过代码示例演示其使用。
linwu
2023/07/27
4060
详解JavaScript的Proxy对象
访问不存在的属性,设置默认值返回而不返回 undefined ,get handler 有其具体语法规则,看这里!
Learn-anything.cn
2021/12/23
1.1K0
送你58道JavaScript面试题(上)
之前翻译过前阵子 github很火的 javascript-questions:送你43道JavaScript面试题
ConardLi
2019/08/21
7950
送你58道JavaScript面试题(上)
重读 ES6 标准入门(第3版)
仅将自己的理解做整理、归类并结合实际遇到的问题做记录,更推荐阅读 ECMAScript 6 入门。
掘金安东尼
2024/01/28
1650
30个Javascript知识点总结,总有你不会的!
最近重温了一遍红宝书,发现一些比较好玩的写法,很多东西日常都在用,但是发现还会有不一样的写法,结合一些日常工作中使用的方法,为大家总结一篇日常经常使用可能还不知道的点,希望对你能有所帮助:
Snine
2023/01/07
3720
分享 20 个提升效率的 JavaScript 缩写小技巧
JavaScript中有很多速记技巧,可以缩短代码长度,减少冗余,提高代码的可读性和可维护性。本文将介绍20个提高效率的JS缩写技巧,帮助你告别写垃圾的生活,轻松写出优雅的代码!
前端达人
2023/10/25
3800
分享 20 个提升效率的 JavaScript 缩写小技巧
「建议收藏」送你一份精心总结的3万字ES6实用指南(上)
写本篇文章目的是为了夯实基础,基于阮一峰老师的著作 ECMAScript 6 入门 以及 tc39-finished-proposals 这两个知识线路总结提炼出来的重点和要点,涉及到从 ES2015 到 ES2021 的几乎所有知识,基本上都是按照一个知识点配上一段代码的形式来展示,所以篇幅较长,也正是因为篇幅过长,所以就没把 Stage 2 和 Stage 3 阶段的提案写到这里,后续 ES2021 更新了我再同步更新。
用户4456933
2021/06/01
8690
「建议收藏」送你一份精心总结的3万字ES6实用指南(上)
推荐阅读
相关推荐
25个实用的JavaScript开发小技巧
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档