- 博客(199)
- 收藏
- 关注
RSS订阅原创 html页面滚动加载,可视区域判断
演示图考虑2个情况一种情况初始状态下 滚动到在中间区域的时候,这时上半部分看不见的元素就不给字体添加红色一种情况是,从头向下看的.代码.ss li { margin: 40px;}<div class="ss"> <ul> <li>sss</li> <li>sss</li> &.
2020-06-30 17:26:24
589
原创 5个JavaScript的字符串处理库
使用字符串可能是一项繁琐的任务，因为有许多不同的用例。例如，将字符串转换为驼峰大小写这样的简单任务可能需要几行代码才能达到最终目标。functioncamelize(str){returnstr.replace(/(?:^\w|[A-Z]|\b\w|\s+)/g,function(match,index){if(+match===0)return"";//orif(/\s+/.test(match))forwhitespacesret...
2020-06-30 17:25:25
520
原创 10大Js图像处理库
介绍对于很多人来说，使用Javascript来处理图像不是一件非常简单的事情，幸运的是我们可以借助第三方的库来实现我们想要的功能，本篇文章就介绍一有哪些Javascript图片处理库可供我们选择和使用!以下排名不分先后1. Pica此插件可减小大图像的上传大小，从而节省上传时间。它可以在浏览器中调整图像大小，而不会出现像素化现象并且相当快。它会从web-workers, web assembly, createImageBitmap and 纯JS自动选择优秀的可用技术。减小大图像...
2020-06-30 17:24:04
5371
原创 子级宽度没有自适应内容宽度撑开，只适应到父级100%
#box{ width: 600px; } .inner-box{ display: flex; width: 100%; height: auto; background-color: #eee; overflow: auto; } p{ width: auto; font-size: 16px; ...
2020-06-30 17:23:19
1925
原创 css如何设置首行文字缩进？
在HTML网页中通常一段文字都需要设置首行缩进两个文字，使页面更加美观，我们可以通过css实现这一效果，下面我们就来看一下使用css设置首行文字缩进的方法。css可以使用text-indent属性来设置首行文字缩进，我们可以通过设置text-indent属性的属性值来设置缩进的大小。示例：设置首行文字缩进两字符：<html><head><style type="text/css">p {text-indent: 2em}</style>
2020-06-30 17:22:47
3130
原创 css可以修改超链接颜色吗？
超链接a标签大家都应该很熟悉，这篇文章主要的讲的是a标签的基础css样式设置，下面我们来看一下css修改超链接颜色的方法。css可以使用下面几个伪类来设置超链接： a:link ：是未被访问的样式，可以在里面加很多东西，比如说去掉下划线，换颜色等功能都能在这里实现； a:visited ：是已被点击后的样式，也可以在里面加很多元素，可以去下划线，改颜色，放大等功能； a:hover ：这个是鼠标悬停的样式，这个等下有实例介绍，我们先来认识一下，是把鼠标停在超链接的位置的时候可以
2020-06-30 17:22:13
3320
原创 在 React.js 中自动复制文本到剪贴板
介绍在本文中，我们将学习怎样在 ReactJS 中把文本复制到剪贴板。依赖的知识与环境React 基本知识。 Visual Studio Code IDE。 Bootstrap 和 HTML 的基本知识。创建一个 React 项目首先，用以下命令创建一个 React App。npx create-react-app platform然后在 Visual Studio Code 中打开新创建的项目，并使用以下命令安装 Bootstrap：npm install --.
2020-06-30 17:21:33
900
原创 让Web应用更安全的13个小技巧
无论你是React、Angular、Vue.js，还是原生JavaScript开发者，你的代码都有可能成为黑客眼中的猎物。作为一个前端开发者，我们可能更加关注性能、SEO、UI/UX，往往会忽视安全问题。当你了解了大型框架是如何让你对xss攻击保持开放态度时，也许你会感觉到很意外。例如，React中的dangerouslySetInnerHTML或者Angular中的bypassSecurityTrust都是一些高危操作。我们需要记住，就安全而言，前端现在和后端、DevOps一样承担着相同的职责
2020-06-30 17:21:22
304
原创 css如何将图片横向平铺？
在CSS中，可以使用background（背景）属性来添加图片，默认图片是向x轴和y轴重复。那么css如何将图片横向平铺？下面本篇文章就来给大家介绍一下使用CSS将图片横向平铺的方法，希望对大家有所帮助。在CSS中，可以使用background-repeat属性来将图片横向平铺。background-repeat属性是用来设置背景图像如何平铺的；默认地，背景图像在水平和垂直方向上重复。语法：background-repeat:repeat|repeat-x|repeat-y|no-repeat
2020-06-30 17:21:13
1057
原创 如何用js修改css样式？
如何用js修改css样式？下面本篇文章就来给大家介绍一下使用javascript修改css样式的方法。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。共用代码：<div id="div">这是一个盒子</div>var div = document.getElementById("div");第一种：用cssTextdiv.style.cssText='width:600px;height:250px;border:1px red solid;t
2020-06-30 17:20:36
1798
原创 UIImagePickerController显示中文界面
最近在做美颜滤镜的SDK方面的东西，自己练手的当然选择国内视频编辑的大咖《美拍》，观察了一下。他们家的相册选择视频的控件用的是UIImagePickerController无误。其实UIImagePickerController的好处在于，系统自带的，方便简单效率高，要是选择其他的第三方，多余的功能太多。还有一个完美的功能就是UIImagePickerController在选择完视频后，系统会自动显示一个压缩视频的进度条，方便简单。自己操作完了所有的功能之后，发现就是相册显示的是英文，那怎么把它改成中文
2020-06-29 13:17:48
413
原创 iOS 真机调试 No profile for team xxxx matching xx found
当我们从网上下载一些demo的时候，就会遇到这种情况。谷歌了半天，给出的方法也没有一个真正能解决问题的。下面就以阿里云互动直播的demo为例解决该问题。我们把红色部分修改成自己的id，然后变成这样但是我们运行程序的时候发现还是不行，然后看图中红色框中的30e6f26d-b0c3-4b91-9e8f-f7c467068018 。我们复制这一串标识然后解决方法：1.打开项目的文件夹，右键点击“项目名.xcodeproj”，显示包内容；2.双击打开project.pb...
2020-06-29 13:17:03
8138
原创 vue cli3.0中引用stylus文件
首先安装 stylus和stylus-loadernpm install stylus --save 和 npm install stylus-loader --savestyle-loader(安装style-loader的目的是为了在html中以style的方式嵌入css)，如下命令，为了在style里用了<style scoped lang="stylus" rel="stylesheet/stylus">可以引用css的文件npm install css-loader
2020-06-29 13:15:39
1578
1
原创 Afnetworking3.0以后的Https双向验证使用
最近在做新的项目，现在改用Https做验证了，开始以为没什么觉得不会遇到坑，后来才发现自己是真的遇到坑了，现在把自己遇到的坑都说一遍，增加别人的效率。首先，大家百度来的afnetworking的https验证，一般的讲解都是单向验证的。而我们这次是双向验证的，就是客服端和服务端都验证。一开始自己收到了两个证书，一个是pem格式的（服务端证书）和另外一个是p12格式的（客户端证书）。所以我们这两个证书是都要验证的，但是afnetworking好像是不支持pem格式证书直接验证的，所以首先要把pem的证书转换
2020-06-29 13:14:42
1210
1
原创 Vue 里style、class 内联三元表达式和img里src处理
首先是style和class使用三元表达式处理:通常给class绑定个对象，就可以动态的切换样式了。(data中定义isActive的true、false)<div :class="{ active: isActive }">hello</div>handleClick(){ this.isActive = !this.isActive }推荐、不加{}就算是加字符串,最好绑定class用[]、{判断},style用{}<i class="icon.
2020-06-29 13:13:44
5905
2
原创 如何修改npm下来的源码和防止被还原的方法
当我们npm下来一些三方的插件是使用，有时候会发现里面的逻辑有时候并不是我们想要的或者需要修改部分逻辑去适合我们自己的项目，这个时候我们就需要修改这个插件里面的源码了，但是我们直接修改在node_modules中的源码的源码的时候，会发现有时候再次npm install时候或者有时候直接修改src里面的源码的时候，根本没有起作用，这时候我们分为两种情况去分析1.直接修改src源码无效果的情况这种情况其实只能说明我们没有修改对地方，我们要看的是这个插件里package.json里面的这样一行代码
2020-06-29 13:12:33
2967
原创 在 Chrome (谷歌浏览器) 中模拟微信内置浏览器
微信和 QQ 内置浏览器 UAiOSQQ 内置浏览器 UA:Mozilla/5.0 (iPhone; CPU iPhone OS 7_1_2 like Mac OS X) > AppleWebKit/537.51.2 (KHTML, like Gecko) Mobile/11D257 > QQ/5.2.1.302 NetType/WIFI Mem/28iOS 微信内置浏览器 UA:Mozilla/5.0 (iPhone; CPU iPhone OS 7_1_2 ..
2020-06-29 13:11:59
17819
3
原创 小程序安装npm包
如果我们已经创建好了小程序的一些基本配置，后期我们想使用npm的时候，如果我们直接在详情里打开npm的话（如图1）图1然后我们再根据图二图2的时候我们会发现出现了（如图3）如图3你百度了很多方法，已经不能安装npm包，一直出现图3 的情况。其实我们需要在终端cd到我们创建的小程序根目录，然后执行npm i miniprogram-sm-crypto --production然后会发现根目录出现miniprogram_npm的文件夹...
2020-06-29 13:10:55
3162
3
原创 Vue项目报错：npm ERR! code ELIFECYCLE npm ERR! errno 126
运行vue项目报如下错误：npm ERR! code ELIFECYCLEnpm ERR! errno 126npm ERR! todos@1.0.0 dev: `webpack-dev-server --inline --progress --config build/webpack.dev.conf.js`npm ERR! Exit status 126npm ERR! npm ERR! Failed at the todos@1.0.0 dev script.npm ERR! Th
2020-06-29 13:09:54
11643
3
转载 npm install 报错（npm ERR! errno -4048，Error: EPERM: operation not permitted,）解决方法
npm ERR! path E:\SouthernPowerGridProject\web_project\AutoOPS\autoops\node_modules\fsevents\node_modules\dashdash\node_modulesnpm ERR! code EPERMnpm ERR! errno -4048npm ERR! syscall scandirnpm ERR! Error: EPERM: operation not permitted, scandir 'E:\So.
2020-06-29 13:08:23
5097
原创 Windows下Yarn安装与使用
方法一：使用安装包安装下载官方安装包，https://yarnpkg.com/zh-Hans/docs/install，安装完毕后，一定要配置环境变量。方式二：使用NPM安装npm i yarn -g-i：install -g：全局安装（global）,使用 -g 或 --global输入yarn -version 可以看到版本号，说明安装成功了。我们就可以在项目中像使用npm一样使用yarn了常用命令yarn / yarn install 等同于npm ins...
2020-06-28 10:10:42
1146
原创 9 个使用前必须再三小心的 Linux 命令
Linux Shell/terminal 命令非常强大，即使一个简单的命令就可能导致文件夹、文件或者路径文件夹等被删除。在一些情况下，Linux 甚至不会询问你而直接执行命令，导致你丢失各种数据信息。一般来说在 Web 上推荐新的 Linux 用户执行这些命令，当然，也有人哪些写过这代码的人不这么想，因为这玩意你一写下去就不是玩笑了。这里我收集了一些对系统有危害的 Linux 代码，帮助你避免他们。请记住：这些代码非常危险，甚至可以经过修改，变得更加有危害性。还有一些事情需要注意：一些命令只
2020-06-28 10:10:03
144
原创 20多个最佳 ICON 库
在应用界面中图标的存在，会给用户一个良好第一印象，这个挺重要的。但是从零开始开发图标需要大量的时间和金钱。在你的网站上使用图标可以让你有效地与你的访问者交流:它们增加了可读性，突出了重要的内容，加强了功能或特性，增强了设计。因此，使用现成图标是很好的一个选择。最佳图标库的列表这里阿里的iconfont就不做介绍的，国内的开发者基本都知道，也都在用，现在我们来看看国外有哪些好用的图标库。Flaticon网址：https://www.flaticon.com/packs格式和类型：..
2020-06-28 10:09:12
3906
原创 JavaScript中的构造函数
构造函数ECMAScript 中，构造函数与其他函数的唯一区别，就在于调用它们的方式不同。不过，构造函数毕竟也是函数，不存在定义构造函数的特殊语法。任何函数，只要通过 new 操作符来调用，那它就可以作为构造函数，如果不通过 new 操作符来调用，那它跟普通函数也不会有什么两样。ECMAScript 中的构造函数可以分为原生构造函数和自定义构造函数。原生构造函数有 Object、Array、Date …，在运行时会自动出现在执行环境中。此外，也可以创建自定义的构造函数，从而定义自定义对象类型的...
2020-06-28 10:08:25
175
原创 CSS五种方式实现 Footer 置底
页脚置底（Sticky footer）就是让网页的footer部分始终在浏览器窗口的底部。当网页内容足够长以至超出浏览器可视高度时，页脚会随着内容被推到网页底部；但如果网页内容不够长，置底的页脚就会保持在浏览器窗口底部。1、将内容部分的底部外边距设为负数这是个比较主流的用法，把内容部分最小高度设为100%，再利用内容部分的负底部外边距值来达到当高度不满时，页脚保持在窗口底部，当高度超出则随之推出的效果。<body> <div class="wrapper">..
2020-06-28 10:07:36
1864
原创 css中雪碧图(sprite)的使用及制作方法
雪碧图(sprite)是减少请求次数的有效手段，其原理是把多张图片进行合成，使用时通过css进行定位。1.先看一下雪碧图没有使用雪碧图时图标是这样一个个的单独文件：合成雪碧图后是这样拼在一起的一张图：2.雪碧图的使用首先确定要使用的图标的位置和大小（可以通过ps测量），如下的雪碧图大小统一，排列规则它们的大小均为30px*30px，第一个图标位置为0 0，第二个的位置为30px 0，依次...样式可以这样写： 1 .box1 li:nth-chil...
2020-06-28 10:05:26
4173
原创 javascript原生判断DOM是否加载完毕执行方法
readyStatedocument.readyState 返回当前文档的状态，属性如下：uninitialized 还未开始加载 loading 加载中 interactive 已加载，文档与用户可以开始交互 complete 加载完成DOMContentLoaded当 DOMContentLoaded事件触发时，仅当DOM加载完成，不包括样式表，图片，flashonload当 onload 事件触发时，页面上所有的DOM，样式表，脚本，图片，flash都已经加载完..
2020-06-28 10:04:33
3084
1
原创 php判断远程文件是否存在
php判断本地文件是否存在可以简单的使用is_file就可以实现。但是在部分情况下会检测远程文件是否存在，实现方式如下1、可以使用fsocketopen,通过返回的状态码判断2、使用curl，通过通过返回的状态码判断3、可以直接通过get_headers的方法来判断状态码以上方法是在远程url没有重定向的前提下，如果有重定向通过以下方法可以实现<?php$url = ‘http://www.baidu.com/link?url=77I2GJqjJ4zBBpC8yDF8xDhi.
2020-06-28 10:03:31
418
原创 CSS overflow-wrap新属性值anywhere是干嘛用的？
一、先了解下overflow-wrap属性CSSoverflow-wrap属性其实就是以前的word-wrap属性，MDN现在直接把word-wrap的文档页跳转到overflow-wrap属性的文档页了。由于overflow-wrap属性IE浏览器不支持，而其他现代浏览器依然支持老的word-wrap属性语法，因此，没有任何理由使用overflow-wrap属性。直到有一天overflow-wrap属性突然支持了一个新的属性值anywhere，overfl...
2020-06-28 10:02:41
2997
原创 深入理解jQuery中$.get、$.post、$.getJSON和$.ajax的用法
当我们用javascript写ajax程序写得很“开心”的时候，突然有人告诉你有一种东西叫jquery，它会告诉你不直接和HttpRequest是多么的快乐，同时你再也不需要再烦恼纠结的ajax乱码问题，更幸福的是你的js代码将大大地简化，看完本文，你会发现，ajax，简单的来讲就是一句话的事情。本文重点是来讲讲jQuery中调用ajax的4种方法：$.get、$.post、$getJSON、$ajax。如果读者没有javascript和jquery的知识，或者没有ajax的概念，那么请先去问问goog
2020-06-28 10:01:14
390
原创 让 JavaScript 与 CSS 和 Sass 对话
JavaScript 和 CSS 已经并存超过了 20 年。但是在它们之间共享数据非常困难。当然也有大量的尝试。但是我所想到的是一些简单而直观的内容——不涉及结构更改，而是使用 CSS 自定义属性甚至 Sass 变量。CSS 自定义属性和 JavaScript自定义属性在这里应该不会令人感到惊讶。自浏览器提供支持以来，他们一直在做的一件事就是与 JavaScript 协同工作以设置和操作值。不过具体来说，我们可以通过几种方式使 JavaScript 与自定义属性一起工作。可以使用setP..
2020-06-25 22:57:29
296
原创 编写可靠 Shell 脚本的 8 个建议
这八个建议，来源于键者几年来编写 shell 脚本的一些经验和教训。事实上开始写的时候还不止这几条，后来思索再三，去掉几条无关痛痒的，最后剩下八条。毫不夸张地说，每条都是精挑细选的，虽然有几点算是老生常谈了。1. 指定bashshell 脚本的第一行，#!之后应该是什么？如果拿这个问题去问别人，不同的人的回答可能各不相同。我见过/usr/bin/env bash，也见过/bin/bash，还有/usr/bin/bash，还有/bin/sh，还有/usr/bin/env sh。这算是编程界的.
2020-06-25 22:56:43
204
原创 JavaScript 变量、作用域及内存详解
基本类型值有：undefined，NUll，Boolean，Number和String，这些类型分别在内存中占有固定的大小空间，他们的值保存在栈空间，我们通过按值来访问的。（1）值类型：数值、布尔值、null、undefined。（2）引用类型：对象、数组、函数。如果赋值的是引用类型的值，则必须在堆内存中为这个值分配空间。由于这种值的大小不固定（对象有很多属性和方法），因此不能把他们保存到栈内存中。但内存地址大小是固定的，因此可以将内存地址保存在栈内存中。<script type="t
2020-06-25 22:56:20
236
原创 关于npx的基本知识
npx是一种在npm中安装工具，也可以被单独的下载使用 ，npx是npm5.2之后发布的一个命令，也就是只要npm的版本>=5.2就可以使用此命令；npx有很多用处，不限于通过npx http-serve来启动静态资源服务器。npx 是什么根据 zkat/npx 的描述，npx 会帮你执行依赖包里的二进制文件。举例来说，之前我们可能会写这样的命令：npm i -D webpack./node_modules/.bin/webpack -v如果你对 bash 比较熟，可能会写成.
2020-06-25 22:54:05
5701
原创 js精准计算
var numA = 0.1; var numB = 0.2; alert( numA + numB );0.1 + 0.2 = 0.30000000000000004。计算精度误差问题（和二进制相关）。对于浮点数的四则运算，几乎所有的编程语言都会有类似精度误差的问题，只不过在 C++/C#/Java 这些语言中已经封装好了方法来避免精度的问题，而 JavaScript 是一门弱类型的语言，从设计思想上就没有对浮点数有个严格的数据类型，所以精度误差的问题就显得格外突出。我们先把 0.1 和.
2020-06-25 22:53:15
1420
原创 前端获取图片exif信息
对又是我，每天都有新的需求。这次的需求是上传图片的时获取图片的宽高、设备、光圈等信息。不用考虑服务端做，他们肯定是不做。pc、android、ios 都支持了，现在就缺少 web 这边上传的图片了。获取图片宽高img = new Image();img.src = URL.createObjectURL(file)img.onload = function(){ console.log(img.naturalWidth || img.width)}URL.cr..
2020-06-25 22:52:40
1994
1
原创 css文字不透明度怎么设置？
在css中有很多好看的样式都可以实现，css设置出来的样式让整个网页看起来也会非常美观，今天的这篇文章就给大家来介绍一下在css中怎么设置文字的透明度，让你的文字在网页中看起来是透明的。CSS设置透明度可用如下两类方法实现：1、使用rgba2、使用opacity使用rgba设置文字不透明度的方法示例：<!DOCTYPE html><html><head> <title></title> <style t
2020-06-25 22:51:14
2737
原创 vue 键盘操作事件
需求：当按键盘enter键和键盘左右键时，左右切换页面卡片并读取卡片上的信息一、获取键盘对应的keycodekeyCode 实际键值 48到57 0到9 65到90 a到z（A到Z） 112到135 F1到F24 8 BackSpace（退格） 9 Tab 13 Enter（回车） 20 Caps_Lock（大写锁定） 32 Space（空格键） 37 Left（左箭头） 38 Up（.
2020-06-25 22:50:34
1178
原创 利用jquery制作滚动到指定位置触发动画
利用CSS3的 animation 动画特性来完成的，对IE的兼容性不是太好，适用与手机端。<!doctype html><html><head><meta charset="utf-8"><title>sas</title><script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js">&l
2020-06-25 22:49:21
1273
原创 5个console.log() 技巧帮你提高工作效率
我们知道console.log(message)用法很简单，表示将参数message 打印到控制台上。console.log('前端')// 前端const myAge = 28console.log(myAge) // 28本文主要介绍5个有用的技巧，可帮助你在使用console.log()时提高工作效率。1. 打印全名变量如果在控制台打印多个变量，是数量比较多的情况下，我们很难区别哪个变量对应哪个值。function sum(a, b) { console...
2020-06-25 22:49:12
3050
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人