Javascript

在写小demo的过程中，经常需要把某个文件夹的图片文件的路径给引入，除非全部重命名成有序的数字，不然不好处理，这就用到了node中的fs和path模块，还没学… 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 const path=require("path"); const fs = require('fs'); fs.stat('../images',(err)=>{//图片文件所在目录 if (err)return; var result='{' fs.readdir("../images",(err,data)=>{//图片文件所在目录 for(var i=0;i<Object.keys(data).length;i++){ let ImgPath="\"images/"+data[i]+"\""; result+="\""+i+"\":"+ImgPath+","; } result=result.substring(0,result.length-1); let length="\""+"length"+"\""+":"+"\""+Object.keys(data).length+"\""//文件数量 result+=","+length+'}' fs.writeFile("../data/imgPath.json",result,(err)=>{ if(err)return; console.log("写入文件成功，一共"+Object.keys(data).length+"个文件"); }); }); }); 生成的文件大概就是这样的一个json数据 1 {"0":"images/1.jpg","1":"images/10.jpg","2":"images/100.jpg","3":"images/101.jpg","4":"images/102.jpg","5":"images/103.jpg","6":"images/104.jpg","7":"images/105.jpg","8":"images/106.jpg","9":"images/107.jpg","10":"images/108.jpg","length":"109"}

什么是瀑布流？ 一种图片在网页的布局方式，具体要求为：从页面第二行开始，后续图片跟在页面中最矮的那张图片后面 瀑布流布局 用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.通过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?...