![](https://img-blog.csdnimg.cn/20201014180756928.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
JavaScript
Cathy _Mmm
这个作者很懒,什么都没留下…
展开
-
JS进阶:贪吃蛇游戏
对于贪吃蛇由食物,蛇,地图,游戏对象这个部分组成 地图是最简单的,看个人如何设计它的样式与属性 食物对象,设计样式以及位置,对于位置要做到位置随机,且在蛇头吃掉食物后食物会消失,出现在另一随机位置,代码如下: (function () { // 食物 var position = 'absolute'; //记录上一次创建的食物 var elements = []; function.原创 2020-10-08 21:25:59 · 303 阅读 · 0 评论 -
JS:模态框拖拽
要实现模态框的拖拽 1.首先鼠标的拖拽时先按下鼠标且移动的时候才能实现拖拽 2.获取鼠标按下时的下的坐标减去距离边框的距离为x,y 3.获取鼠标移动时的x1,y1坐标 4.用x1-x,y1-y可以知道模态框left,top 代码如下: <body> <div class="login"> <div class="model"> <p>登录会员</p> <span>原创 2020-10-04 22:07:58 · 415 阅读 · 0 评论 -
JS:轮播图
首先对于轮播图要实现的功能,当点进页面时,轮播图会自动轮播,当鼠标进入轮播图时,轮播图会停止轮播此时的轮播图上的向左向右翻的的小标签会出现且页面的转换点也会出现。 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"原创 2020-10-02 15:25:22 · 105 阅读 · 0 评论 -
JS特效:两侧广告跟随
1.首先分析一下,两侧广告跟随,就是在鼠标向下滚动时,左右两幅图也跟着向下滚动相等的距离 2.可以知道假设鼠标向下滚动了100px的话,那么两个图片也是向下滚动了100px,他的位置就是100加上图片距离父标签的距离 3.现在还要实现一个图片的缓慢移动,就是设置一个计时器,分步骤将图片一步一步的走到最终的位置 4.用当前屏幕被卷去的长度在加上距离上屏幕的高度就是图片应该到达的位置y,此时用y减去当前图片距离顶部的距离,就是图片到达y的距离sum。 5.要实现缓慢移动的话可以将sum/10,图片一点一点的移动原创 2020-10-01 14:48:16 · 1396 阅读 · 0 评论 -
JS:红绿灯
此问题有多种写法,但此处用原创 2020-09-26 18:28:02 · 612 阅读 · 0 评论 -
JS:定时跳跃
在网页中,经常出现,支付成功或者是提交成功后,会出现跳转页面,显示还剩下多少秒,到达零秒时会跳转到别的页面,如下图所示。 1. 首先写两个链接,一个是用来实现网页的倒计时效果,另一个是用来实现点击直接跳转 2. 再来写另一个网页作为跳转页面(如果是用来访问其他网页也可直接加上网页名称) 3. 直接跳转的这个链接是一个点击事件. 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta chars原创 2020-09-23 00:11:03 · 227 阅读 · 0 评论 -
JS:倒计时效果
在做倒计时前,先说一个方法setInterval(),这个方法可以重复调用一个函数,所以用这个方法可以实现倒计时的效果 1.要做倒计时,首先是要获取当前时间,要知道最终时间是什么时候才可以倒计时 2.用最终时间减去当前时间,可以知道还剩下多少时间到达目标时间 3.用数学方法就可以得知倒计时的时分秒(具体看代码) 4.要注意的是,因为setInterval()是在一秒后才会触发,所以一开始的时间并不是倒计时时间,所以可以将setInterval()这个方法先调用一次. 实现效果如下 代码如下 <!D原创 2020-09-10 22:44:36 · 661 阅读 · 0 评论 -
JS:密码框效果
在输入密码时,将密码的长度设置为6-16,且在密码长度出现小于6或是大于16时,会出现提示,效果如下图 1. 此事件为失去焦点事件,当鼠标离开密码框且点击旁边就会触发事件 2. 输入密码会出现提示,事件发生与密码的长度有关 3. 根据长度再来判断该提示的消息与效果. 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta na原创 2020-09-08 16:18:23 · 2291 阅读 · 0 评论 -
JS:dom基本操作与用法
元素的获取 1. document.getElementById().根据id获取元素 2. document.getElementByTagName().根据标签名获取元素 3. document.getElementByName().根据name获取元素 4. document.querySelector().用于返回指定选择器的第一个元素 5. documen.querySelectorAll().用于返回指定选择器的所有元素 6. document.getElementByClassNa原创 2020-09-06 17:45:27 · 246 阅读 · 0 评论 -
JS中实现删除广告
关闭广告 在网页中经常会出现广告,如下图1,点击×就可以实现将广告给删除,如图2 此问题有多种解法,此处将在JS中实现此操作 1. 删除操作在×这个图片上实现的,所以在×这个地方安插点击事件 2. 当点击×之后当前的广告就会消失,则广告这个盒子的display为none,代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name原创 2020-09-06 14:29:14 · 3487 阅读 · 1 评论