JavaScript案例
关注
分享
扫一扫
CSU迦叶
Writing code isn't really coding; debugging is.
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
JavaScript 慢慢移动的海绵宝宝
前情提要：Javascript 移动的海绵宝宝这个海绵宝宝是匀速运动、突然停下来的，有点不合理。现实中我们跑步都是速度慢慢减小到0。要实现这个效果，就必须速度逐渐减小，本质上是盒子的步长逐渐减小。step = (targetLocation - nowLocation)/num其中目标位置不变，当前位置却在不断增大，num是一个定值，因此步长会逐渐减小。但是试想一下，如targetLocation和nowLocation都是整数，num也是，step极可能出现小数，这样if(..原创 2021-11-11 11:19:00 · 697 阅读 · 0 评论 -
Javascript 移动的海绵宝宝
效果描述：做一个简单的动画效果，刚刷新页面时，SpongeBob在页面的左上角位置，随着时间推移，他匀速向右移动，直到右侧抵达页面右侧停下来。分析：SpongeBob作为一张图片被存放在<img>里面，<img>又被存放在<div>里面。图片运动的本质：盒子的位移变化只变化一次还不够，因此需要setInterval这个定时器位移，读取时使用offsetLeft属性，赋值时使用style.left属性注意：1. 前者无单位，后者有2. 只原创 2021-11-11 09:47:10 · 2212 阅读 · 0 评论 -
JavaScript实现鼠标拖拽登录框
拖拽的本质是登录框获得光标的偏移来调整自身的偏移。拖拽发生时，光标相对盒子的坐标不会变化，相对于页面的坐标却在变化，二者的差值就是盒子需要的。两个注意点：1. 赋值给盒子的什么属性outer.style.top = e.pageY - y + 'px';outer.style.left = e.pageX - x + 'px';2. 差值是数字型的，需要加上'px'这里面涉及三个鼠标事件，总结来说就是：（1）鼠标按下，获得坐标（2）鼠标移动，盒子移动（调用boxMove(原创 2021-11-10 11:44:04 · 336 阅读 · 0 评论 -
JavaScript 实现鼠标移动时实时获取其相对盒子的偏移
实现思路：1. 获得盒子相对于页面的偏移量 div.offsetTop和div.offsetLeft2. 获得鼠标相对于页面的偏移量 e.pageY和e.pageX3. 前两者相减即可获得鼠标相对于盒子上沿和左侧的偏移4. 使用鼠标移动事件 mousemove实现效果：代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <me.原创 2021-11-10 10:14:50 · 779 阅读 · 0 评论 -
JavaScript 利用location对象实现跨页面传参
需求简述：两个页面login.html和homepage.html，在login页输入用户名，点击登录会跳转到主页，主页拿到login页输入的用户名实现思路：1. 跳转：修改location.html2. 拿参：处理location.search，先去掉?，再根据“=”来分隔键值对，拿到值注意：想要url中加上参数，login页面的form不可少实现效果login.html页面homepage.html页面代码login.html<!DOCTYP.原创 2021-11-09 17:42:19 · 1063 阅读 · 0 评论 -
JavaScript实现 按钮不可过频繁使用
主要用到setInterval和clearInterval方法和一个计时变量。效果代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=d.原创 2021-11-09 14:51:45 · 131 阅读 · 0 评论 -
JavaScript实时更新中国标准时间
用到Date对象和BOM中的setInterval()定时器。效果如下（每隔1s刷新一次）代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=d原创 2021-11-09 14:14:53 · 156 阅读 · 0 评论 -
JavaScript实现智能搜索框
应用场景：1. 搜索框在页面中占据的空间过小，希望无论浏览到什么位置，可以轻易地回到并聚焦搜索框。2. 搜索框里面的文字大小过小，希望能够在上方开辟一块空间放大内容解决思路：1. 对整个页面添加键盘事件keyup类型的侦听器，然后使用e.keyCode属性来获得用户按下的键，如果是s/S，就让搜索框聚焦。2. 对搜索框添加键盘事件keyup类型的侦听器，将搜索框的value赋给放大内容盒子(我用的是<p>标签)的innerText，如果不为空，就将盒子通过style.disp原创 2021-11-09 10:42:58 · 3536 阅读 · 0 评论