JS中实用的小方法
文章平均质量分 69
Muscle_Mliu
I am a slow walker, but I never walk backwards.
展开
-
select 2级联动和checkbox全选框联动
项目中用到的2个小函数,代码中的搜索是将option的值获取,方便我后面进行传输,checkbox的全选框联动中亮点在于其他复选框的数量不等于当前被选中的数量时,全选框checked属性设置为false,其实真正联动起来。无标题页 #sel1 { margin:8px;border:1px solid #cbd7e0; outline: none; pad原创 2016-08-28 02:48:46 · 5684 阅读 · 0 评论 -
巧用 firstElementChild
firstElementChild:是用于返回DOM对象的第一个子元素。举个小例子了解一下: <div> <p>123</p> <p>456</p> </div> var oDiv=document.getElementsByTagName("div")[0]; cons原创 2018-04-24 14:18:22 · 2441 阅读 · 0 评论 -
fixed固定导航,并左右滑动
大家看平时看网页的时候可以看见很多导航是不受上下滑动条影响的(使用了fixed布局),例如:但是如果用户把页面缩小成窗口后,拖动左右滚轮的话就有可能看不到右边的导航部分,这一点我觉得有点影响用户体验了。目前应该是两种解决方案:1.利用@media来判断页面的宽度,使得头部导航自动变换样式,缩小成一个下拉框按钮;2.利用JS动态改变导航的left值;原创 2016-10-05 22:11:30 · 3512 阅读 · 1 评论 -
canvas 鼠标移动矩形
主要实现功能是自己实现了在canvas下创建一个矩形,鼠标选中矩形框时可以拖动(矩形会变色,而且做了一点边界处理,还需要优化)。这里对于事件的监听和解除监听我选择了用addEventListener(),removeEventListener 。例如:addEventListener("mousemove",moveHandler); removeEve原创 2017-01-05 13:17:13 · 4943 阅读 · 0 评论 -
js中对于数组的一些操作
js中数组是使用频率特别高的一种数组类型,我们在日常工作去肯定少不了与之打交道,这里总结一下对于数组的一些特殊处理,比如数组排序和数组去重; *数组去重 知识点:(哈希表,关联性数组) 我们平时用的数组其实叫做一般性数组,也叫索引性数组,例如:[1,2,3,4]; 其实还有一种数组,叫做关联型数组,也叫做哈希表或者字典,也就...原创 2017-02-10 11:19:14 · 754 阅读 · 0 评论 -
“复合型”select
这里主要是自己实现了一个小小select模块,一共四组数据,全都用一个select模块来实现,每组数据都是独立设置的,当然其实需求更复杂一点,不同的码流类型分辨率不一样,防闪频率不一样会使帧率不一样(这里我默认设置的是50HZ),会有一个状态灯来显示每个码流的开启状态,这些都是目前支持的,后续还需要做的就是要支持不同像素的设备,比如最大200百万,4百万,5百万,6百万的设备,还有当分辨率原创 2017-01-06 16:45:42 · 1247 阅读 · 0 评论 -
canvas实现一个小星空
借鉴网上的canvas粒子教程,自己丰富了它的例程,然后封装了一个粒子对象,可以实现画星星和球,并且可以运动,具体功能可以自己根据需求配置相应的options即可。 ps:个人觉得里面最比较好的一点就是用一个数组去保存每一个实例化的对象,然后通过shift()这个函数去控制画图的数量。 Draw a Circle bod原创 2017-01-12 15:17:29 · 876 阅读 · 0 评论 -
js分页实现,前端实现。
主要是借鉴了网上一个例子,自己重新加了样式,添加了跳转,修改了一些小地方,用于和大家一起分享,前端分页的技巧,表格的数据是我已经写好了,其实大家也可以前端渲染表格然后再分页,都是可以的。 a{ text-decoration: none; } .table2{ border:#C8C8C8 solid; border-widt原创 2017-01-05 18:32:38 · 41046 阅读 · 14 评论 -
自己实现一个select(涉及闭包)
前言: 写这一篇博客是因为在做自己在项目中发现ie中select里面的内容不能用text-algin居中,所以决定自己写一个原生的select,不过在写的过程中发现了很多有趣的问题,遇到了循环闭包中出现的常见错误,然后自己决定写一篇博客来记录一下。先贴代码,如果有兴趣了解思路的可以继续往下看html: 抓图时间间隔:原创 2016-12-24 15:28:56 · 1037 阅读 · 0 评论 -
JS比较数组差异
使用JS简单的比较2个数组的差异,即arr1比arr2多的部分和arr2比arr1多的部分,有利于我们实现数据的动态增加与删除。(这里用比较简单的,默认2个数组中没有重复数据,因为项目中是比较guid,所以唯一)lzjvar arr1 = ["899SSDJH-HJHJH88787278","12121DD11-HJHJS8878","088","444"];var ar原创 2016-08-26 23:05:42 · 6507 阅读 · 0 评论 -
事件代理的实际应用
今天就写一下关于事件的代理的运用,首先由一个例子来揭开个面纱,很简单:导航是我们平时用得很多的一个组件,一般都是用ul/li组成的,然后一般来说我们会为每个li绑定一个click事件,去处理相应的事情。其实我们还可以用另一个方法,把这个click事件绑定到ul上,这样只需要绑定一次,就可以实现绑定多个li的效果了,简约了代码,又提高了效率,确实比较实用。从上面的描述就可以看出,我们把触原创 2017-02-23 17:04:36 · 651 阅读 · 0 评论 -
IE8-execCommand('ClearAuthenticationCache')
由于要做一个注销的功能,用的连接方式只是简单的http的用户认证方式,IE上面 我们只需要用document.execCommand('ClearAuthenticationCache'); 来清除用户认证,然后就会重新跳出一个用户验证框。但是这个方法在IE8上用了没反应,最后结合stackoverflow上的回答和自己的反复试验,基本上解决了这个"问题"。function l原创 2017-01-17 17:25:59 · 1184 阅读 · 0 评论 -
判断<a>标签跳转
ps:别人遇见的面试题,虽然比较小,但是感觉还是比较实用哈~ 题目:当点击页面链接时,验证链接是否在*.taobao.com下,如果不是弹出确认提示 主要考虑两个步骤,一是事件的绑定、处理。另一个是字符串的验证,这里我使用了一个偷懒的做法,因为*.taobao.com应该出现在字符串首部。要考虑http/https和有http:/原创 2017-02-09 16:36:28 · 2696 阅读 · 0 评论 -
检测用户有无操作
需求:当用户没有鼠标或者键盘操作的时候我们会做出相应的“操作”。 参考网上的一个例子,不过这个例子需要自己去修改,不然运行不了。 原理:当进去页面的时候就开启了一个定时器,然后给鼠标键盘的事件绑定了一个清除定时器的再打开另一个定时器的函数,当你鼠标和键盘不操作的时候最后设置的这个定时器就起了作用,去执行N秒后你想做的事情。 下面这个例子只是原创 2017-01-10 16:40:23 · 703 阅读 · 0 评论 -
如何消除网页退回键
键盘上的backspace键(删除键),当焦点在文本框的时候会正常删除,但是当焦点不在文本框的时候就会实现回退的效果,有时候我们希望禁止这个效果,下面就是如何来实现,是在网上找到的,可参考一下。http://stackoverflow.com/questions/1495219/how-can-i-prevent-the-backspace-key-from-navigating-back原创 2016-09-20 23:05:30 · 883 阅读 · 0 评论 -
js动态生成xml数据格式
后来才发现我们只需这样把字符串按xml的形式传递给底层即可. var xml='<Setup>'+ '<ProtocolList>'+ '<Protocol>'+ '<Name> onvif </Name>'+ '<UserName> ad...原创 2017-04-07 10:26:06 · 11544 阅读 · 2 评论