首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往
您找到你想要的搜索结果了吗?
是的
没有找到

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

Spin-Wheel 实现鼠标网页上转圈时记录转动圈数的小程序,每转一圈记录一次,同时要是顺时针方向的。...问题分析与实现 这个小程序的难点在于如何知道鼠标完成了一个转圈的动作,而且人工使用鼠标划圈时也不会是一个标准的圆,通常都是很不规律的。这点上我网上找了找发现浏览器的鼠标手势实现了。...然后通过记录鼠标经过的点与前一个点坐标来判断是在哪个扇区,只要四个扇区都经过了就表示划了一个圆。这样做的话对鼠标轨迹要求不高,只要走的方向对就行了。 ?...因为鼠标在刚开始时只是在某一个点上,只有移动了一段距离后才知道在哪。我们看一下下面的图: ? 这里面我标识了10个点,我们可以发现鼠标经过这10个点说明就是画了一个圈,对吧。...还是以上面那个图为例子: 当P1-P3开始移动后,说明在【右上扇区】,然后判断前一个扇区是否有经过,如果没有经过说明当前扇区可能是开始扇区,然后判断后一个扇区是否有经过,如果没有经过说明确实是首扇区,

1.3K60

HTMLCSS 第一章

+z 撤销上一个操作 ctrl+y 还原上一个操作 alt+f4 关闭当前程序 win+E 打开资源管理器 alt+tab 切换程序 (注意整个过程中 alt是长按不放的) win+D 切换到桌面 (鼠标点击右下角...web标准 网页的结构(后缀名字为.html的文件) 网页的样式(后缀名字为.css的文件) 网页的行为(后缀名字为.js的文件) ### 各司其职: 网页的结构:负责网页的内容整理和分类 网页的样式...换行标签 单标签 作用是换行 字体格式化标签 5. 加粗字体 字体加粗 字体加粗 6....倾斜字体 字体倾斜 字体倾斜 7. 字体贯穿线 字体贯穿 字体贯穿 8....字体下划线 字体下划线 字体下划线 标签语义化 一个需求可以用不同的标签来完成,那么这之间有什么区别呢?一个是标签语义强,起强调作用。

93820

『知识巩固#1』Html、Css基础整理

u、ins 下划线 i、em 倾斜 s、del 删除线 媒体标签 图片标签img 属性名、属性值 alt属性值作为替换文本、src属性作为图片链接、title属性在鼠标悬停时显示 width、..._blank 在新窗口中跳转 保留原网页 _self 在当前窗口中跳转(覆盖原网页) 不打开新的网页窗口 h5 不再支持 div盒子 align: center 的属性 列表标签 ul无序列表...字体 字体大小 font-size 浏览器有默认值 16px 字体粗细 font-weight 取值 关键字: 正常normal 加粗 blod 纯数字: 正常400 加粗 800 字体样式...font-style 字体是否倾斜 正常 normal 倾斜 italic 字体系列 font-family 雅黑、宋体、黑体之类的 windows电脑 默认是微软雅黑 一般网页会提供多个字体,用逗号隔开...,表示按顺序显示,避免出现用户电脑上没有安装字体的情况 常见字体系列 无衬线字体 sans-serif 均匀 无笔锋 一般网页都用这种类型 衬线字体 serif 不均匀 有笔锋 等宽字体 monospace

4K20

Web技术与应用:CSS样式表入门

(3)通过控制不同的类,分别为第一个字母“G”设置为蓝色、加粗、60px字体; 第二个字母“o”设置为红色、加粗、60px字体; 第三个字母“o”设置为黄色、加粗、60px字体; 第四个字母“g”设置为蓝色...、加粗、60px字体。...3、请做出网页效果如下图所示: 要求如下: (1)设置所有文本为微软雅黑、14像素、黑色字体。 (2)“新浪”、“新浪网”为红色字体,“博客首页”为蓝色字体,网址及日期为绿色字体。...当鼠标移到超链接的文字上显示十字型光标(属性值:crosshair)。访问后超链接的格式为颜色:绿色,无下划线。 (4)设置文本“-百度快照-评价”为灰色、下划线的效果。...Ps: 此处出于chrome的安全策略,visited的链接无法取消下划线 4、请做出网页效果如下图所示。 要求如下: (1)设置标题“春天”为16像素、红色、加粗、居中、下划线的效果。

1.3K20

【如果你要学JS⑧】——事件三要素,事件处理程序

1.事件三要素1.事件源:事件被触发的对象2.事件类型:如何触发 什么事件 比如鼠标点击(onclick),鼠标经过亦或是键盘按键3.事件处理程序:通过一个函数赋值的方式完成2.执行事件步骤1.获取事件源...添加事件处理程序 butn.onclick = function () { alert('像素人是一名前端') } 3.常见的鼠标事件...4.操作元素JavaScript的DOM操作可以改变网页内容、结构和样式,我们可以利用DOM操作元素来改变元素里面的内容、属性等。...255); } HTML区域: 点击获取当前时间 00:00:00js...,然后就会显示加粗后的效果 // 当然在实际使用中一般就使用innerHTML element. innerText和element. innerHTML

49410

CSS 基础 之 基础选择器+字体文本相关样式

doctype html> <meta http-equiv="X-UA-Compatible"...4.2 字体粗细 属性名 font-weight 取值 关键字: 正常——>normal 加粗 ——>bold纯数字:100~900的整百数:正常——>400 加粗 ——>700 注意点 不是所有字体都提供了九种粗细...关键字: 正常——>normal 加粗 ——>bold 纯数字:100~900的整百数:正常——>400 加粗 ——>700 注意点 不是所有字体都提供了九种粗细,因此部分取值页面中无变化 实际开发中以...网页开发时,尽量使用系统常见自带字体,保证不同用户浏览网页都可以正确显示 具体字体:微软雅黑、黑体、宋体、楷体等…… sans-serif、serif、monospace等…… 渲染规则: 1....网页开发时,尽量使用系统常见自带字体,保证不同用户浏览网页都可以正确显示 5、文本样式 文本缩进 text-indent 文本水平对齐方式 text-align 文本修饰 text-decoration

2.1K10

前端学习(7)~css学习(一):字体属性和文本属性

) font-family:"宋体"; 是否加粗属性以及上面这三个属性,我们可以连写:(是否加粗、字号 font-size、行高 line-height、字体 font-family) 格式: font...2、字体属性的说明: (1)网页中不是所有字体都能用,因为这个字体要看用户的电脑里面装没装,比如你设置: font-family: "华文彩云"; 上方代码中,如果用户的 Windows 电脑里面没有这个字体...字体加粗属性 .div { font-weight: normal; /*正常*/ font-weight: bold; /*加粗*/ font-weight: 100;...font-weight: 200; font-weight: 900; } 在设置字体是否加粗时,属性值既可以填写normal、bold这样的加粗字体,也可以直接填写 100至900 这样的数字...鼠标的属性 cursor 鼠标的属性cursor有以下几个属性值: auto:默认值。浏览器根据当前情况自动确定鼠标光标类型。 pointer:IE6.0,竖起一只手指的手形光标。

1.8K20

❤️创意网页:HTML5,canvas创作科技感粒子特效(科技感粒子、js鼠标跟随、粒子连线)

科技感粒子特效网页 在本篇技术博客中,我们将学习如何创建一个令人赞叹的科技感粒子特效网页。...这个特效网页将会展示一个动态的、精美的粒子效果,同时会随着鼠标的移动而产生连线效果,增添一份炫酷的科技氛围。我们将使用HTML、CSS和JavaScript来实现这个效果。...根据鼠标的位置更新粒子的运动状态,并绘制粒子之间的连线。 实现动画效果,使粒子和连线随着时间不断更新。 ​...particle.draw(); } drawConnections(); requestAnimationFrame(animate); } // 监听鼠标移动事件...,根据鼠标位置更新粒子运动状态 document.addEventListener("mousemove", (e) => { const mouseX = e.clientX; const

84510

HTMLCSS 第三章

)翻译过来就是层叠样式表 作用:主要作用就是设置网页的文字(大小,颜色,字体,对齐等等)图片和板式布局等等 说的简单点了就是给页面化妆的 基本语法: 选择器 { 属性1: 值1; 属性2: 值2; 属性...,一般就是两种,默认的和加粗的 所以 在实际工作中 用的最多的就是normal(400) bold(700) 设置字体的风格 font-style 设置字体的风格(样式) 取值: normal 默认...属性2:值2;} 调用id 给对应的元素添加属性 id="自定义id" #box { font-size:12px; } 内容 特点:id选择器一般配合后期的JS...伪类选择器 伪类选择器可以理解为选择的元素的一种状态,并不是如之前直接选中元素就完事了 a:link 没有被访问的时候的状态 a:visited 访问之后的状态 a:hover 鼠标移动上去之后的状态...a:active 鼠标按下的状态 伪类选择器在实际工作中,不会写这么多,意义不大,推荐简写的方式完成 a {} a:hover {} 文字的对齐 缩进 下划线 水平对齐 text-align:值;

1.1K30
领券