今天要分享的是运用原生JS滚动鼠标改变元素大小,效果如下: 以下是代码实现,欢迎大家复制粘贴 。 原原生JS...滚动鼠标改变元素大小 #div1 { width: 200px; height: 200px;
原理:浏览器判断是否切换页面主要是判断 用户是否切换 选项卡 tab 1 方法: (1) document.hidden 返回值为true:表示被隐藏,不可见 返回值为false:...表示未被隐藏,可见 (2)document.visibilityState 返回值为 visible:表示是可见状态 返回值为 hidden:表示隐藏状态 检测用户是否切换页面 2...,鼠标离开浏览器!!!')...; } } $(document).mouseleave(function () { alert('警告,鼠标离开浏览器!!!')...; }); $(document).mouseenter(function () { alert('鼠标进入浏览器'); });
push() 在数组尾部添加元素,返回的是更新后数组的长度。...pop() 删除数组的最后一个元素,并返回 shift() 删除数组的第一个元素,并返回 unshift() 在数头尾部添加元素,返回的是更新后数组的长度。...reverse() 降序 sort() 升序 splice(index,howmany,要添加的新数据),返回被删除元素所组成的数组。...---- ---- 不改变原有元素 concat() join() slice()数组元素截取(开始位置,结束为止)
在后端开发中,应交互要求,经常会用到一些改变状态的方法,如收藏与取消收藏、点赞与取消点赞、上架与下架等等,今天给大家分享一个用Koa结合MongoDB封装的改变状态的方法,实现如下: 1.安装处理json...数据格式的中间件 npm install koa-jsonp --save 2.引入处理json数据格式的中间件 const jsonp = require('koa-jsonp'); 3.配置koa-jsonp...中间件 app.use(jsonp()); 4.封装改变状态的路由 router.get('/changeStatus', async (ctx) => { // 获取前台传过来数据(集合名、...){ // 改为0 var json={ [attr]:'0' }; // 如果状态...else{ ctx.body={"message":'更新失败,参数错误',"success":false} } }); 5.封装页面点击事件 // 点击切换状态
接着鼠标拖拽div(1)解决问题,当在拖拽事件所在的页面按下键盘的ctrl+A全选后,再去拖拽div,浏览器会默认去搜索网页中的内容,拖拽功能就会失效,(搜索网页内容是浏览器的默认行为,所以要想不发生这种情况...在ie8及以下版本浏览器中,如果调用了元素的setCapture()方法,那么点击任何事物都会来执行这个元素绑定的响应函数。...可以将setCapture()方法用到鼠标拖拽div的例子中,但是注意,在给mousedown事件中,调用的box的**setCapture()方法之后,会有一个问题,就是当鼠标松开之后,事件还会一直被捕获...,网页中的其他选项都无法点击,而且就算鼠标松开,div也还会跟着鼠标对应的位置移动,为了解决这个问题,就需要在鼠标松开的时候取消捕获,可以使用releaseCapture()**方法来取消先前调用的捕获方法...,在mouseup事件中调用box的releaseCapture()方法即可。
一、引入CSS .a{ color:#101010}/* 默许超链接字体色彩为蓝色 */ .a:hover{color:#F00}/* 默认超链接字体悬停时色彩...
checkArr, checkedList: [], isOver: false, // 是否在容器 isDown: false, // 是否在容器按下状态
js有哪些改变自身值的方法 1、pop方法从数组中删除最后一个元素,并返回该元素的值。...array.pop() console.log(array) // ["cat", "dog", "cow", "chicken"] console.log(item) // mouse 2、push方法将一个或多个元素添加到数组的末尾...console.log(array) // ["football", "basketball", "badminton", "golfball"] console.log(i) // 4 3、 reverse方法将数组中元素的位置颠倒...改变自身值的方法,希望对大家有所帮助。...更多js学习指路:js教程 收藏 | 0点赞 | 0打赏
js中Promise的状态探究 1、promise可以处于等待被赋值的等待态(pending),可以给出值并转换为解决态(resolved)。...value); } this.then = function(onResolved) { handle(onResolved); }; fn(resolve); } 以上就是js...中Promise的状态探究,希望对大家有所帮助。...更多js学习指路:js教程 收藏 | 0点赞 | 0打赏
执行函数中改变 this 的指向以及方法 最开始还想把这个笔记名字改成 bind apply call 之前的区别,但是,想了想记录笔记还是要从原因开始,再到为什么再到怎么做。...所以,还是改成 执行函数中改变 this 的指向以及方法。 改变 this 的指向的方法和执行 bind,apply,call 都是执行函数时,用来改变 this 的指向。...以下是改变 this 指向的方法。 使用 call 改变 this 指向 call的第一个参数是 this 的指向,后面是一个传入参数的列表。...使用 apply 改变 this 指向 使用 apply 改变 this 指向和 call 改变指向大致上方法是一样的,唯一有不同的就是传参是以单个参数(数组)进行传递,如下图: const fighter...指向方法的理解。
大家好,又见面了,我是你们的朋友全栈君。 indexOf()简介 indexOf()是js中内置的方法之一,它的功能大家都很熟悉:简单来说就是得到数据的索引,对于正则不熟练的人,是个很不错的方法。...) 注:(暂不讨论两个参数时(第二个参数为查询的起始位置),以及lastIndexOf()) String类型使用indexOf(); String中的indexOf方法 (话不多说直接上代码,不跟你多...()是对数据进行了隐式类型转换的,如果参数是数值它会转换为字符来进行查询然后返回索引,本质原因是什么呢,那就是 我们js底层代码中String.prototype.indexOf()使用的是==进行比较判断...; Number类型的IndexOf() 醒醒,Number类型哪来的indexOf()方法,会直接报错的好吗, 如果想对数值类型的进行查询索引,可以将数值转换为字符再进行查询,方法有很多: –...()是不会进行隐式类型转换的,也就是说Array.prototype.indexOf()底层代码在实现的时候使用的是强等于=== 严格比较; 总结 string中indexOf() 会将数值参数转换为字符再查询索引
大家好,又见面了,我是你们的朋友全栈君。...html: 测试鼠标点击的五种状态 css: 分开写: a:link{color:#fff} 未访问时的状态(鼠标点击前显示的状态) a:hover{color:...#fff} 鼠标悬停时的状态 a:visited{color:#fff} 已访问过的状态(鼠标点击后的状态) a:active{color:#fff} 鼠标点击时的状态 a:focus{color...:#fff} 点击后鼠标移开保持鼠标点击时的状态[获得焦点](只有在时标签中有效) 写在一起: a:link,a:hover,a:visited,a:active,a:
实现的效果: 1、文本框支持手工输入,通过用户输入修改值,手工输入结束后触发事件。阻塞在于失去焦点后才触发(输入过程中不触发事件) 2、通过JS方法修改值,修改后触发事件。...if(document.all){//ie8及以下 $("#name").on("change",function(){ console.log(i);//改变值后要触发的代码...模拟失去焦点后时才会触发 jsDate = $("#name").val(); console.log(i + " oninput");//改变值后要触发的代码...适用场景为:文本框输入过程中实时监听输入内容,触发事件 onpropertychange:IE中元素特有的属性,直接在底层监听元素的属性变化(不止是Value),任何变化都会触发事件,包括适用JS操作... 适用场景为:页面运行期间实时监听元素属性变化,触发事件,特别适用于在IE中JS操作触发事件的场景 后记:项目原需求的实现其实最好是在控件里面更改,这里做了个奇怪的东西~ 权当学习 参考:
开始从js的this对象说起,this对象就是函数执行的环境对象。...结果分析说明 GetName函数是在全局环境中定义,所以直接调用函数this就指向了全局环境,所以输出Jack。...函数扩展this对象 es5提供了三个函数非继承的方法,可以直接改变this的指向,但是在书中说是扩充函数作用域,但是我认为改变this指向更贴切一点。...三个方法分别为:apply,call,bing,用法都比较简单,作用也都是改变函数的this指向,下面我就用代码来简单说明一下。...这三个方法功能都是相同,都是改变this指向,只是使用形式上有一点不同,大家可灵活运用。
方法 用append()、extend()、inset()的方法向列表添加单个元素2....用remove()、pop()方法将列表中的指定元素删除3 .用sort()方法将列表元素按照一定的规则从小到大排列顺序4 .用reverse()方法将列表中的元素逆序排列 列表清单1 a=[10,11,12...a.remove('15') print(a) a.pop(-1) print(a) #3 a.sort() print(a) #4 a.reverse() print(a) 结语 针对如何改变列表的方法...,提出利用append()、extend()、inset()的方法向列表添加单个元素,用remove()、pop()方法将列表中的指定元素删除,用sort()方法将列表元素按照一定的规则从小到大排列顺序...,reverse()方法将列表中的元素逆序排列,证明该方法是有效的,本文的方法在运行上考虑不周,未来可以继续研究。
大家好,又见面了,我是全栈君 eclipse中改变默然的workspace的方法可以有: 1.在创建project的时候,手动选择使用新的workspace,如创建一个web project,在向导中的...启动快捷方式用 eclipse.exe -data C:/WorkSpace… 5.在window菜单的preferences向导中,General下的Startup and Shuidown下,勾选”...Prompt workspace on startup”,再重新启动eclipse,即可在启动之初重新选择workspace.l 上述方法中第1条适合在已经进入工作区,然后创建工程的时候不希望创建在当前工作区的情况...,个人感觉这个放在这里好像不是特别合适,因为访问项目的时候,还是需要从当前工作区登录访问的,只不过是项目放在了另外的一个项目中。...第2条用于在进入eclipse之后,在不同的工作区之间跳转 第3条则应该只是修改了最近访问的工作区,而且如果存在多个工作区的话,可以发现不同的工作区之间以回车分隔 第4条则是直接进入指定的工作区,即C:
大家好,又见面了,我是你们的朋友全栈君。 JavaScript中的splice主要用来对js中的数组进行操作,包括删除,添加,替换等。...1.删除-用于删除元素,两个参数,第一个参数(要删除第一项的位置),第二个参数(要删除的项数) 2.插入-向数组指定位置插入任意项元素。...三个参数,第一个参数(插入位置),第二个参数(0),第三个参数(插入的项) 3.替换-向数组指定位置插入任意项元素,同时删除任意数量的项,三个参数。...第一个参数(起始位置),第二个参数(删除的项数),第三个参数(插入任意数量的项) 示例: 1、删除功能,第一个参数为第一项位置,第二个参数为要删除几个。...如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
JS中的数组方法总结 Array.push() 向数组的末尾添加一个或者多个元素,并返回新的长度 let arr =[1,2,3]; console.log(arr.push(6)) //打印结果为...(arr) //打印结果 [1,a] Array.slice(a,b) 将数组中的一部分选取出来并返回成新数组,不改变原数组,不包括结束位置。...(arr) //打印结果 [1,2,3,4] Array.concat(arr1,arr2) 连接2个或者更多的数组,并返回连接后的新数组,该方法不会改变原数组 let arr1 = [1,2,3...,会改变原数组 let arr = [1,2,3] arr.reverse() console.log(arr) //结果 [3,2,1] Array.find() 返回数组中符合条件的第一个元素...) //结果 2 Array.findIndex() 返回数组中符合条件的第一个元素的下标,若数组中没有元素符合要求则返回-1,不改变原数组 let arr = [1,2,3] console.log
前作者:一碗单炒饭 在原作者代码的基础上进行修改,将内容放入数组,可按序显示或随机展示 增加userSelect样式,快速点击时文字不会被选中 可以使用Emoji ????????...elem.style.opacity = (150 - increase) / 120; }, 8); }, 70); $body.appendChild($elem); }; }; 在main.js...中引入即可使用 import mouse from '...../static/js/mouseClick' Vue.use(mouse)
简述:一个防君子不防小人的鸡肋的功能,针对小白还行。...代码如下: //都能支持 document.oncontextmenu = function (e) { return false; } //禁止右键 //禁止选择网页中的文字...基本上IE浏览器就不能选中文字复制了 document.onselectstart = function () { return false; } //禁止鼠标拖动图片 document.ondragstart...function () { return false; } //IE不支持 document.oncopy = function () { return false; } 额外的
领取专属 10元无门槛券
手把手带您无忧上云