myFunction on Archai's home

myFunction on Archai's home https://blog.archai.space/tags/myfunction/ Recent content in myFunction on Archai's home Hugo -- gohugo.io Thu, 09 Jul 2020 00:00:00 +0000 获取文件扩展名 https://blog.archai.space/p/%E8%8E%B7%E5%8F%96%E6%96%87%E4%BB%B6%E6%89%A9%E5%B1%95%E5%90%8D/ Thu, 09 Jul 2020 00:00:00 +0000 https://blog.archai.space/p/%E8%8E%B7%E5%8F%96%E6%96%87%E4%BB%B6%E6%89%A9%E5%B1%95%E5%90%8D/ 该怎么去获得文件名字符串中的文件扩展名呢？一种较为强大的解决方法是利用String的slice、lastIndexOf方法： 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，该方法对大小写敏感使用： var str="Hello world!" document.write(str.lastIndexOf("Hello") + "<br />")//0 document.write(str.lastIndexOf("World") + "<br />")//-1 document. 一组循环数组 https://blog.archai.space/p/%E4%B8%80%E7%BB%84%E5%BE%AA%E7%8E%AF%E6%95%B0%E7%BB%84/ Wed, 08 Jul 2020 00:00:00 +0000 https://blog.archai.space/p/%E4%B8%80%E7%BB%84%E5%BE%AA%E7%8E%AF%E6%95%B0%E7%BB%84/ 做网页轮播图，或者音乐播放列表时经常要用到一组循环的数组，到最后一项返回第一项，第一项返回最后一项利用两次判断 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.loop_idx ];//返回元素 }; // 增加 loop_idx 然后返回新的当前元素 arr.next = function(){ this.loop_idx++; return this.current(); }; // 减少 loop_idx 然后返回新的当前元素 arr.prev = function(){ this. 剪贴板功能实现 https://blog.archai.space/p/%E5%89%AA%E8%B4%B4%E6%9D%BF%E5%8A%9F%E8%83%BD%E5%AE%9E%E7%8E%B0/ Tue, 07 Jul 2020 00:00:00 +0000 https://blog.archai.space/p/%E5%89%AA%E8%B4%B4%E6%9D%BF%E5%8A%9F%E8%83%BD%E5%AE%9E%E7%8E%B0/ 经常会用到指定内容的复制粘贴问题，用到document的execCommand 方法,为此，我将这个功能封装为一个简单的函数: 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.css({fontFamily: "'Microsoft YaHei', sans-serif",fontSize: "1.2rem",position: "fixed",top: "1rem",textAlign: "center", left: "50%",fontWeight: "bolder", borderRadius: ".5rem",marginLeft: "-8rem",width: "16rem",height: "3rem", lineHeight:"3rem", background: bgColor,boxShadow: "0 6px 10px -8px #000",color: fontColor, letterSpacing: "4px",boxSizing: "border-box",padding: "0 10px 0 10px", display: "none"}) if (language === "English") { tipEl. JavaScript瀑布流布局 https://blog.archai.space/p/javascript%E7%80%91%E5%B8%83%E6%B5%81%E5%B8%83%E5%B1%80/ Wed, 01 Jul 2020 00:00:00 +0000 https://blog.archai.space/p/javascript%E7%80%91%E5%B8%83%E6%B5%81%E5%B8%83%E5%B1%80/ 什么是瀑布流？一种图片在网页的布局方式，具体要求为：从页面第二行开始，后续图片跟在页面中最矮的那张图片后面用JavaScript怎么实现？为此我将整个过程封装为一个函数。 /*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> /*CSS部分*/ /*首先清空默认样式*/ #box{ position: relative; } .container{ float: left; } .container>.pic{ width: 200px; } .container>.pic>img{ width: 100%; } /*JS部分*/ /*loadFile.js(在window.onload之前执行，加载DOM树)*/ $(function () { function addImg(imgNum,eleID) { let container for (let i = 1; i < imgNum; i++) { container=$("<div class='container'><div class='pic'><img src='images/"+i+".jpg' alt=''></div></div>") $(eleID).append(container) } } addImg(109,"#box"); }) /*******************************************/ /*main.js(在$(function(){})之前执行，DOM树加载完毕 )*/ window.