javascript
昵称2-20个字符
这个作者很懒,什么都没留下…
展开
-
Bye World
撤了撤了 我转做销售了各位加油原创 2020-10-27 00:32:48 · 326 阅读 · 1 评论 -
art-template 模板引擎(客户端)
art-template作用:使用模板引擎提供的模板语法,可以将数据和HTML拼接起来官方地址:https://aui.github.io/art-template/zh-cn/index.html使用步骤:下载art-template模板引擎文件并在HTML页面中引入库文件<script src='./js/template-web.js'></script>准备art-template模板<script id=‘tp1’ type='text/htm原创 2020-08-10 11:59:03 · 370 阅读 · 1 评论 -
正则表达式
1.正则表达式概述1.1什么是正则表达式正则表达式( Regular Expression )是用于匹配字符串中字符组合的模式。在JavaScript中,正则表达式也是对象。正则表达式通常被用来检索、替换那些符合某个模式(规则)的文本,例如验证表单:用户名表单只能输入英文字母、数字或者下划线, 昵称输入框中可以输入中文(匹配)。此外,正则表达式还常用于过滤掉页面内容中的一些敏感词(替换),或从字符串中获取我们想要的特定部分(提取)等 。1.2 正则表达式的特点灵活性、逻辑性和功能性非常的强。可原创 2020-07-02 23:47:50 · 798 阅读 · 0 评论 -
高阶函数 闭包 递归遍历数据 斐波那契数列 求1~n的阶乘
高阶函数高阶函数是对其他函数进行操作的函数,它接收函数作为参数或将函数作为返回值输出。此时fn 就是一个高阶函数函数也是一种数据类型,同样可以作为参数,传递给另外一个参数使用。最典型的就是作为回调函数。同理函数也可以作为返回值传递回来闭包1.变量的作用域变量根据作用域的不同分为两种:全局变量和局部变量。函数内部可以使用全局变量。函数外部不可以使用局部变量。当函数执行完毕,本作用域内的局部变量会销毁。2.什么是闭包闭包(closure)指有权访问另一个函数作用域中变量的函数。简单原创 2020-07-02 20:25:13 · 369 阅读 · 0 评论 -
使用js实现多个video,一个播放其他暂停
html <div class="videoContent"> <div class="videoMod"> <h3>海贼王:路飞成功收编小弟,草帽海贼团全员都在聆听他的誓言!</h3> <video src="./video/video1.mp4" controls >您的浏览器不支持 video 标签。</video> </div> <div class="videoMod"&原创 2020-06-29 19:11:06 · 2930 阅读 · 0 评论 -
严格模式
严格模式1.什么是严格模式JavaScript 除了提供正常模式外,还提供了严格模式(strict mode)。ES5 的严格模式是采用具有限制性 JavaScript变体的一种方式,即在严格的条件下运行 JS 代码。严格模式在 IE10 以上版本的浏览器中才会被支持,旧版本浏览器中会被忽略。严格模式对正常的 JavaScript 语义做了一些更改:1.消除了 Javascript 语法的一些不合理、不严谨之处,减少了一些怪异行为。2.消除代码运行的一些不安全之处,保证代码运行的安全。3.提高原创 2020-06-27 21:22:11 · 254 阅读 · 0 评论 -
函数内部的this指向 改变this指向 call() apply() bind()
1.函数内部的this指向this 的指向,是当我们调用函数的时候确定的。调用方式的不同决定了this 的指向不同;一般指向我们的调用者:2.改变函数内部 this 指向2.1call()改变this指向call()方法调用一个对象。简单理解为调用函数的方式,但是它可以改变函数的 this 指向应用场景: 经常做继承;//call可以调用函数//call可以改变函数内部的this指向//使用call方法传递参数使用逗号隔开//call方法一般应用于继承var o = { name:原创 2020-06-27 21:08:19 · 317 阅读 · 0 评论 -
javascript 函数定义方式总结 函数的调用方式总结
函数的定义方式总结方式一:函数声明方式 function 关键字 (命名函数);function fn(){}方式二:函数表达式 (匿名函数);var fn = function(){}方式三:new Function(‘参数1’,‘参数2’,‘函数体’),参数和函数体一定要使用字符串包裹 ;在开发过程中我们使用前两种方式比较多,方式三书写繁琐,指向效率较低,使用频率较少;函数也是属于对象;var f = new Function('a', 'b', 'console.log原创 2020-06-27 20:35:20 · 313 阅读 · 1 评论 -
常见let经典面试题
1.letlet arr=[];for(let i=0;i<2;i++){ arr[i]=function(){ console.log(i); }}arr[0]();// 0 arr[1]();// 1console.log(i);//i is not defined此题的关键点在于 每次循环都会产生一个块级作用域,每个块级作用域中的变量都是不同的,函数执行时输出的是自己上一级(循环产生的块级作用域)作用域下的值;varvar arr=[];for(var i=0;i原创 2020-06-10 00:12:26 · 972 阅读 · 0 评论 -
判断一个数是否为素数 执行效率最高
<script> function odds(num){ // var num=9; var flag=true;//逻辑值 true为素数 false不是素数 var count=0;//循环次数 if(num==0 || num==1){ console.log(num+" 不是素数"); }else{ .原创 2020-06-08 19:55:04 · 489 阅读 · 4 评论 -
本地存储--记住用户名
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>D.转载 2020-06-08 12:45:43 · 276 阅读 · 0 评论 -
本地存储 localStorage sessionStorage
本地存储的特性数据存储再用户浏览器中设置、读取方便、甚至页面刷新不丢失数据容量较大、sessionStorage约5M、localStorage越20M只能存储字符串,可以将对象JSON.stringify()编码后存储window.sessionStorage生命周期为关闭浏览器窗口在同一个窗口(页面)下数据可以共享以键值对的形式存储使用存储数据:sessionStorage.setItrm(key,value);获取数据:sessionStorage.getItrm(k原创 2020-06-08 12:38:00 · 300 阅读 · 0 评论 -
移动端 click延时的3种解决方案 禁止缩放 自定义函数 fastclick.js插件
click延时解决方案移动端click事件会有300ms的延时,原因是移动端屏幕双击会缩放(double tap to zoom),页面。解决方案:1.禁用缩放。浏览器禁用默认的双击缩放行为 并且去掉300ms的点击延迟。<meta name="viewport" content="user-scalable=no">2.利用touch事件自己封装这个事件解决300ms延迟。原理:当手指触摸屏幕时,记录当前触摸时间当手指离开屏幕时,用离开的时间减去触摸的时间如果小于150原创 2020-06-05 15:15:33 · 382 阅读 · 0 评论 -
移动端拖动元素
移动端拖动元素touchstart、touchmove、touchend可以实现拖动元素;拖动元素需要当前手指的坐标值 可以使用targetTouches[0]里面的pageX和pageY;移动端拖动的原理:手指移动中,计算出手指移动的距离。然后用盒子原来的位置+手指移动的距离;手指移动的距离:手指滑动中的位置减去手指刚开始触摸的位置;拖动元素三部曲:触摸元素touchstart:获取手指初始坐标,同时获得盒子原来的位置;移动手指touchmove:计算手指滑动距离,并且移动盒子;离开原创 2020-06-04 23:09:41 · 882 阅读 · 1 评论 -
触摸事件对象(TouchEvent)
TonchEvent是一类描述手指在触摸平面(触摸屏、触摸板等)的状态变化的事件。这类事件用于描述一个或多隔触点,使开发者可以检测触点的移动,触点的增加和减少,等等。touchstart、touchmove、touchend三个事件都会各自有事件对象。触摸事件对象重点三个常见对象列表触摸列表说明touches正在触摸屏幕的所有手指的一个列表targetTouches正在触摸当前DOM元素上的手指的一个列表changedTouches手指状态发生了改变的列表,从无到原创 2020-06-04 22:40:27 · 847 阅读 · 0 评论 -
navigator对象
navigator对象包含有关浏览器的信息,它有很多属性,常用的是userAgent,该属性可以返回由客户机发送服务器user-agent头部的值。下面代码可以判断用户哪儿个终端打开页面,实现跳转:window.location.href=/Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)?“http://localhost:8888/mobile_web”:“http://localhost:8888/PC”如果是手原创 2020-06-03 16:39:47 · 223 阅读 · 0 评论 -
location对象 url
什么是location对象window对象提供了一个location属性用于获取或设置窗体的URL,并且可以用于解析URL。因为这个属性返回的是一个对象,所以将这个属性也成为location对象location对象属性location对象方法url统一资源定位符是互联网上标准资源的地址,互联网上的每个文件都有一个唯一的URL,它包含的信息指出文件的位置以及浏览器应该怎么处理它。url的组成格式图中中括号是可选项:protocol 协议,常用的协议是httphostname 主机地址原创 2020-06-03 15:53:36 · 469 阅读 · 1 评论 -
js执行机制 同步 异步
javascript是单线程javsscript语言的一大特点就是单线程,也就是说,同一个时间只能做一件事,这是因为 javascript 这门脚本语言诞生的使命所致-------javascript 是为处理页面中用户的交互,以及操作DOM而诞生的,比如我们对某个DOM 元素进行添加和删除操作,不能同时进行,应该先进行添加,之后再删除单线程就意味着,所有任务需要排队,前一个任务结束,才会执行后一个任务,这样所导致的问题是:如果JS执行的时间过长,这样就会造成页面的渲染不连贯,导致页面渲染加载阻塞的感觉原创 2020-06-03 14:55:05 · 340 阅读 · 0 评论 -
js倒计时demo setInterval() clearInterval()
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> li{cursor: pointer;} .原创 2020-06-03 13:33:17 · 176 阅读 · 0 评论 -
BOM-调整窗口大小事件 resize
调整窗口大小事件window.onresize=function(){}window.addEventListener("resize",function(){});window.onresize 是调整窗口大小加载事件,当触发时就调用处理函数;注意:只要窗口大小发生变化,就会触发这个事件我们经常利用这个事件完成响应式布局,window.innerWidth当前屏幕宽度;<!DOCTYPE html><html lang="en"><head>原创 2020-06-03 02:23:09 · 679 阅读 · 0 评论 -
什么是BOM BOM概述 浏览器对象模型 BOM的构成
什么是BOMBOM(Browser Object Model)即浏览器对象模型,它提供了独立于内容而与浏览器窗口进行交互的对象,其核心对象是window;BOM是由一些列相关对象构成,并且每个对象都提供了很多方法与属性;BOM缺乏标准,Javascript语法的标准化组织是ECMA,DOM的标准化组织是W3C,BOM最初是Netscape浏览器标准的一部分;BOM浏览器对象模型把 浏览器 当作一个 对象 来看待BOM的顶级对象是windowBOM学习的是浏览器窗口交互的一些对象BOM是浏原创 2020-06-02 21:38:25 · 1687 阅读 · 0 评论 -
js常用键盘事件 onkeydown onkeyup onkeypress
常用键盘事件事件除了使用鼠标触发,还可以使用键盘触发;键盘事件触发条件onkeyup某个键盘按键被松开时触发onkeydown某个键盘按键被按下时触发onkeypress某个键盘按键被按下时触发 不能识别功能键注意:如果使用addEventListener不需要加on;onkeypress和前面2个的区别时,它不能识别功能键,比如左右箭头,shift等;三个事件的执行顺序是:keydown–keypress–keyup;<!DOCTYPE原创 2020-06-02 20:56:54 · 465 阅读 · 0 评论 -
鼠标事件对象 MouseEvent
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> li{cursor: pointer;} .原创 2020-06-02 20:32:44 · 1044 阅读 · 0 评论 -
js禁止选中文字
禁止鼠标选中(selectstart开始选中)<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style>原创 2020-06-02 20:13:48 · 2160 阅读 · 0 评论 -
禁止鼠标右键菜单
contextmenu主要控制应该如何显示上下文菜单,主要用于程序员取消默认的上下文菜单;<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title>原创 2020-06-02 20:08:47 · 286 阅读 · 0 评论 -
事件委托(代理、委派)
事件委托事件委托也成为事件代理,在jQuery里面称为事件委派;事件委托的原理不是每个子节点单独设置事件监听器,而是事件监听器设置在其父结点上,然后利用冒泡原理影响设置每个子节点。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale原创 2020-06-02 20:02:23 · 287 阅读 · 0 评论 -
阻止冒泡
阻止冒泡的两种方式事件冒泡:开始时由最具体的元素接受,然后逐级向上传播到DOM最顶层节点。e.stopPropagation(); && e.cancelBubble=true; 阻止冒泡<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, in原创 2020-06-02 19:39:47 · 263 阅读 · 0 评论 -
js事件对象的常见属性和方法
e.targettarget 属性规定哪个 DOM 元素触发了该事件。target 事件属性可返回事件的目标节点(触发该事件的节点),如生成事件的元素、文档或窗口。this和e.target的区别e.target 点击了哪儿个元素,就返回哪儿个元素 this是哪儿个元素绑定了点击事件,那么就返回谁;<ul> <li>123</li> <li>456</li> <li>789</li></ul>原创 2020-06-02 19:13:07 · 736 阅读 · 0 评论 -
删除事件
事件解绑传统解绑方式btn.onclick=function(){ alert(123); btn.onclick=null;}addEventListener绑定的事件解绑 用removeEventListener解绑btn.addEventListener('click',fn);function fn(){ alert(222222222222); btn.removeEventListener('click',fn);}attachEvent绑定事件解绑btn.at原创 2020-06-02 00:56:29 · 287 阅读 · 0 评论 -
注册事件(绑定事件) addEventListener() js事件监听
1.注册事件概述给元素添加事件,称为注册事件或者绑定事件注册事件方式有两种:传统方式和方法监听注册方式传统注册方式利用on开头的事件 如 onclick;<button onclick="alert('hi~')"></button>btn.οnclick=function(){}特点:注册事件的唯一性同一个元素同一个事件只能设置一个处理函数,最后注册的处理函数将会覆盖前面注册的处理函数;var btn=document.querySelectorAll("bo原创 2020-06-02 00:44:07 · 1324 阅读 · 0 评论 -
节点操作 3种动态创建元素的区别 write() innerHtml createElement() 执行效率
三种动态创建元素区别document.write();element.innerHtml;document.createElement();区别:document.write() 是直接将内容写入页面的内容流,但是文档流执行完毕,则它会导致页面全部重绘;<body> <div>我的内容将会被write()重绘会123</div> <script> document.write(123); </script></原创 2020-06-01 23:54:20 · 177 阅读 · 0 评论 -
动态生成表格 createElement() 删除行数据 removeChild() parenteNode
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> *{margin:0;paddin.原创 2020-06-01 23:09:35 · 290 阅读 · 0 评论 -
字符串转为为数组 split()
split() 方法用于把一个字符串分割成字符串数组。String.split() 执行的操作与 Array.join 执行的操作是相反的。var str="123,456,pink,red,css,html";console.log(str.split(","));原创 2020-06-01 00:53:37 · 1573 阅读 · 0 评论 -
返回字符串出现最多的字符及次数 charAt()
判断一个字符串"abacddafklgjsklafafgafd"中出现次数最多的字符,并统计其次数。利用charAt()遍历这个字符串;把每个字符都存储给对象,如果对象没有该属性,值设为1,如果存在了 值+1;遍历对象,得到最大值和该字符串;charAt() 方法用于返回指定索引处的字符。索引范围为从 0 到 length() - 1。var str="abacddafklgjsklafafgafd";var obj={};for(var i=0;i<str.length;i++){原创 2020-06-01 00:39:53 · 759 阅读 · 0 评论 -
查找字符串中一个元素出现的位置及次数
查找字符串"abcdefsasfsacvggiorjaionvapoo"中所有a出现的位置及次数;思路:先找出第一个a的位置然后只要indexOf()返回的结果不是-1就继续往后查找因为indexOf()只能查到第一个,所以后面的再查找 要利用第二个参数,当前索引值加1,从而继续查找var str="abcdefsasfsacvggiorjaionvapoo";var index=str.indexOf("a");var num=0;while(index!==-1){ console原创 2020-06-01 00:14:59 · 3003 阅读 · 0 评论 -
数组转化为字符串
1.toString();//数组转化为字符串//默认为逗号分隔 .toString();var arr=[1,2,3,4,5,0,6,'abcd'];console.log(arr.toString());2.jojn(分隔符)//join(); 默认以逗号分隔 join("-");可以指定符号进行分隔var arr=[1,2,3,4,5,'ds','assdasd','asdfa'];console.log(arr.join());console.log(arr.join('v'原创 2020-05-31 23:49:28 · 5147 阅读 · 0 评论 -
数组去重 indexOf()
数组去重,要求去除数组中重复的元素。目标:把旧数组里面不重复的元素选取出来放到新数组中,重复元素只保留一个,放到新数组中去重;算法:遍历旧数组 拿旧数组中的元素去查询新数组,如果该元素在新数组里面没有出现过,我们就添加, 否则不添加;利用indexOf() 如果返回 -1 说明新数组中有该元素封装一个去重的函数 unique:indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。未有该值 返回 -1var arr=["a","b","c","d","e","f","a原创 2020-05-31 23:43:10 · 356 阅读 · 0 评论 -
数组排序(冒泡排序) sort() 自定义排序函数
sort() 方法用于对数组的元素进行排序。如果调用该方法时没有使用参数,将按字母顺序对数组中的元素进行排序,说得更精确点,是按照字符编码的顺序进行排序。要实现这一点,首先应把数组的元素都转换成字符串(如有必要),以便进行比较。<script type="text/javascript">//小-大function sortNumber(a, b){ return a - b;}//大-小function sortNumber2(a,b){ return b-a;}var原创 2020-05-31 23:20:23 · 3408 阅读 · 0 评论 -
翻转数组 reverse() instanceof Array.isArray()
数组自带函数方法:var arr=['pink','red','blue'];arr.reverse();console.log(arr)自定义翻转数组函数方法:var arr=['pink','red','blue','yellow',125];function reverses(arr){ // instanceof 判断是否为数组 //isArry() 判断是否为数组 //if(arr instanceof Array){ if(Array.isArray(arr)){ v原创 2020-05-31 22:44:44 · 202 阅读 · 0 评论 -
js倒计时 日期对象
思路:输入时间减去现在的时间就是剩余时间,即倒计时用时间戳来进行计算,用户输入时间总的毫秒数减去现在时间的毫秒数。得到的就是剩余时间的毫秒数剩余时间毫秒数转换为天、时、分、秒(时间戳转化成时分秒)转换公式如下:d = parseInt(总秒数/60/60/24); //计算天数h = parseInt(总秒数/60/60%24); //计算小时m = parseInt(总秒数/60%60); //计算分数s = parseInt(总秒数%60); //计算当前秒数functi原创 2020-05-31 14:43:12 · 403 阅读 · 0 评论