- 博客(43)
- 收藏
- 关注
RSS订阅原创 npm ci时 报错puppeteer
起因是package-lock.json 与本地冲突，上网查了一下项目有package-lock.json（作用是固定各种依赖版本）文件时说可以使用npm ci （会删除node_module重新安装），然后执行此命令时报错查了很久这个命令可以解决此问题export PUPPETEER_SKIP_CHROMIUM_DOWNLOAD=true && npm ci 顺便也了解到一点puppeteer的作用它可以解决单页面应用的预渲染问题，vue预渲染可以用prerender-sp.
2020-05-29 11:02:42
1014
原创 Mac系统下webstorm的常用快捷键
格式化代码： Option+Command+L选中多个相同字符： Ctrl + G删除光标所在行： Command + Y删除光标所在单词： Command + W重新开始一行： Shift + Enter
2018-07-25 17:15:54
545
原创 render在组件中的应用
——–html——–<div id="app"> <heading :level="selected">Hello world!</heading> <select v-model="selected"> <option value="1">h1&am
2018-07-16 15:04:33
489
原创 this 的指向
<script type="text/javascript"> var color="红色"; var myobj={ color:"蓝色" } function showColor(){ alert(this.color) //this 指向调用它的那个对象 }
2018-03-20 09:26:52
202
转载 面向对象编程的几种常见设计模式
<script>//前言：由同一个构造函数创造出来的多个对象，会有不同的地址，所以不会是相等的。//单例模式：确保某个类(构造函数)只有一个实例，且自行实例化并向整个系统提供这个实例。 function Bar(){ if(!Bar.inst){ //判断是不是已经存在这个实例 Bar.inst = { name
2018-03-15 11:43:51
1341
原创 一道题，用以下代码输出“好好学习，天天向上”
<script>var Ltest=function(i){ this.get=function(success,error){ return[function(){ var obj = { name:"天天向上" ...
2018-03-13 17:11:56
4303
原创 词法作用域和动态作用域
//JS环境是词法作用域，函数在声明时，其所处的位置已经决定了作用域,无论这个函数在哪里被调用，都不会改变。 var a = 6; function foo() { console.log( a ); } function bar() { var a = 3; foo(); } bar() /...
2018-03-08 11:34:48
154
翻译 for循环中的let 和 var
for(var i=0;i<5;i++){ setTimeout(function(){ console.log(i); },0) }// 结果 5 5 5 5 5for(let i=0;i<5;i++){ setTimeout(function(){ console.lo...
2018-03-07 17:15:38
5301
3
翻译 webpack的基本使用
简介：webpack是一个现代JavaScript应用程序的模块打包器。四个核心概念：入口（entry）、出口（output）、模块加载（loader）、插件（plugins）基于node环境：1.npm init //创建package.json；2.npm install --save-dev webpack@2.6.0 //（--save-dev是把依赖信息写入pa
2018-01-15 13:52:17
167
原创 JS对象的深浅拷贝
深浅拷贝是针对不同类型的数据进行对应的操作。存储在栈中的数据，如String，Boolean,Number等类型数据使用浅拷贝即可，像object，array这种存储在堆中的数据，使用浅拷贝仅仅拷贝的是存储在栈中的地址名，并没有在堆中开辟新的内存，指向的还是同一个对象。//浅拷贝适用于非引用类型的(字符数值等)拷贝 var obj1={ age:15,
2018-01-11 10:54:05
260
原创 vue 组件之间的通信（父子、非父子）
//子组件向父组件传递数据<div id="app"> <test-child receive-child="标题"></test-child></div> - 在子组件test-child使用 props 声明: props:['receiveChild'] 然后父组件就可以向trans里传递数据，动态数据需加冒号 :recei...
2018-01-09 17:48:19
243
原创 vue-cli 引用axios
1.先在项目中使用命令行工具下载axios : npm install axios --save//有时候不成功，使用 npm install axios --save -dev 就成功了，我也不知道什么区别2.然后在 main.js中引入：import axios from 'axios';Vue.prototype.$ajax=axios; //这里的写法和别的插件不一样，不是...
2018-01-05 14:14:33
291
原创 vue.js使用select切换图片
div id="app"> div class="pic"> img :src=imgsrc> div>第1张第2张第3张 option无法添加事件--> select v-model="selected" @change="changeimg(parseInt(selected))"> option value="1">第一张o
2018-01-04 17:56:49
2808
转载 vue学习之路（1）——搭建vue脚手架（vue-cli）
准备的环境和工具 1. 首先安装node.js，官网：https://nodejs.org/en/ win+r 输入cmd 打开 命令行 输入 **node -v** 出现相应的版本号，则说明安装成功。此时已经自带npm（包管理工具） 2. 安装淘宝镜像（cnpm），打开命令行工具，输入：**npm install -g cnpm --registry= https://registry
2018-01-02 11:42:47
894
转载 移动端开发相关
//自适应(function(doc, win) { var docEle = doc.documentElement; var fn = function() { var width = docEle.clientWidth; docEle.style.fontSize = 100 * (width / 750) + "px"; //假设设计图...
2017-12-05 16:51:26
320
原创 过滤字母，只能输入数字的设置
<form method="get"> <textarea rows="10" cols="30" style="ime-mode:disabled"></textarea> <!--style="ime-mode:disabled"禁止输入法（谷歌不支持）--></form><script> window.onload=function(){ va
2017-12-01 09:54:40
323
原创 阻止/设置表单提交
<form id="fm" name="thef" method="get"> <!--不设置action默认提交到当前页面--> <input type="text"/> <input id="sub" type="submit" value="submit"> </form><script type="text/javascript">
2017-11-29 16:45:20
216
原创 CSS3翻转效果
<!DOCTYPE html><html><head> <title>翻转效果</title> <style type=text/css> .container{ width: 500px; height: 500px; border: 1px solid #3c3c3c;
2017-11-28 16:22:09
212
翻译 获取地址栏的search
https://s.taobao.com/search?name=list&age=23;<script> function getSearch(){ var args=[]; var str=location.search.length>0?location.search.substring(1):""; var arrs=str.split
2017-11-28 11:51:39
388
翻译 javaScript闭包
//函数记住并访问其所在的词法作用域，叫做闭包现象，而此时函数对作用域的引用叫做闭包。<script > var data = []; for(var k = 0; k < 3; k++){ //for循环不是在一个函数中，所以k是全局变量，在for循环结束的时候k=3； (function(k){ da...
2017-11-28 11:37:01
211
翻译 事件对象（二）
W3C方法，mouseover事件和mouseout事件通过relatedTarget获取鼠标从哪个元素移入到当前元素，或移到哪个元素，IE中是通过fromElement和toElement获取（需要判断一下事件）。 e.type 判断是什么事件 e.target判断调用事件的对象(IE中用srcElement) 获取event兼容写法： e=e||window.event
2017-11-27 23:10:50
184
原创 获取DOM元素尺寸及鼠标位置
clientX，clientY，获取鼠标在可视区域中的坐标（和页面长度无关）； screenX，screenY，获取鼠标相对于电脑屏幕左边和上边的坐标；
2017-11-21 23:16:31
663
原创 事件对象
当触发某个事件时，会产生一个事件对象，这个对象包含所有与事件有关的信息，一般称作event对象，是浏览器通过函数把这个对象作为参数传进来的。普通函数中不存在事件对象！“对于mouseup和mousedown事件，其event对象中存在一个button属性，表示按下或释放的是哪个键（左键/中间/右键），比如：document.onmousedown=function(e){ e=e||win
2017-11-21 22:55:28
200
原创 javascript的三种事件模型
*内联模型，写在标签里，事件作为标签的属性存在，例：*<button onclick="alert('hello')">点击</button>*脚本模型：*<button>点击</button><script>window.onload=function(){ var btn=document.getElementByTagName('button'); btn.onclic
2017-11-21 21:16:58
740
翻译 fullpage.js——回调函数
//动画回调函数 **afterLoad:**function(link,index){ //到达页面的函数 if(index==1){ //判断到达的页面，index对应section $(".onec").find("h1").fadeIn(1000); //.onec是自己取的
2017-11-14 14:47:06
1346
翻译 fullpage.js插件——slide设置
引入jquery.js，fullpage.js，fullpage.css文件<body> <div id="cont"> <div class="section"> <p>ONE PAGE</p> </div> <div class="section">
2017-11-14 14:13:21
2074
翻译 fullpage.js插件——导航
<body> <div id="container"> <div class="section"> <h1>Where there's a will</h1> </div> <div class="section"> <h1>there is a w
2017-11-14 11:59:19
312
翻译 fullpage.js插件使用——菜单绑定
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>菜单绑定</title> <style type="text/css"> *{padding: 0;margin: 0;} li{list-style: none;}
2017-11-14 11:36:55
1617
原创 javaScript行内样式的获取及注意事项
<div id="txt" style="color:red;font-size:100px;float:left"><div><script> window.onload=function(){ var test=document.querySelect("#txt"); //获取字体，需用驼峰式写法 test.style.fontSize
2017-11-13 22:51:54
798
原创 innerHTML和innerText
<div id=study> <span>学习好累</span></div>//js代码var study=document.querySelector("#study"); //IE8+支持此方法study.innerHTML="<b>睡觉吧</b>" //结果:**睡觉吧**study.innerText="<b>睡觉吧</b>" //结果:<b>睡觉吧</b>//
2017-11-09 22:24:15
175
原创 使用scrollIntoView()进行内容定位
<p id="txt">假设此段落需滚动才能看见</p>window.onload=function(){ document.getElementById("txt").scrollIntoView(); //此方法会让页面一进来就能看见txt段落，即一开始就定位到此段落}
2017-11-09 21:43:47
3260
原创 javaScript获取或者设置css属性
//设置或者获取css属性function css(elem,attr,val){ if(arguments.length==2){ //arguments是实参的个数，length是形参的个数 return getStyle(elem,attr); //getStyle见上篇文章 }else if(arguments.length==3){
2017-11-09 11:19:51
282
原创 JavaScript获取css属性的兼容写法
//注意：IE8以下不支持querySelector也不支持getElementsByClassNamevar imgbox=document.querySelector("#box"); function getStyle(elem,attr){ if(window.getComputedStyle){ //W3C
2017-11-09 11:16:10
260
原创 JavaScript创建文本节点
<div id="text"></div><script> window.onload=function(){ var textcon=document.getElementById("text"); var text1=document.createTextNode("你好"); //一个节点 var text2=document.creat
2017-11-08 23:15:58
1183
原创 Node节点类型的判断。
<div id="div1">我是html，重点看js</div>window.onload=function(){ var div=getElementById("div1"); //判断div节点类型 if(div.nodeType==1){ alert("我是元素节点") } if(div.childNodes[0].nodeType==
2017-11-08 21:37:33
2402
原创 css万能清楚浮动
万能清楚浮动方法：.clearfix:after{ content:""; display:block; height:0; clear:both;}.clearfix{ zoom:1;}zoom:1;属性是IE浏览器的专有属性，Firefox等其它浏览器不支持。它可以设置或检索对象的缩放比例。除此之外，它还有
2017-07-28 14:47:52
287
原创 写网页3级下拉导航出现的问题
子元素和父元素都不设宽度，如果子用了定位，超出父元素的宽度将会自动换行，如果此时子元素或者父元素任意元素设置了宽度，就不会自动换行。但是如果想三级标题都不设置宽度，让这三级标题都自适应该怎么做呢？
2017-07-28 12:00:04
236
原创 模拟后端存储数据，实现表单的注册和登录
将信息存储到本地浏览器cookie中，模拟表单注册和登录。先把表单中需要记录的信息（用户名，密码等）存储在一个变量中，用localStorage.setItem('key',value); key是一个自定义的关键字，value是变量注册页面：先把表单中需要记录的信息（用户名，密码等）存储在一个变量中，用localStorage.setItem('key',value);
2017-07-24 15:54:36
576
原创 CSS3中的文字特效
-webkit-background-clip:text; //设置背景的显示范围，有文字的地方才显示背景 （这是webkit内核浏览器私有属性）；-webkit-text-fill-color:transparent;//设置文字填充为透明色；利用上面两个属性，再设置背景色（背景色属性要在这两个属性前面），可以给让背景只显示在文字上，做出剪切蒙版的效果；-webkit-te
2017-07-11 14:09:12
650
原创 html中的标签注意事项
在代码编辑时，若内联元素（如标签、标签）后面使用enter键、space键或者tab键，在浏览器运行的时候这些标签左右都会产生空白间隔，解决办法是将这些内联元素放入一个父元素里，把父元素的font-size:0，然后再分别给这些内联元素设置字体大小。或者在编辑器里不使用enter等键（这样代码会很乱）。
2017-07-09 13:15:58
342
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人