js

JS原型和原型链

江枫思渺然 提交于 2020-03-20 12:32:30
构造函数 function Foo(name, age){ this.name = name; this.age = age; this.class = 'class-1'; } var f =new Foo('zhangsan',20); 命名规则:大写字母开头; 那么,在使用new操作符来调用一个构造函数的时候,发生了什么呢?其实很简单,就发生了四件事: var obj ={}; obj.__proto__ = Foo.prototype; Foo.call(obj); return obj; 第一行,创建一个空对象obj。 第二行,将这个空对象的 proto 成员指向了构造函数对象的prototype成员对象,这是最关键的一步,将新生成的对象的 prop 属性赋值为构造函数的prototype属性,使得通过构造函数创建的所有对象可以共享相同的原型。 第三行,将构造函数的作用域赋给新对象,因此Foo函数中的this指向新对象obj,然后再调用Foo函数。于是我们就给obj对象赋值了。 第四行,返回新对象obj。 构造函数 - 扩展 var a = {} 其实是 var a = new Object()的语法糖; var a = [] 其实是 var a = new Array() 的语法糖; function Foo(){...} 其实是 var Foo = new

JS弹幕代码分析

烈酒焚心 提交于 2020-03-20 10:59:40
现在许多直播软件和视频都有弹幕功能,让我们来看看并分析是怎么实现的。 这边我主要分析下js的代码,想看源码的朋友送上链接, http://sandbox.xinfan.org/xdd... HTML代码如下(css代码就不展示了,想看的直接看源码吧): <div id="main" class="container"> <p class="p0">啦啦啦啦啦啦啦</p> <p class="p1">啦啦啦啦啦啦啦</p> </div> <div class="footer"> <input id="ipt" class="ipt" type="text" placeholder="说点什么?"/> <button id="launch" class="launch" type="button" onclick="Leave()">发射</button> <button id="clear" class="clear" type="button">清屏</button> </div> </div> JS代码如下: var num = 2; //声明了num=2 var _p = document.getElementsByTagName("p"); //获取标签p. var main = document.getElementById("main"); //获取Id为mian的标签

js 合并数组对象中的相同项,并统计数量和

你离开我真会死。 提交于 2020-03-20 10:41:41
let list=[ { id:11, name:'apple', num:2 }, { id:11, name:'apple', num:3 }, { id:22, name:'pig', num:2 }, { id:11, name:'apple', num:2 }, ] list = list.reduce((obj, item) => { let find = obj.find(i => i.id === item.id) let _d = { ...item, frequency: 1 } find ? (find.num+=item.num,find.frequency++ ): obj.push(_d) return obj }, []) 输出=> [ { id: 11, name: "apple", frequency:3, num: 7 },{ id: 22, name: "pig", frequency:1, num: 2, } ] 来源: https://www.cnblogs.com/wangzhichao/p/12529756.html

实用的js代码

自古美人都是妖i 提交于 2020-03-20 09:45:24
1. oncontextmenu="window.event.returnvalue=false" 将彻底屏蔽鼠标右键 <table border oncontextmenu=return(false)><td>no</table> 可用于Table 2. <body onselectstart="return false"> 取消选取、防止复制 3. onpaste="return false" 不准粘贴 4. oncopy="return false;" oncut="return false;" 防止复制 5. <link rel="Shortcut Icon" href="favicon.ico"> IE地址栏前换成自己的图标 6. <link rel="Bookmark" href="favicon.ico"> 可以在收藏夹中显示出你的图标 7. <input style="ime-mode:-Disabled"> 关闭输入法 8. 永远都会带着框架 <script language="javascript"><!-- if (window == top)top.location.href = "frames.htm"; //frames.htm为框架网页 // --></script> 9. 防止被人frame <SCRIPT LANGUAGE=javascript><

js事件对象event

蹲街弑〆低调 提交于 2020-03-20 08:32:17
js的事件对象 即我们函数中经常会用到的 Event Event 对象代表事件的状态,比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。 事件通常与函数结合使用,函数不会在事件发生前被执行! 事件句柄 通常我们用得比较多的 就是在标签上 写onclick="fn()" 鼠标 / 键盘属性 属性 描述 altKey 返回当事件被触发时,"ALT" 是否被按下。 button 返回当事件被触发时,哪个鼠标按钮被点击。 clientX 返回当事件被触发时,鼠标指针的水平坐标。 clientY 返回当事件被触发时,鼠标指针的垂直坐标。 ctrlKey 返回当事件被触发时,"CTRL" 键是否被按下。 metaKey 返回当事件被触发时,"meta" 键是否被按下。 relatedTarget 返回与事件的目标节点相关的节点。 screenX 返回当某个事件被触发时,鼠标指针的水平坐标。 screenY 返回当某个事件被触发时,鼠标指针的垂直坐标。 shiftKey 返回当事件被触发时,"SHIFT" 键是否被按下。 IE 属性 除了上面的鼠标/事件属性,IE 浏览器还支持下面的属性: 属性 描述 cancelBubble 如果事件句柄想阻止事件传播到包容对象,必须把该属性设为 true。 fromElement 对于 mouseover 和 mouseout 事件

js获取当前时间

狂风中的少年 提交于 2020-03-20 08:28:41
var now = new Date(); var year = now.getFullYear(); //年 var month = now.getMonth() + 1; //月 if(month < 10){ month= "0"+month; } var day = now.getDate(); //日 if(day < 10){ day= "0"+day; } var hour = now.getHours(); //小时 if(hour < 10){ hour= "0"+hour; } var minute = now.getMinutes(); //分钟 if(minute < 10){ minute= "0"+minute; } var date2=year+'-'+month+'-'+day+' '+hour+':'+minute+':00'; js获取当前毫秒值 var timestamp = new Date().getTime(); js比较时间大小:可以直接比较 if(date2==date2){} js获取当前时间、js时间戳转日期 //获取时间的方法、参数一为加几天、参数二 :1为年月日、2为年月日时分秒、3为时分----------------------------------------------------------------------

js跨域

爷,独闯天下 提交于 2020-03-20 06:10:48
转自 https://www.cnblogs.com/yongshaoye/p/7423881.html 一、了解跨域? 1 概念:只要协议、域名、端口有任何一个不同,都被当作是不同的域。 定义:跨域是指从一个域名的网页去请求另一个域名的资源。比如从www.baidu.com 页面去请求 www.google.com 的资源。但是一般情况下不能这么做,它是由浏览器的同源策略造成的,是浏览器对 JavaScript 施加的安全限制。 所谓同源是指,域名,协议,端口均相同。 这里说的js跨域是指通过js在不同的域之间进行数据传输或通信,比如用ajax向一个不同的域请求数据,或者通过js获取页面中不同域的框架中(iframe)的数据。 请注意:localhost和127.0.0.1虽然都指向本机,但也属于跨域。 浏览器执行 javascript 脚本时,会检查这个脚本属于哪个页面,如果不是同源页面,就不会被执行。 对于端口和协议的不同,只能通过后台来解决。 2 例: http://www.123.com/index.html 调用 http://www.123.com/server. PHP (非跨域) http://www.123.com/index.html 调用 http://www.456.com/server. php (主域名不同:123/456,跨域) http://abc

JS键盘事件种类、兼容和优化

扶醉桌前 提交于 2020-03-20 04:57:08
一、浏览器的按键事件总结 用js实现键盘记录,要关注浏览器的三种按键事件类型,即keydown,keypress和keyup,它们分别对应onkeydown、 onkeypress和onkeyup这三个事件句柄。一个典型的按键会产生所有这三种事件,依次是keydown,keypress,然后是按键释放时候的keyup。 在这3种事件类型中,keydown和keyup比较底层,而keypress比较高级。这里所谓的高级是指,当用户按下shift + 1时,keypress是对这个按键事件进行解析后返回一个可打印的“!”字符,而keydown和keyup只是记录了shift + 1这个事件。但是keypress只能针对一些可以打印出来的字符有效,而对于功能按键,如F1-F12、Backspace、Enter、Escape、 PageUP、PageDown和箭头方向等,就不会产生keypress事件,但是可以产生keydown和keyup事件。然而在FireFox中,功能按键是可以产生keypress事件的。 传递给keydown、keypress和keyup事件句柄的事件对象有一些通用的属性。如果Alt、Ctrl或Shift和一个按键一起按下,这通过事件的altKey、ctrlKey和shiftKey属性表示,这些属性在FireFox和IE中是通用的。 二、兼容浏览器

JS全选反选功能

二次信任 提交于 2020-03-20 03:37:57
总选框:<input type="checkbox" class="all" name="all"> 子选框: <input class='sel' type='checkbox' class="sel" name='test' value=""> /** * 全选 反选 */ $(".all").bind("click",function(){ $(".sel").prop("checked",$(this).prop("checked")); }) $(".sel").bind("click",function(){ var sel=$(".sel"); var b=true; for(var i=0;i<sel.length;i++){ if(sel[i].checked==false){ b=false; break; } } $(".all").prop("checked",b); })    来源: https://www.cnblogs.com/pxblog/p/10783044.html

JS中的栈和堆

回眸只為那壹抹淺笑 提交于 2020-03-20 01:06:22
一.栈和堆 栈(stack) :栈会自动分配内存空间,会自动释放,存放 基本类型 ,简单的数据段,占据固定大小的空间。 基本类型 :String,Number,Boolean,Null,Undefined 堆(heap) :动态分配的内存,大小不定也不会自动释放,存放 引用类型 ,指那些可能由多个值构成的对象,保存在堆内存中,包含引用类型的变量,实际上保存的不是变量本身,而是指向该对象的指针。 引用类型 :Function,Array,Object 二.区别 栈 :所有在方法中定义的变量都是放在栈内存中,随着方法的执行结束,这个方法的内存栈也自然销毁。 优点:存取速度比堆快,仅次于直接位于CPU中的寄存器,数据可以共享; 缺点:存在栈中的数据大小与生存期必须是确定的,缺乏灵活性。 堆 :堆内存中的对象不会随方法的结束而销毁,即使方法结束后,这个对象还可能被另一个引用变量所引用(参数传递)。创建对象是为了反复利用,这个对象将被保存到运行时数据区。 三.栈和堆的溢出 栈 :可以递归调用方法,这样随着栈深度的增加,JVM维持着一条长长的方法调用轨迹,知道内存不够分配,产生栈溢出。 堆 :循环创建对象,通俗点就是不断的new 一个对象。 下面来看看传值和传址的区别 其实这两者区别就是基本类型和引用类型的区别,话不多说看栗子 var a = [1,0,9,8,7]; var b = a;