风轻云淡180518-CSDN博客

原创让网页变灰

每次全国哀悼日，各大网站首页都变成了灰色，添加以下全局CSS样式，可以实现此效果：本篇文章来自：http://www.fly63.com/article/detial/8487方法一html { -webkit-filter: grayscale(100%);filter:progid:DXImageTransform.Microsoft.BasicImage(graysa...

2020-04-17 10:43:15 293 2

原创 stylus通过node监听文件变化实现自动编译

近日在学习 stylus ,由于没有使用webpack，需要手动编译，在网上找了，通过 -w 和node中间件实现自动化，奈何手动操作一番，都未果，遂自己用node实现了一个，如下const fs = require('fs')const filePath = './'var exec = require('child_process').exec;function execute(...

2019-09-11 14:13:33 418

原创 nuxt 服务器部署

先介绍一下nuxt，nuxt是vue集成的ssr服务器端渲染的解决方案官网：https://zh.nuxtjs.org/guide/vuex-store/部署参考：https://segmentfault.com/a/11900000144509671、首先登陆你的服务器，安装node，建议安装和你开发环境相同版本的，参考下面的https://www.cnblogs.com/...

2019-09-07 10:32:37 871

原创 Eslint的一些规则说明

1、使用Eslint的时候如果出现未闭合标签会报红，如下：对于有强迫症的我来说不能无视，怎么搞定？首先找到.eslintrc.js文件在 rules添加以下规则"vue/html-self-closing": ["error",{ "html": { "void": "never", "normal": "any", "component": ...

2019-07-26 08:50:21 1014

原创 Linux文件和目录管理

1、Linux命令基本格式登录系统后，第一眼看到的是[root@localhost ~]#[]：这是提示符的分隔符号，没有特殊意义root：显示的是当前的登录用户，笔者现在使用的是 root 用户登录@：分隔符号，没有特殊含义localhost：当前系统的简写主机名~：代表用户所在的目录，此例中用户当前所在目录是家目录#：命令提示符，Linux用这个符号标识登录用户权限登记...

2019-06-22 16:10:13 147

原创树莓派系统介绍

树莓派是一个微型计算机，和普通的电脑没有什么区别，只是体积更小，只有卡片大小，存储能力和计算能力会差一点，主要用于学习，实验所用。是电脑就要安装操作系统，树莓派官方推荐了两种系统，分别是 NOOBS和RASPBIANNOOBS 全称 New Out Of Box System（全新开箱即用系统），其实就是个系统安装器，之所以介绍这个，是因为官方推荐每一个第一次接触树莓派的人，都用用。之...

2019-06-22 12:58:45 5195 1

原创前端面试题集锦

最近要开始找工作了，多一份准备多一份信心，光看的话很快就会忘记，所以我就把从网上摘抄来的文章有重新手打一遍，以加强记忆。1、谈谈你对MVVM开发模式的理解MVVM分为Model，View，ViewModel三者，Model代表数据模型，数据和业务逻辑都在Model层重定义。View代表视图，负责数据的展示。ViewModel负责监听Model中数据的改变并且控制视图的更新，处理...

2019-06-17 14:55:20 231

原创 js 百度坐标和火星坐标的转换

来源网络/* eslint-disable */// 各大坐标系转换插件,QQ:1572309495// 定义一些常量var x_PI = 3.14159265358979324 * 3000.0 / 180.0var PI = 3.1415926535897932384626var a = 6378245.0var ee = 0.00669342162296594323/*...

2019-04-08 08:59:58 2718 1

原创查看端口使用情况，并解除占用端口的进程

1、列出所有端口的情况$ netstat -ano2、查看被占用端口对应的PID，最后一个数字，如下图的 4896$ netstat -aon|findstr "8080"3、打开任务管理器，切换到详细信息，找到那个PID4、右击该任务，选择结束进程即可...

2019-04-02 15:25:43 227 2

原创 css将一张宽度为百分比的图片设置成正方形

使用css很容易将图片设置为正方形，只要宽高相等即可，但如果图片的宽度是一个百分比呢，比如50%，那么就用到了下面的方法了。<div class="wrap"> <div class="div"> <img src="a.jpg"> </div></div><style> .wrap{ w...

2019-04-02 15:11:21 2015 2

原创 iphone 6的兼容问题

Flexdisplay: flex → display: -webkit-flexjustify-content: space-between; → -webkit-justify-content: space-betweenalign-items: center; → -webkit-align-items: centerflex-direction: co...

2019-03-20 15:02:39 538

原创用python做一个微信聊天机器人

先去图灵机器人申请一个账号，得到 key新建文件wx.py写入如下内容import requestsimport itchatdef get_response(msg): apiUrl = 'http://www.tuling123.com/openapi/api' #改成你自己的图灵机器人的api data={ 'key': '*******...

2019-03-19 10:22:26 314

原创如何使用PS改变只有一种颜色图片的颜色

这里所说的图片是这种单色的图片首先将这张图片拖到PS中打开，选择图层 > 图层样式 > 颜色叠加然后我们选择一种颜色颜色改完了，保存。...

2019-03-12 11:30:47 4127

原创前端图片处理

这篇文章有几个功能，第一个是支持拖拽，第二个是压缩，第三个是裁剪编辑，第四个是上传和上传进度显示。1、拖拽上传拖拽读取图片的功能主要是监听HTML5的 drag 事件，这个没什么好说的，查查API就知道怎么做的，主要在于怎么读取用户拖过来的图片并他把转成base64以在本地显示出来，代码如下：2、压缩图片压缩图片可以借助canvas，canvas可以很方便的实现压缩，其原理是把一张...

2019-03-06 17:01:53 8296 1

原创 mpvue使用富文本

mpvue是一个使用vue开发小程序的前端框架富文本是一些带有style标签的HTML标签文本，方便后台编辑，前端直接显示。在mpvue中如何将其转化为小程序的Wxml呢，不需要自己写代码，你只需要一个库1、安装$ npm i mpvue-wxparse --save2、使用<template> <div> <wxPars...

2019-03-06 14:24:37 1744 1

原创【入门篇】Karma + Jasmine 前端的单元测试与自动化测试

为什么要做单元测试？1、这块代码比较复杂，还是别人写的，我不敢随便改，万一改出问题就不好了2、你怎么不小心把我那块代码给改了，虽然该动小，但是改出问题了3、我很久前做的一个功能，现在要加点新的功能，但是不小心破坏了老的功能前端怎么做单元测试?所用的工具需要：测试框架+断言库，常用的测试框架有Karma，mocha，其中Karma是一个以浏览器为引擎的测试，而mocha用的是node...

2019-02-21 12:16:12 923

原创 input type=number只能录入11位数字

当需要用户输入手机号码的时候，把input的type属性设置为number，在移动端就能调起数字键盘了，但是maxlength属性对于type=number是无效的，而且还可以输入除了数字之外的其他字符，比如+.e，加上下面两个事件<input onkeypress='return( /[\d]/.test(String.fromCharCode(event.keyCode)))'o...

2018-12-27 10:09:59 4829 2

原创【手把手】带你撸一个基于vueCli 3.0的前端框架

vuecli 是 vue 的一套工具，便于我们快速开发，其使用方法也是千奇百怪，各种奇技淫巧层出不穷，网上大多教程也只是教你怎么去安装，并没有说要怎么去用，今天来和大家探讨一下该怎么合理的使用。1、创建项目假设你已经安装过node了，执行下面命令安装vuecli3.0，如果你之前安装过vuecli2.0，只需按照提示把2.0卸载，再安装3.0$ npm install -g @vue...

2018-12-26 14:59:53 1507

原创【手把手】带你撸一个Django web框架

据说 python 已经成为了前端开发程序员想学习的首位的后端语言，python 的语法及其简单，我们可以很快的上手，python 有很多做web服务器的框架，在此呢我推荐 Django，因为他是一个极简的框架，没有其他乱七八糟的东西，适合快速上手。在编写的过程中如果出现缺少某个包，大家记得通过 pip install 包名引入，因为这些包我电脑上都装过了，所以就不做说明。1、天才第一步...

2018-12-25 12:08:25 700

原创 vuex 存储持久化

vuex存储了应用的很多数据，但是一但我们刷新页面，所有的数据都会丢失掉，只能重新从服务器拉数据，又要加很多的逻辑判断，我们可以吧vuex和storage相结合，来解决这个问题。1、引入npm install vuex-persistedstate -S2、使用import createPersistedState from 'vuex-persistedstate'cons...

2018-12-19 22:56:33 1179 1

web前端的小伙伴们大家好，说起APP混合开发，大家首先想到的可能就是类似Cordova的库，可以让我们不写一行安卓代码，就轻松地实现原生APP的一些常用功能，但是对于一些特别的"需求"我们就无能为力了。所以为了提高我们的知识储备，我觉得还是有必要学习一波安卓的知识的。下面就由我带着大家手把手撸一个安卓的壳子出来，由于本人也是第一次写安卓的东西，难免会有些不对的地方，希望各路大神见怪莫怪。1、...

2018-12-11 23:43:10 2785 4

原创 css三角形

今天我们来聊一聊怎么通过css来绘制一个三角形的。原理就是border属性的应用。首先定义一下HTML结构<div class="box"></div>然后给box添加样式.box{ width:200px; height:60px; border:1px solid #333; position:relative; margin:5...

2018-11-26 10:40:23 184

原创 checkbox美化

传统的checkbox表单元素是不好看的，而且每个浏览器表现出来的样式还不一样，很多时候我们会借助一些表单美化的插件实现类似开关切换的效果，有些是用 js+css 实现的，而有些则是纯CSS实现的，我们更应该感兴趣的是后者，今天我们就来一步一步实现一个CheckBox美化的效果开始之前我们先搞清楚，要给CheckBox 的样式好像不太可行，所以需要借助label的for来间接触发 CheckB...

2018-11-19 11:00:32 1918

原创 vue2 手势密码

组件：<template> <div class="masks" v-show="currentValue"> <div class="gesturePwd"> <div class="box"> <h4 ref="gestureTitle&quot

2018-11-11 21:42:21 2289 7

原创 localStorage 设置过期时间

localStorage除非人为手动清除，否则会一直存放在浏览器中，但是很多情况下我们可能需要localStorage有一个过期时间，比如我们将用户身份认证 token 保存在客户端，1周之内有效，超过一周则要重新登录，那么这种需求该怎么实现呢要知道，localStorage本身并没有提供过期机制，既然如此，那就只能我们自己来实现了，我们可以直接给其原型上加上这样一个方法Storage.p...

2018-11-02 16:55:08 15891 6

原创 javascript 身份证号码验证函数(可辨真伪，支持15或18位身份证号)测试误差为0

话不多说，直接上代码，我不生产代码，我只是代码的搬运工。//验证身份证号方法var test = function (idcard) { var Errors = new Array("验证通过!", "身份证号码位数不对!", "身份证号码出生日期超出范围或含有非法字符!", "身份证号码校验错误!", "身份证地区非法!"); var area = {11: "北京.

2018-11-01 23:23:52 422

原创 ES6箭头函数

如今ES6的箭头函数已经被用的比较普遍了，因为我们喜欢他的简洁，let sayHello = name =>{ `hello,${name}`}不过使用之前，我们应该注意一下和普通函数的区别避免犯一些无意识的错误。arguments普通函数可以通过arguments 拿到所有的参数let sayHi = function(){ console.log...

2018-11-01 10:17:50 222

原创只知DOM不知BOM?

JavaScript由ECMAScript、DOM、BOM三部分组成，DOM大家肯定是非常熟悉了，全称Document Object Model 文档对象模型，是用来描述文档结构的，并提供了JavaScript访问接口用来操作文档今天我们要将的BOM全称 Browser Object Model 浏览器对象模型，主要用来获取或设置浏览器的属性和行为，比如页面跳转，获取屏幕大小，弹出对话框，例如...

2018-10-28 22:43:59 177

原创 html2canvas实现网页保存为图片

今天我们来学习一波怎么将一个网页生成一张图片的，主要的应用场景在，分享，截图等我主要使用的是一个js库 html2canvas ,下面来了解一下他的详细用法吧。大家可以去这里https://download.csdn.net/download/qq_20343517/10739325下载这个库然后直接通过script标签引入或者通过其他方式导入也可以。基于html2canvas.js ...

2018-10-28 22:19:29 3657

原创使用promise实现异步

作为一个新的ES6异步编程的解决方案，Promise想必大家都听说过，包括async await 也是基于Promise的，今天我们通过一个小例子来全局了解一下Promise在此之前，需要明白的是，Promise实际上就是一个包含异步操作的容器，有三种状态。pending 进行中fulfilled 已成功rejected 已失败let p=new Promise((res...

2018-10-23 11:23:01 415

原创 css position:sticky

position 是 CSS中的一个常用属性，常见的取值有：relative，absolute，static，fixed，不过我还有一个取值想必很多同学都没听过，那就是sticky，这个定位是干啥用的呢？我们经常会遇到的一个场景就是，网页左侧有一个重要区域，正常情况下是跟随网页滚动条滚动的，当该元素到达浏览器顶部时，元素的定位就变成了fixed不动了。对于这种需求的解决方案通常借助JS和C...

2018-10-22 16:19:34 495

原创 js一行代码获取精确数据类型

typeof 是用来获取一个JavaScript数据类型的操作符，但是有经验的开发者都知道typeof在某些情况下是无法返回数据精确类型的，比如document.write(typeof []);返回的并不是 array ，而是object，所以是无法通过typeof分辨 [] 和 {} 的类型的，那么有解决方案吗？先上代码var toType=function (obj){ ...

2018-10-10 00:19:23 421

原创 CSS子元素选择父元素

通常一个CSS选择器都是从上往下选择的，通过父元素选择子元素，那么能不能通过子元素选择父元素呢？<ul> <li> <a href="#" class="active">1</a> </li> <li> <a href=&quo

2018-10-09 23:21:38 98981 12

原创 JS条件语句优化

JS条件语句优化妙招JavaScript条件语句在我们平时的开发中是不可避免要用到的，但是很多时候我们的代码写的并不好，下面我们就看看几个可以优化的地方(我们优化的目标是嵌套层级更少，代码更简洁和易读)是否包含我们经常会判断某个变量等于某些值，于是会写出这样的代码function sayHi(name){ if(name=='tom'||name=='hxh'||name...

2018-10-05 17:20:23 995

原创 nth-child 的妙用

你不知道的 :nth-child我们平时使用 :nth-child 的普遍用法是p:nth-child(1){ color:red;}表示获取在兄弟元素中的位置为1的<p>标签，实际上这里的1并非只能是一个数字，还可以是其他的数据格式。an+b这是一个表达式，这里的n从0开始取值，每次+1后代入计算，最终得出一个位置的数组，比如：p:nth-child(...

2018-10-05 16:16:50 1446

原创 requestAnimationFrame动画

现在一说起动画大家可能第一个想到的就是CSS3的animation，简单的也可以用transition，当然不要忘记除了CSS,JS也是可以实现动画效果的原则上能用CSS的地方就尽量不要用JS,但前提是两者都能实现，那么有没有什么场景是CSS的animation实现不了的呢？当然有某些属性的改变动画animation是不能实现的，比如scrollTop。animation支持的缓动效果有...

2018-09-25 21:15:57 784

原创 CSS变量

今天的问题是如何实现一个主题切换功能，比如我们有黑白两个主题，常规的做法是编写两个CSS主题文件light.css.theme-light{ background-color:#fff; color:#444}.theme-light a{ color:#444;}black.css.theme-black{ background-color:#000...

2018-09-20 23:53:42 1082

原创用js实现一个数据双向绑定

该接触angular，就很好奇他是如何实现的，最近有些时间，就查阅了相关的东西，其实很简单，并没有想象中的那么高大上。从原理触发在JavaScript中给一个对象添加属性可以像下面这样obj.age=20;obj.say=function(){}还可以通过Object.defineProperty来定义新属性或者修改原有的属性，其余发如下Object.defineProp...

2018-09-16 18:57:02 1596

原创 HTML5语义化标签

很多同学一提到语义化就觉得这只是一种规范，既然是规范，遵不遵循也没有多大影响，这种想法是错误的，如果你仍然是那种div标签跑遍整个页面的，请务必看看接下来我们要将的关于HTML语义化的知识定义使用正确的标签做正确的事情，即使是源码也是有意义的，也是可读的，理解起来很简单，人眼能看到的某个标签长什么样，做什么用，但是阅读设备智能阅读源码结构，所以必须要让这个结构是有意义的组织。目的和效果...

2018-09-16 17:03:18 288

原创 URL编码问题

我们要查询一个年龄为20，姓名包含 tom 的人，那么我们会这样去组织请求var url="http://xxx/?age=20&name=tom"然后服务端就能收到下面的接口请求参数{ "age":"20", "name":"tom"}如果我要搜索的姓名是 tom&lucy ,那么url就变成了var url="http:

2018-09-16 16:25:43 568