Terry_wn-CSDN博客

转载 2018前端学习知识点总结

前端越发展越复杂，知识点越来越庞杂。前端要学习三个部分：HTML，CSS，JavaScript（简称JS），因此首先明确三个概念： HTML负责结构，网页想要表达的内容由html书写。 CSS负责样式，网页的美与丑由它来控制 JS负责交互，用户和网页产生的互动由它来控制。初级阶段（静态网页制作、JS编程入门）1.Photoshop入门图像处理基础知识、图像处理基础知识、...

2018-08-20 11:10:54 331 1

转载史上最全的前端资源大汇总

原文链接**前言目录入门类 HTML 5 部分 CSS 3 部分 JQuery Angular JS React Vue Node JS JS Template 移动端移动端 API 综合 API 其他 API 综合类工具类综合效果搜索平台团队 BLOG 开发中心 ECMAScript D3 RequrieJS SeaJS Less ...

2018-08-14 14:01:14 185

转载 ES6这些就够了

接下来我们就聊聊ES6那些可爱的新特性吧！1.变量声明const和let在ES6之前，我们都是用var关键字声明变量。无论声明在何处，都会被视为声明在函数的最顶部(不在函数内即在全局作用域的最顶部)。这就是函数变量提升例如: function aa() { if(flag) { var test = 'hello man' } else { ...

2018-08-11 20:41:25 195

转载如何成为一名卓越的前端工程师

最近我收到一封读者来信让我陷入了思考，信是这么写的： Hi Philip，您是否介意我问您是如何成为一名卓越 (great) 的前端工程师的？对此您有什么建议吗？我不得不承认，我很惊讶被问这样的问题，因为我从来不觉得自己是个很卓越的前端工程师。甚至我入行头几年时并不认为自己可以做好这一行。我只确定自己比自己想象中还才疏学浅，而且大家面试我的时候都不知道从何问起话虽这么说，我到现在...

2018-08-11 20:08:03 110

不管是刚毕业踏入社会的还是在职场久经奋战的，都经历过被面这一环节。当然也有很多同学开始在面人，为自己的团队选择优秀的血液。而我也是属于这一类，这些年都有在帮公司或朋友的团队物色人才和面试同学。今年在手淘也一样，在给同学面试过程中，让我开始在思考，而且思考了很久，所以这几天静下来写了这篇文章，希望这篇文章对于刚毕业的大学生或者还在继续参加工作面试的同学有所帮助。在这篇文章中，将不涉及任何的面试题...

2018-08-11 20:00:19 650

原创 js自建readAsBinaryString方法，兼容ie11该方法报错，对象不支持“readAsBinaryString”属性或方法

兼容ie11报错，对象不支持“readAsBinaryString”属性或方法vue项目可以直接在main.js加入下方代码if (typeof(FileReader.prototype.readAsBinaryString) !== "function") { FileReader.prototype.readAsBinaryString = function (fileData) { var binary = ""; var pt = this;

2021-03-12 18:20:53 1710 1

原创 @babel/polyfill的改动，兼容ie11浏览器

// 安装[email protected] 和 regenerator-runtimenpm install --save core-js@3npm install --save regenerator-runtime// babel.config.jspresets: [ ["@babel/preset-env", { useBuiltIns: "entry", // or "usage" corejs: 3, }]]// 入口文件main.js最上面import "co

2021-03-10 14:52:37 893

原创关于 vue 不能 watch 数组变化和对象变化的解决方案

vue 无法监听数组变化的情况利用索引直接设置一个数组项时，例如：arr[indexOfItem] = newValue;修改数组的长度时，例如：arr.length = newLength;vue 无法监听数组变化的解决方案set方法： this.$set(arr, index, newVal);splice方法： this.arr.splice(index, number, newVal);临时变量方法：let temp = [...this.arr]; temp[index] = n

2021-01-19 18:04:55 332

原创前端js搜索

/**检查一个字符串是否包含在另一个字符串里,并且首字符相同 * i:计算机科学与技术 * j:计科 * 返回true * */ function checkStrContain(i, j) { if(!i || !j){ return false; } if(i.charAt(0) != j.charAt(0)){ return false; }

2020-09-04 10:45:29 179

原创 vue.config.js常用用配置

const path = require("path");const resolve = function(dir) { return path.join(__dirname, dir);};module.exports = { publicPath: process.env.NODE_ENV === "production" ? "./" : "./", outputDir: "dist", assetsDir: "static", lintOnSave: true, // 是

2020-08-21 15:24:34 832

转载 js递归

代码function getParent(data2, id) { let arrRes = []; // 如果非数组直接返回 if (data2.length === 0) { if (id) { arrRes.unshift(data2) } return arrRes; } const rev = (data, nodeId) => { for (let i = 0;

2020-07-01 17:07:40 99

原创 JS递归遍历树结构

function getArray(data,name){ for (var i in data) { console.log('i',i); console.log('datai',data[i].children); if (data[i].name == name) { console.log(data[i]); break; } else { getArra

2020-07-01 16:42:15 1363

转载前端CSS，JS，PS开发技巧

灵活运用CSS开发技巧CSS请戳这里，持续更新灵活运用JS开发技巧JS请戳这里，持续更新灵活运用PS切图技巧PS请戳这里，持续更新

2019-12-30 13:59:49 169

原创解决移动端弹出键盘时遮挡输入框

一、解决移动端弹出键盘时遮挡输入框方法1、Element.scrollIntoView()； // 让当前的元素滚动到浏览器窗口的可视区域内方法2：Element.scrollIntoViewIfNeeded();二、微信打开网页键盘弹起后页面上滑，导致弹框里的按钮响应区域错位$("input").blur(function () { $("html,body").anima...

2019-04-26 14:09:23 3883

原创 js数字补0操作

const addZero1 = (num, len = 2) => (`0${num}`).slice(-len)const addZero2 = (num, len = 2) => (`${num}`).padStart(len , '0')addZero1(3) // 03addZero2(32,4) // 0032

2019-04-18 16:47:50 2512

原创改变PC的滚动条

/*定义滚动条高宽及背景高宽分别对应横竖滚动条的尺寸*/ ::-webkit-scrollbar{ width: 4px; height: 4px; } /*定义滚动条轨道内阴影+圆角*/ ::-webkit-scrollbar-track{ -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2); ...

2019-04-16 11:16:50 255

原创取消input/select等选中后的高亮样式

outline: none;-webkit-tap-highlight-color: rgba(0,0,0,0);

2019-04-12 12:21:01 3913

原创滚动穿透的解决方案

在移动端中，如果我们使用了一个固定定位的遮罩层，且其下方的dom结构的宽度|高度超出屏幕的宽度|高度，那么即使遮罩层弹出后铺满了整个屏幕，其下方的dom结构依然可以滚动，这就是大家所说的“滚动穿透”。而且经常是你在pc模拟器上没有问题，但是真机打开就一定会出现。方案：body滚动 + 弹层内部滚动[js-检测touchmove的target]简单粗暴，一针见血：谁能动谁动，谁不能动就禁止to...

2019-03-21 14:18:43 231

原创 swiper边缘抵抗力resistanceRatio和触摸比例touchRatio和禁止切换noSwiping

1.抵抗率。边缘抵抗力的大小比例。值越小抵抗越大越难将slide拖离边缘，0时完全无法拖离。resistanceRatio : 0.9,2.触摸比例。触摸距离与slide滑动距离的比率。触摸距离与slide滑动距离的比率。默认为1，按照1:1的触摸比例滑动。设置为0时，完全无法滑动touchRatio : 0.5,3.禁止切换。设为true时，可以在slide上（或其他元素）增加类名...

2019-01-17 15:09:11 1571

原创 JSON.parse()和JSON.stringify()

JSON.parse() 方法用于将一个 JSON 字符串转换为对象。JSON.stringify()方法用于将对象的类型转换为字符串类型。

2019-01-03 18:24:15 101

原创 jquery只获取自身文本节点，不获取子元素的

1、jquery获取<div id="demo">只获取我<a href="">别管我</a></div>var a = $("#demo").prop('firstChild').nodeValue;console.log(a);2、js原生获取<div id="demo">

2018-12-18 15:20:01 1133

原创原生JS的cookie操作

//JS操作cookies方法! //设置cookies function setCookie(name,value,days) { // 设置cookie days设置过期时间单位:天不传默认是 cookie 在浏览器关闭时删除 var exp = new Date(); exp.setTime(exp.getTime() + days*24*60*60*...

2018-12-11 13:47:22 675

原创 swiper的元素更新，需要初始化组件

var mySwiperOut = new Swiper('.swiper-container-out', { direction:'horizontal', loop: false, touchRatio : 8, resistance : true, resistanceRatio : 0, effect : 'fade', fade:{...

2018-12-08 21:13:32 2594

原创 iphone点击滑动图标确定效果

html&lt;div class="wn-radio-box"&gt; &lt;span class="wn-radio-ball"&gt;&lt;/span&gt;&lt;/div&gt;css.wn-radio-box { right: .3rem; t

2018-11-22 20:00:53 480

原创图片hover向左滑动10px

图片hover向左滑动10px.diy-floor .shop-list li img { position: absolute; right: 0; bottom: 0;}.anim-left:hover img { -webkit-transform: translateX(-10px); -o-transform: translateX(-10...

2018-11-12 16:51:45 583

原创图片占屏幕全宽，且显示正方形的CSS

img{ display:block; width:100%; height:100vm;}

2018-11-02 15:15:54 460

原创解决报错Unable to preventDefault inside passive event listener due to target being treated as passive.

属性描述touch-action: auto 浏览器会根据其支持的触控添加交互。比如x轴滚动、y轴滚动、双指缩放和双击。touch-action: none 浏览器禁用触摸交互。touch-action: pan-x 允许浏览器水平滚动，禁用垂直滚动及手势。touch-action: pan-y 允许浏览器垂直滚动，禁用水平滚动及手势。touch-action: manipulatio...

2018-10-29 11:35:58 1459

原创阻止默认事件和事件冒泡，溢出文字隐藏CSS

阻止默认事件和事件冒泡e.preventDefault();e.stopPropagation();溢出文字隐藏CSSoverflow: hidden;white-space: nowrap;text-overflow: ellipsis;

2018-10-23 15:59:48 420

转载 CSS声明顺序

相关的属性声明应当归为一组，并按照下面的顺序排列：1.Positioning 2.Box model 3.Visual 4.Typographic由于定位（positioning）可以从正常的文档流中移除元素，并且还能覆盖盒模型（box model）相关的样式，因此排在首位。盒模型排在第二位，因为它决定了组件的尺寸和位置。其他属性只是影响组件的内部（inside）或者是不影响前两组...

2018-08-29 14:33:29 127

转载 CSS：常用的class命名规则

常用的class命名规则：头：header head 内容：content container 尾：footer 导航：nav navigation 侧栏：sidebar aside 栏目：column 页面外围控制整体布局宽度：wrapper wrap 左右中：left right middle center 登录条：login 标志：logo 广告：banner 页面...

2018-08-29 10:24:33 1949

转载 JQuery插件——backstretch

如果想要在网站的门户或是某个页面加入一个图片轮播的功能，Jquery的backstretch插件应该是个不错的选择，该插件使用配置都相当简单。第一步要在index.html中引入jquery.js和jquery.backstretch.js； <script src="jquery.js"></script> <script src="jquery.ba...

2018-08-27 11:11:13 3922

转载 CSS3 - @media 判断iphone / ipad 机型

兼容iphone4/4s： @media (device-height:480px) and (-webkit-min-device-pixel-ratio:2){} 兼容iphone5 ：@media (device-height:568px) and (-webkit-min-device-pixel-ratio:2){} 兼容iphone6，iphone7，iphon...

2018-08-20 10:52:14 1869

转载判断客户端使用的是安卓还是苹果，然后加载对应的css文件

2018-08-20 10:39:04 656

原创苹果/安卓backround-color初始颜色

苹果手机backround-color不设置为白色。安卓手机backround-color不设置为灰色。所以建议如果设计图页面背景为白色，给最大容器设置backround-color:white;来兼容安卓手机！...

2018-08-20 10:34:24 235

转载 CSS3 Media Queries 与Responsive 设计

随着科学技术不断的向前发展，网页的浏览终端越来越多样化，用户可以通过：宽屏电视、台式电脑、笔记本电脑、平板电脑和智能手机来访问你的网站。尽管你无法保证一个网站在不同屏幕尺寸和不同设备上看起来完全一模一样，但至少要让你的Web页面能适配用户的终端，让他更好的呈现在你的用户面前。在本节中，将会学到如何使用CSS3中的Media Queries模块来让一个页面适应不同的终端（或屏幕尺寸），从而让你的页面...

2018-08-16 13:34:56 166

转载 CSS3布局样式相关

1.CSS3 多列布局——Columns 为了能在Web页面中方便实现类似报纸、杂志那种多列排版的布局，W3C特意给CSS3增加了一个多列布局模块（CSS Multi Column Layout Module）。它主要应用在文本的多列布局方面，这种布局在报纸和杂志上都使用了几十年了，但要在Web页面上实现这样的效果还是有相当大的难度，庆幸的是，CSS3的多列布局可以轻松实现。接下来咱们一起学习多...

2018-08-16 13:07:01 191

转载 CSS3中的变形与动画

1.CSS3变形–旋转 rotate() 旋转rotate()函数通过指定的角度参数使元素相对原点进行旋转。它主要在二维空间内进行操作，设置一个角度值，用来指定旋转的幅度。如果这个值为正值，元素相对原点中心顺时针旋转；如果这个值为负值，元素相对原点中心逆时针旋转。transform: rotate(45deg);2.CSS3中的变形–扭曲 skew() 扭曲skew()函数能够让元...

2018-08-16 11:53:07 641

转载 CSS3选择器大全

1.CSS3选择器属性选择器在HTML中，通过各种各样的属性可以给元素增加很多附加的信息。例如，通过id属性可以将不同div元素进行区分。input[type="text"]{ width:150px; display:block; margin-bottom:10px; background-color:yellow; font-family: Verdana...

2018-08-16 11:31:08 37835 2

转载什么是CSS3？

CSS3是CSS2的升级版本，3只是版本号，它在CSS2.1的基础上增加了很多强大的新功能。目前主流浏览器chrome、safari、firefox、opera、甚至360都已经支持了CSS3大部分功能了，IE10以后也开始全面支持CSS3了。1. border-radius是向元素添加圆角边框。border-radius:10px; /* 所有角都使用半径为10px的圆角 */ ...

2018-08-16 10:42:04 2078

转载 JS内置方法和对象

JS内置函数不从属于任何对象，在JS语句的任何地方都可以直接使用这些函数。JS中常用的内置函数如下：1、eval(str)接收一个字符串形式的表达式，并试图求出表达式的值。作为参数的表达式可以采用任何合法的操作符和常数。如果参数中包含JS命令，这些命令也可以被执行，就像这些命令是JS程序的一部分一样。2、parseInt(str,n)试图从一个字符串中提取一个整数。可附加一个n整数实现返回...

2018-08-15 16:46:34 493

空空如也

空空如也