js经典案例思路

发送短信后的3s禁用按钮(5s中后跳转也是一样的,使用location.href)
1.使用定时器,参数为1000,设置时间为3秒
2.在定时器里面,如果时间等于0,那么按钮disabled等于false,否则的话,时间减一

模拟京东按键输入
1.对输入框添加keyup监听事件,如果输入的值不为空,就显示上面的条条,如果不为空,就隐藏条条。
2.如果失去焦点,也需要隐藏条条

跟随鼠标的天使
1.获取pagex和pagey的值
2.添加document的mousemove,把上面获取的值给图片的style.lfet和style.top,就可以了

事件委托,
1.如果在ul里面的li中,要挨个注册的话就会很浪费空间,但是利用冒泡的事件,
2.只需要注册ul,用e.target.style.backgroundcolor相关的语句,就可以使li更改样式了

发布留言案例和表格信息删除
1.添加的话,要添加节点
2.如果有信息,要判断是否为空,然后赋值
3.利用父节点.appendchild(子节点),这样子就可以在父节点的末尾添加
父节点.insertBefore(要添加的点,要添加的位置)

父节点.removechild(要删除的子节点)

新浪下拉菜单
1.给小li循环注册事件
2.添加事件,mouseover和mouseout,前者display:block,后者display:none。

分时问候和百度换肤一样的套路
1.获取时间判断是什么时候,更换img的src属性

仿京东隐藏密码
1.通过点击事件和flag结合,更换图片和input的type属性

淘宝二维码关闭
1.设置点击监听事件,点击后就隐藏图片,通过display:none

循环精灵图
1.获得li,然后移动图片的位置,让其显示

百度换肤另外的一个套路,开关灯案例

  1. className,设置点击事件,然后更换className的值,不同的类里面放不同的图片

仿新浪注册页面
1.注册获得焦点事件
2.长度不对,通过className更改图片,另外更改文字
3.长度对了,也要相应的更改

移动的开发
移动端拖动元素
1.div注册touchstart事件,获取偏移量(就是div盒子和父盒子的距离),和page值
2.注册touchmove事件,获取移动量
3.在touchmove事件里面,移动量和初始偏移量相加,把这个值给div.style.left等

缓动动画
原理:在animate里面写定时器,写一个步长(目标值减去偏移量再除以10),并且把值赋给obj.style.left,如果目标值等于0,就要销毁。
回调函数,把函数当做参数传入另外一个函数中。如果有回调函数就调用,没有的话就不调用了。

淘宝返回顶部
注册scroll事件,注意:pageYoffset的值等于scrollTop的值,当卷去的头部到一定的值的时候,块块就不动了,如果没有到那个值,块块跟着走,当下滑到一定的程度的时候,块块display显示返回顶部的条条,条条写在块块里面

筋斗云导航
给每一个li注册mouseenter,mouseleave事件,把经过每一个小li的位置当做目标值(小li的偏移量),如果鼠标离开,就回到原位置,如果鼠标点击,就不动了,把位置固定

选项卡切换,利用排他思想

猜你喜欢

转载自blog.csdn.net/qq_44073682/article/details/115263114