前端

该怎么去获得文件名字符串中的文件扩展名呢？ 一种较为强大的解决方法是利用String的slice、lastIndexOf方法： 1 2 3 4 5 6 7 8 9 function getFileExtension(filename) { return filename.slice((filename.lastIndexOf(".") - 1 >>> 0) + 2); } console.log(getFileExtension3('')); // '' console.log(getFileExtension3('filename')); // '' console.log(getFileExtension3('filename.txt')); // 'txt' console.log(getFileExtension3('.hiddenfile')); // '' console.log(getFileExtension3('hiddenfile.')); // '' console.log(getFileExtension3('filename.with.many.dots.ext')); // 'ext' 说明 filename.slice((filename.lastIndexOf(".") - 1 >>> 0) + 2) 本方法中的>>>运算目的是 找到最后一个.所在索引，然后索引-1+2，相当于+1，则slice方法返回.后面的后缀名 .不会再开头，否则索引会是0，因为-1>>>0 = 4294967295，所不会匹配到 .出现在末尾，索引会等于length+1，也不会匹配到 slice(start,end) 说明：start必须指定，负值为从后往前数，若只指定start值，则返回start位置及后面一直到数组结尾所有的元素 **注意：**区别于删除数组中的一段元素的方法 Array.splice() lastIndexOf(searchvalue,fromindex) **说明：**如果要检索的字符串值没有出现，则该方法返回 -1，该方法对大小写敏感 使用： 1 2 3 4 var str="Hello world!...

做网页轮播图，或者音乐播放列表时经常要用到一组循环的数组，到最后一项返回第一项，第一项返回最后一项 利用两次判断 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 function doLoop( arr ){ arr.loop_idx = 0; // 返回当前的元素 arr.current = function(){ if( this.loop_idx < 0 ){// 第一次检查 this.loop_idx = this.length - 1;// 更新 loop_idx } if( this.loop_idx >= this.length ){// 第二次检查 this.loop_idx = 0;// 更新 loop_idx } return arr[ this....

经常会用到指定内容的复制粘贴问题，用到document的execCommand 方法,为此，我将这个功能封装为一个简单的函数: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 function doCopy($el, {deepCopy = false, copyTips = true, language = "Chinese", bgColor = "#ff6666", fontColor = "#fff"} = {}) { let tempEl = $("<input id='selectEl' type='text' value=''>").val($el.text()) if (deepCopy) { tempEl.val($el.html()) } tempEl.appendTo($("body")) document.querySelector('#selectEl').select(); document.execCommand('copy'); tempEl.remove() if (copyTips) { let tipEl = $("<div class='copyTips' >成功复制到剪切板</div>") tipEl....

在javascript中，Array()经常用到，利用ES6中的一些新特性会让数组的处理更加方便快捷 1.迭代空数组 直接创建一个数组 1 2 const arr=new Array(4); //Output:[undefined，undefined，undefined，undefined] 利用map方法，转化成新的数组，企图得到 [0,1,2,3] 数组 1 2 3 const arr=new Array(4); arr.map((ele,index) => index); //Output:[undefined，undefined，undefined，undefined] 解决这个问题可以在创建数组时用到Array.apply apply与call类似，都是用来继承父类的方法的，不同之处是： call() 方法分别接受参数。person.fullName.apply(person1, ["Oslo", "Norway"]); apply() 方法接受数组形式的参数. person.fullName.call(person1, "Oslo", "Norway"); 如果要使用数组而不是参数列表，则 apply() 方法非常方便。 1 2 3 const arr = Array.apply(null, new Array(4)); arr.map((ele,index) => index); //Output:[0,1,2,3] 由此，我们可以创建一个指定最大值、最小值、或者长度生成指定数列的方法 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 /** * 生成自定义的连续数列 * @param{Number}min * @param{Number}max * @param{Number}len */ function newArr({min = null, max = null, len = null} = {}) { let newArray=[], skip = min if (len == null) {len = max - min + 1} if (min == null) {skip = -max} const arr = Array....

开发中有时会遇到多个条件，执行相同的语句，也就是多个||这种： 1 2 3 if (status === 'process' || status === 'wait' || status === 'fail') { doSomething() } 这种写法语义性、可读性都不太好。可以通过switch case或includes这种进行改造。 1 2 3 4 5 6 7 8 9 10 11 switch case switch(status) { case 'process': case 'wait': case 'fail': doSomething() } includes const enum = ['process', 'wait', 'fail'] if (enum.includes(status)) { doSomething()

什么是瀑布流？ 一种图片在网页的布局方式，具体要求为：从页面第二行开始，后续图片跟在页面中最矮的那张图片后面 瀑布流布局 用JavaScript怎么实现？ 为此我将整个过程封装为一个函数。 1 2 3 4 5 6 7 8 /*HTML部分*/ <head> <link rel="stylesheet" href="main.css"> </head> <div id="box"></div>//container和img由js动态加入 <script src="jquery.min.js"></script> <script src="loadFile.js"></script> <script src="main.js"></script> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 /*CSS部分*/ /*首先清空默认样式*/ #box{ position: relative; } .container{ float: left; } .container>.pic{ width: 200px; } .container>.pic>img{ width: 100%; } 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 /*JS部分*/ /*loadFile....

模块功能主要由两个命令构成：export和import。export命令用于规定模块的对外接口，import命令用于输入其他模块提供的功能。 //profile.js export var firstName = 'Michael'; export var lastName = 'Jackson'; export function sayName () { return firstName + lastName; } export default function () { console.log('foo'); } // main.js import { firstName, lastName , sayName} from './profile.js'; 注意：在index.html中引入的时候需要给script加type=“module”,即 <script type="module" src="./profiles.js"></script> <script type="module" src="./main.js"></script> 本文来自公众号“前端者也”

1. 网页出现横向滚动条？ <body style=`overflow:-Scroll;overflow-y:hidden > </body> 让横条没有： <body style=`overflow:-Scroll;overflow-x:hidden> </body> 两个都去掉？更简单了 <body scroll="no" > </body> 火狐底部滚动条不显示： html { overflow:-moz-scrollbars-vertical; } 2. 网页图标？ <link rel="shortcut icon " href="images/favicon.ico"> 3. Height:100%失效？ <html style="height: 100%;"> <body style="height: 100%;"> <div style="height: 100%;"> <p> 这样这个div的高度就会100%了 </p> </div> </body> </html> 4. 设置一个元素不可见？ opacity 设为 0、将 visibility 设为 hidden、将 display 设为 none 或者将 position 设为 absolute 注意： 1> display=none元素消失，不占位置 2> opacity =0、 visibility =hidden只是视觉上不可见，其实还在那里占位置 5.input无法输入？ ==> height:0; (将包裹提示的div高度设置为0，让其不再遮挡即可)...

Jquery属性操作 1.属性 attr(attrName [,attrValue]) 操作所有属性（自定义和内置的） prop(attrName [,attrValue)) 操作HTML元素内置属性 removeAttr(attrNam)删除属性 removeProp(attrName) 并不能删除HMTL元素上的属性 2.CSS类 addclass()添加一个class值 removeClass()删除一个class值 toggleClass()切换一个class值(有则删掉该class，没有则加上，其他class不动) hasClasss() 判断是否有指定class 3.HTML代码/文本/值 html([html]) 相当于innerHTML text([text)相当于innerText val([value]) 设置/获取表单控件的值 Jquery样式操作 1.CSS操作 css(atr,[value])设置/获取CSS值 参数可以是一个对象的形式css({atr: value,}) 2.位置 offset()[.left/.top]元素在页面中的坐标 设置只需要传一个对象即可 {"left:num,top:num"} position()[.left/.top] 元素在第一个定位的祖先元素内的坐标 (只读！) scollTop … scollLeft … 3.尺寸 width()/height()内容尺寸 innerwidth()/ innerHeight()内容尺寸+ padding outerWidth()/ outerHeight() 盒子的尺寸 Jquery筛选操作 1. 过滤操作 first () last() eq() not() filter() slice () has() 3.串联 add()把选中的元素加入当前集合 addBack()把调用该方法的元素加入当前集合 end()返回最后一次破坏性操作之前的DOM contents()返回所有子节点的集合...

1.通过id获取元素 1 2 3 function $(id) { return typeof id === 'string' ? document.getElementById(id): null; } 2.日期格式化 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 function formatDate(cDate) { //1.判断 if (!cDate instanceof Date){ return; } //2.转化 var year=cDate.getFullYear(); var month=cDate.getMonth(); var date=cDate.getDate(); var hour=cDate.getHours(); var minute=cDate.getMinutes(); var second=cDate.getSeconds(); //2.1 补0 month=month<10? '0'+month:month; date=date<10?...