标签搜索
搜索到
109
篇与
的结果
-
CSS动画 一. transform转换transform-origin(x,y)基位translate(x,y)拉伸scale(x,y)缩放rotate(Xdeg)旋转skew(xdeg,ydeg)倾斜二. transition过度transition-property 指定CSS属性的name，transition效果(all全部属性)transition-duration transition效果需要指定多少秒或毫秒才能完成transition-timing-function 指定transition效果的转速曲线(默认ease)transition-delay 定义transition效果延迟的时间三. @keyframes逐帧动画0-100%from（与 0% 相同）to（与 100% 相同）四. animation动画animation-name 规定需要绑定到选择器的 keyframe 名称。。animation-duration 规定完成动画所花费的时间，以秒或毫秒计。animation-timing-function 规定动画的速度曲线。(ease)animation-delay 规定在动画开始之前的延迟。animation-iteration-count 规定动画应该播放的次数。(infinite无限)animation-direction 规定是否应该轮流反向播放动画。五. box-shadow盒子阴影h-shadow 必需的。水平阴影的位置。允许负值v-shadow 必需的。垂直阴影的位置。允许负值blur 可选。模糊距离spread 可选。阴影的大小color 可选。阴影的颜色inset 可选。从外层的阴影（开始时）改变阴影内侧阴影六. text-shadow文字阴影h-shadow 必需。水平阴影的位置。允许负值。v-shadow 必需。垂直阴影的位置。允许负值。blur 可选。模糊的距离。color 可选。阴影的颜色。参阅 CSS 颜色值。 -
js继承 //ES6的类及继承 { class Test { constructor(obj) { this.name = obj.name; } action() { console.log('打豆豆!') } } class Test1 extends Test { constructor(obj) { super(obj); this.age = obj.age; } } let instance = new Test1({ name: '小米', age: '18' }); console.log(instance); } //ES5的类和继承(构造函数模式)) //实例的constructor指向当前对象的构造函数 es5的继承{ function Test(obj) { this.name ? this.name = obj.name : this.name = null; this.action = function() { console.log('打豆豆!'); } } function Test1(obj) { // Test.apply(this, arguments) this.age = obj.age; } //原型链继承(父类的实例作为子类原型) //优点: //简单 //实例是父类的实例也是子类的实例 //缺点: //无法向父级传参. //实例丢失constructor //无法实现多继承 Test1.prototype = new Test(); Test1.prototype.constructor = Test; var instance = new Test1({ name: '小米1', age: '18' }); console.log(instance) }
-
Html,CSS 可以进行省略的标签 不允许写结束标记的标签：area(定义图像映射中的区域)、base(为页面上的所有链接规定默认地址或默认目标)、br、col(为表格中一个或多个列定义属性值)、embed(定义嵌入的内容，比如插件--5)、hr、img、input、keygen、link、meta、param、source、track、wbr 可以省略结束标记的标签：li、dt、dd、p、rt、optgroup、option、colgroup、thread、tbody、tr、td、th 可以完全省略的标签：html、head、body、colgroup、tbody新增的标签 section:页面中的一个内容区块，入章节、页面、页脚或页面的其他部分、可以和h1、h2...等标签结合起来使用，表示文档结构。 article:表示页面中一块与上下文不相干的独立内容，比如一篇文章。 aside:定义 article 以外的内容。aside 的内容应该与 article 的内容相关。 header:页面中的内容区块或整个页面的标题。 footer:页面中的内容区块或整个页面的脚注。 hgroup:页面中的内容区块或整个页面的标题进行组合。 nav:导航链接的部分。 figure:规定独立的流内容(图像、图表、照片、代码等等，内容应该与主内容相关，但如果被删除，则不应对文档流产生影响)。 video:视频。exp:视频 audio:音频。 embed:用来嵌入内容(包括各种媒体)。 mark:变颜色，关注。 progress:进度条。exp: time:定义日期或时间，或者两者。这个标记是给收索引擎用的，引擎会根据这个标注知道这块表示一个时间。有个属性为pubdate，当引擎读到时就知道这块中的datatime中的值就是这篇文章的发布时间，而在这时间中有两个特殊的字符T和Z。T表示日期和时间的分隔符，Z表示时间的标准格式。exp: datalist:定义选项列表。与 input 元素配合使用该元素，来定义 input 可能的值。exp: output:exp: 0100+=全局属性 data-type:自定义属性。 hidden:隐藏，单标签。 spellcheck:对输入内容进行语法纠错。exp: tabindex:tab键顺序。 contenteditable:对内容进行修改。exp: 让整个文本都可编辑：//off关闭,on:可编辑meta viewport相关<!DOCTYPE html> H5标准声明，使用 HTML5 doctype，不区分大小写 <head lang=”en”> 标准的 lang 属性写法 <meta charset=’utf-8′> 声明文档使用的字符编码 <meta http-equiv=”X-UA-Compatible” content=”IE=edge,chrome=1″/> 优先使用 IE 最新版本和 Chrome <meta name=”description” content=”不超过150个字符”/> 页面描述 <meta name=”keywords” content=””/> 页面关键词 <meta name=”author” content=”name, email@gmail.com”/> 网页作者 <meta name=”robots” content=”index,follow”/> 搜索引擎抓取 <meta name=”viewport” content=”initial-scale=1, maximum-scale=3, minimum-scale=1, user-scalable=no”> 为移动设备添加 viewport <meta name=”apple-mobile-web-app-title” content=”标题”> iOS 设备 begin <meta name=”apple-mobile-web-app-capable” content=”yes”/> 添加到主屏后的标题（iOS 6 新增） 是否启用 WebApp 全屏模式，删除苹果默认的工具栏和菜单栏 <meta name=”apple-itunes-app” content=”app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL”> 添加智能 App 广告条 Smart App Banner（iOS 6+ Safari） <meta name=”apple-mobile-web-app-status-bar-style” content=”black”/> <meta name=”format-detection” content=”telphone=no, email=no”/> 设置苹果工具栏颜色 <meta name=”renderer” content=”webkit”> 启用360浏览器的极速模式(webkit) <meta http-equiv=”X-UA-Compatible” content=”IE=edge”> 避免IE使用兼容模式 <meta http-equiv=”Cache-Control” content=”no-siteapp” /> 不让百度转码 <meta name=”HandheldFriendly” content=”true”> 针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑莓 <meta name=”MobileOptimized” content=”320″> 微软的老式浏览器 <meta name=”screen-orientation” content=”portrait”> uc强制竖屏 <meta name=”x5-orientation” content=”portrait”> QQ强制竖屏 <meta name=”full-screen” content=”yes”> UC强制全屏 <meta name=”x5-fullscreen” content=”true”> QQ强制全屏 <meta name=”browsermode” content=”application”> UC应用模式 <meta name=”x5-page-mode” content=”app”> QQ应用模式 <meta name=”msapplication-tap-highlight” content=”no”> windows phone 点击无高光 设置页面不缓存 <meta http-equiv=”pragma” content=”no-cache”> <meta http-equiv=”cache-control” content=”no-cache”> <meta http-equiv=”expires” content=”0″>css盒子模型标准盒子模型(W3C), 盒子的总宽度 = content+padding+border+margin.怪异盒子模型(IE), 盒子的总宽度 = content+margin 注(content=content+padding+border).将box-sizing:conten-box;(标准盒子模型).将box-sizing:border-box;(怪异盒子changs模型).css优先级确定每个选择器都有权值，权值越大越优先继承的样式优先级低于自身指定样式！important优先级最高 js也无法修改权值相同时，靠近元素的样式优先级高 顺序为内联样式表（标签内部）> 内部样式表（当前文件中）> 外部样式表（外部文件中）CSS清理浮动在浮动元素下方添加一个div,在清理浮动clear:both.在父级元素上添加overflow:hidden.给父级元素设置高度.给父级添加为元素(after,before),利用为元素去清理浮动给父级元素添加dispaly:inline-block;(margin: 0 auto居中方式失效)CSS垂直居中给父级添加一个为元素(before), content为空,display:inline-block; height: calc(50% - 元素高度的一半); vertical-algin:middle;给父元素添加绝对定位(absolute),给需要居中的盒子添加相对定位(relative),top:0;right:0'bottom:0;left:0;overflow:auto;
-
节流函数和函数去抖 //节流函数(预先设定一个执行周期，当调用动作的时刻大于等于执行周期则执行该动作，然后进入下一个新周期。) //该方法主要利用两次函数执行的时间差判断 function throttle(action, delay) { var last = 0; //上次执行的时间 return function() { var curr = +new Date(); ///获取当前时间 if (curr - last > delay) { //如果两次函数执行的时间间隔大于指定的值，即可执行 action.apply(this, arguments) //执行时把对应的参数传递下去 last = curr //保存上次执行的时间 }; }; } //去抖函数(当调用动作n毫秒后，才会执行该动作，若在这n毫秒内又调用此动作则将重新计算执行时间，如此往复，直到不再调用该动作，函数才会执行。) //该方法利用的是延迟调用，在指定时间内如果再次执行，那么上次的定时器将被清理，直到指定时间内不再调用，函数才会被执行！ function debounce(action, idle) { var last = null; return function() { var ctx = this; var args = arguments; clearTimeout(last); last = setTimeout(function() { action.apply(ctx, args) }, idle); } }通常时间设为16.7sm,由于主流的屏幕刷新率都在60hz，因此渲染一帧的事件就必须控制在16.7ms内才能保证不掉帧。也就是说每一次渲染都要在 16.7ms
-
wow动画 <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>WOW Demo</title> <link rel="stylesheet" href="css/libs/animate.css"> <link rel="stylesheet" href="css/site.css"> <style> .wow:first-child { visibility: hidden; } </style> <!--[if IE]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> </head> <body> <div id="container"> <header> <h1>WOW.js Demo</h1> </header> <div id="main"> <!-- wow rollIn 从左到右、顺时针滚动、透明度从100%变化至设定值 wow bounceIn 从原位置出现，由小变大超出设定值，再变小小于设定值，再回归设定值、透明度从100%变化至设定值 wow bounceInUp 从下往上、窜上来以后会向上超出一部分然后弹回去、透明度为设定值不变 wow bounceInDown 从上往下、掉下来以后会向下超出一部分然后弹跳一下、透明度为设定值不变 wow bounceInLeft 从左往右、移过来以后会向右超出一部分然后往左弹一下、透明度为设定值不变 wow bounceInRight 从右往左、移过来以后会向左超出一部分然后往右弹一下、透明度为设定值不变 wow slideInUp 从下往上、上来后固定到设定位置、透明度为设定值不变（up是从下往上）（如果元素在最下面，会撑开盒子高度） wow slideInDown 从上往下、上来后固定到设定位置、透明度为设定值不变 wow slideInLeft 从左往右、上来后固定到设定位置、透明度为设定值不变（left却是从左往右） wow slideInRight 从右往左、上来后固定到设定位置、透明度为设定值不变 wow lightSpeedIn 从右往左、头部先向右倾斜，又向左倾斜，最后变为原来的形状、透明度从100%变化至设定值 wow pulse 原位置放大一点点在缩小至原本大小、透明度为设定值不变（配合动画执行次数属性效果更佳） wow flipInX 原位置后仰前栽、透明度从100%变化至设定值 wow flipInY 原位置左右旋动、透明度从100%变化至设定值 wow bounce 上下抖动、透明度为设定值不变（配合动画执行次数和动画持续时间属性可以实现剧烈抖动亦或是慢慢抖） wow shake 左右抖动、透明度为设定值不变（配合动画执行次数和动画持续时间属性可以实现剧烈抖动亦或是慢慢抖） wow swing 从右往左、头部先向右倾斜，又向左倾斜，最后变为原来的形状、透明度为设定值不变 wow bounceInU 原位置不变、直接从不显示到显示（无过过渡效果） wow wobble 原位置不变、类似于一个人站在那左右晃头、透明度为设定值不变 --> <section class="wow zoomOutDown" style="background-color: #f1c40f;" data-wow-iteration="infinite" data-wow-delay="1s"></section> <section class="wow pulse" style="background-color: #e74c3c;" data-wow-iteration="infinite" data-wow-duration="1500ms"></section> <section class="section--purple wow slideInRight" data-wow-delay="1s"></section> <section class="section--blue wow bounceInLeft" data-wow-offset="300"></section> <section class="section--green wow slideInLeft" data-wow-duration="4s"></section> <!-- data-wow-duration：更改动画持续时间 data-wow-delay：动画开始前的延迟 data-wow-offset：开始动画的距离（与浏览器底部相关） data-wow-iteration：动画的次数重复 --> </div> </div> <script src="dist/wow.js"></script> <script> wow = new WOW( { animateClass: 'animated', //触发CSS动画的类名 boxClass: 'wow', //动画元素css类（默认是哇） offset: 100, //显示到底部距离 mobile: true, //触发移动设备上的动画（默认为true） live: true, //对异步加载的内容执行操作（默认为true） scrollContainer: 'window', //可选的滚动容器选择器，否则使用window callback: function(box) { //每次动画启动时都会触发回调 //传入的参数是动画的DOM节点 console.log(box) } }); wow.init(); //初始化 </script> </body> </html>
-
ES6生成器函数 //生成器函数以*和普通函数区分 function* gen(a){ yield a+1; yield a+2; } let nbm = gen(0); console.log(nbm.next()); //{value: 1, done: false} console.log(nbm.next()); //{value: 2, done: false}调用 Generator 函数，会返回一个内部指针（即遍历器 ）g 。这是 Generator 函数不同于普通函数的另一个地方，即执行它不会返回结果，返回的是指针对象。调用指针 g 的 next 方法，会移动内部指针（即执行异步任务的第一段），指向第一个遇到的 yield 语句，上例是执行到 a + 2 为止，再次调用g的next的方法，内部指针指向下个yield语句。next传参function* gen(){ let a = yield 1; if(a){ yield a+2; } } let nbm = gen(0); console.log(nbm.next()); //{value: 1, done: false} console.log(nbm.next(12)); //{value: 14, done: false}还可以将参数传递给 next 并使用该参数修改生成器的状态，以创建更高级的生成器。 next 将成为之前执行的 yield 表达式的结果值next 方法的作用是分阶段执行 Generator 函数。每次调用 next 方法，会返回一个对象，这个对象就是具有两个属性（done (done=false) 和 value (value=operand)）的 IteratorResult 对象。value 属性是 yield 语句后面表达式的值，表示当前阶段的值；done 属性是一个布尔值，表示 Generator 函数是否执行完毕，即是否还有下一个阶段。这里说明了Generator 函数可以暂停执行和恢复执行，这是它能封装异步任务的根本原因。
-
debuger for chrome { // 使用 IntelliSense 了解相关属性。 // 悬停以查看现有属性的描述。 // 欲了解更多信息，请访问: https://go.microsoft.com/fwlink/?linkid=830387 "version": "0.2.0", "configurations": [{ "type": "node", "request": "launch", "name": "启动程序", "program": "${workspaceFolder}\\build\\dev-server.js" }, { "type": "chrome", "request": "launch", "name": "chrome", "file": "${file}" }]}// version : 你定义这个配置文件的版本，生成的时候默认是0.2.0// configuration：配置域// name：配置文件的名字，可以自己起// type：调试的类型，node是vscode本身就支持，其他就需要下载插件了(chrome)// request : 配置文件的请求类型，有launch和attach两种，launch是需要服务器的需要配置url，这里我就用的它，attach就比较麻烦了，因为配置launch也能用，所以我就没有配置attach了// url:这个是chrome插件带的，指定访问的链接，到这里我觉得就个缺点了，url只能配置死链接，就算用预定义变量也不能做到多项目自动识别要打开的HTML，可能是我没有发现其他的预定义变量，如果有大神知道，欢迎在评论里留言// webRoot：也是chrome插件带的，指定根目录或者执行文件// ${workspaceRoot}:就是你打开vscode读取的项目目录// sourceMaps:默认是启用的，对于打包的调试，大神们就必须开启了// userDataDir：临时目录,专门保存调试过程产生的东西，这个字段是为了重新打开一个浏览器窗口，不会强制关闭已经打开的浏览器// ${workspaceRoot}：VSCode中打开文件夹的路径// ${workspaceRootFolderName}：VSCode中打开文件夹的路径, 但不包含"/"// ${file} ：当前打开的文件// ${relativeFile}：当前打开的文件,相对于workspaceRoot// ${fileBasename} ：当前打开文件的文件名, 不含扩展名// ${fileDirname} ：当前打开文件的目录名// ${fileExtname}：当前打开文件的扩展名// ${cwd} ：当前启动时的工作目录/*注意：不管选用哪个方式，指定一个文件都是必须的。如果是url，webRoot选项用于将url解析到磁盘上的文件。比如写localhost/app.js会解析到工作目录里面的app.js文件。本地的话，也就是file，直接设置要打开的html文件路径，${workspaceFolder}意思就是当前工作目录，如果你写了${workspaceFolder}/index.html,就必须确保在相应的工作目录下有这个index.html文件才行。如果找不到这个文件，那么控制台是不会启动成功的。*/
-
手写一个排序算法 一. 冒泡排序 let arr = [3,1,2,8,4,90]; for(let i = 1; i<arr.length; i++){ //-1是因为最后一个元素无需对比 for(let j = 0; j<arr.length-i; j++){ if(arr[j]>arr[j+1]){ arr[j+1] = arr[j] + arr[j+1]; arr[j] = arr[j+1] - arr[j]; arr[j+1] = arr[j+1] - arr[j]; } } }二. 插入排序法 let arr = [3,1,2,8,4,90]; for(let i = 0; i<arr.length-1; i++){ for(let j = i+1; j<arr.length; j++){ if(arr[i]>arr[j]){ arr[j] = arr[i] + arr[j]; arr[i] = arr[j] - arr[i]; arr[j] = arr[j] - arr[i]; } } }
-
-
JS的适配模式 在使用第三方库或修改别人代码时, 一个类上的静态方法不能满足你使用时, 一般不建议修改源码. 这时候就可以使用适配模式解决.接口适配例:const googleMap = { show: function () { console.log('开始渲染谷歌地图'); } }; const baiduMap = { display: function () { console.log('开始渲染百度地图'); } }; const baiduMapAdapter = { show: function(){ ... //做相应的处理 return baiduMap.display(); } }; renderMap(googleMap); // 输出：开始渲染谷歌地图 renderMap(baiduMapAdapter); // 输出：开始渲染百度地图参数适配在很多NPM包,和jq插件中也使用这种方式class SDK { systemInf(config) { let defaultConfig = { brand: null, //手机品牌 os: null, //系统类型： Andoird或 iOS carrier: 'china-mobile', //运营商，默认中国移动 language: 'zh', //语言类型，默认中文 network: 'wifi', //网络类型，默认wifi } //参数适配 for( let i in config) { defaultConfig[i] = config[i] || defaultConfig[i]; } //dosomething..... } }数据适配在前端使用UI库时, 所需的数据结构早由UI开发团队设定, 有时候后端返回的数据结构是无法使用的,这时候就得重构数据结构.[ { "day": "周一", "uv": 6300 }, { "day": "周二", "uv": 7100 }, { "day": "周三", "uv": 4300 }, { "day": "周四", "uv": 3300 }, { "day": "周五", "uv": 8300 }, { "day": "周六", "uv": 9300 }, { "day": "周日", "uv": 11300 } ] //后端数据 //但是Echarts需要的x轴的数据格式和坐标点的数据是长下面这样的: ["周二", "周二", "周三"， "周四"， "周五"， "周六"， "周日"] //x轴的数据 [6300. 7100, 4300, 3300, 8300, 9300, 11300] //坐标点的数据 //这里使用一个适配器，将后端的返回数据做适配： //x轴适配器 function echartXAxisAdapter(res) { return res.map(item => item.day); } //坐标点适配器 function echartDataAdapter(res) { return res.map(item => item.uv); }总结该模式属 "亡羊补牢", 在前期开发尽量避免
