Web前端开发工具Web前端开发工具
篇幅过长 原文链接https: www.slidestalk.com web_2_13938213680_rxl_jtcxtk
[2018/10/12]
自定义checkbox样式自定义checkbox样式
修改原生checkbox样式。
效果
原理
1.利用CSS3属性 appearance。
该属性（强制）更改（改变）默认（原生）样式。
Firefox 支持替代的 -moz-appearance 属性；Safari 和 Chrome 支持替代的 -webkit-app...[2018/10/12]
iframe在移动端的缩放
工作中碰到个奇怪的问题，折腾了大半天，终于算是解决了，这里把分析思路和解决办法记录下。
项目是做响应式的公司官网，前期的静态图页面切完后就提交给后台作为模板使用了，我也就基本退出项目。
在后端落地时发现在在移动端页面显示不太对劲，显得很模糊。第一想法是meta的头部被覆盖了，查看源代码果然发现...[2018/10/12]
一种悬浮弹窗设计
需引入:FontAwesome,用于图标 效果截图:
CSS: .div1 { position: absolute; right: 16px; top: 10%; z-index: 12; }
.div2 { bord...[2018/10/12]
<button>与<input type="button">
在做form表单，点击按钮随机生成两串密钥的时候
1.用第一种按钮的时候，会出现刷新form表单的现象。会把创建密钥前面的输入框中的字消失。虽然能生成密钥1和密钥2，但是会闪一下，随即消失。几个输入框全变为空，本人用的是bootstrap框架。
<button c...[2018/10/12]
使用css实现三角符号效果_CSS教程_CSS使用css实现三角符号效果_CSS教程_CSS
关于使用c 制作三角符号，网上有很多的例子了，在这里只是为了详细的向各位解释一下三角符号的原理
下图，是一个长宽为100px，边框宽度为100px的一个元素，由此可见，在c 中上下左右的边框相交处并不是一个直线，所以，可以根据此属性进行编写三角符号
那么如何使用c 的该属性来实现三角...[2018/10/12]
box-shadow和drop-shadow实现不规则投影实例代码_CSS教程_CSSbox-shadow和drop-shadow实现不规则投影实例代码_CSS教程_CSS
当我们想给一个矩形或其他能用 border-radius 生成的形状（在“自适应的椭圆”一节中可以看到一些示例）加投影时，box-shadow 的表现都堪称完美。但是，当元素添加了一些伪元素或半透明的装饰之后，它就有些力不从心了，因为 border-radius 会无耻地忽...[2018/10/12]
calc()实现满屏背景定宽内容_CSS教程_CSS
在过去的几年间，有一种网页设计手法逐渐流行起来，我将它称作背景宽度满屏，内容宽度固定。这个设计的一些典型特征如下。
页面中包含多个大区块，每个区块都占据了整个视口的宽度，区块的背景也各不相同。
内容是定宽的，即使在不同分辨率下的宽度不一样，那也只是因为媒体查询改变了这个固定的宽度值而已。在...[2018/10/12]
HTML5实现签到 功能
Introduce(介绍)
用户签到的H5例子（c +jquery，无图片），由于网上找的的用户签到例子都不好，要不就是好多图片组成的，要不就大量冗余代码，所以特意做了个签到界面（移动端）。
User sign sample page for mobile using h5 which o...[2018/10/12]
css利用transform skewX制作平行四边形导航菜单_CSS教程_CSScss利用transform skewX制作平行四边形导航菜单_CSS教程_CSS
平行四边形其实是矩形的超集：它的各条边是两两平行的，但各个角则不一定都是直角。在视觉设计中，平行四边形往往可以传达出一种动感。
让我们试着用 CSS 创建一个按钮状的平行四边形链接。我们的起点就是一个普通的块状按钮，辅以一些简单的样式，然后，我们可以通过 skew() 的变形属性来对这个矩形进...[2018/10/12]
使用CSS content的attr实现鼠标悬浮提示（tooltip）效果_CSS教程_CSS使用CSS content的attr实现鼠标悬浮提示（tooltip）效果_CSS教程_CSS
为什么实现这种效果呢，其实这效果也是根据title的提示说明衍生出来的，只是因为原生的比较丑陋，像这种衍生出的插件后很多种，如jquery-ui的tooltip，Bootstrap的tooltips等等，有很多种插件库。
有时候我们不需要那么大的插件库，其实就一两个地方需要做一些提示（tool...[2018/10/12]
CSS实现footer“吸底”效果_CSS教程_CSS
我们经常会遇到这样的问题：如何用c 来实现底部元素可“粘住底部”的效果，对于“粘住底部”，本文有两种理解：
一是无论内容的多少，我们都希望使按钮，固定于可视窗口的底部，且内容区是可滚动的。
二是当内容区的内容较少时，页脚区不是...[2018/10/12]
让 Chrome 崩溃的一行 CSS 代码_CSS教程_CSS
一般的 CSS 代码只会出现 UI 版式或者兼容性方面的小问题。但这里我们要分享一行有趣的 CSS，它可以直接让你的 Chrome 页面挂掉 :)
复现
在 Chrome 里打开一个稍复杂的页面，比如知乎或者 掘金
打开开发者工具，为页面 <body> 增加...[2018/10/12]
nodejs初始化init的示例代码
打开cmd创建即可
$ npm init
Package name: (hello) 模块名字，npm init会自动取当前目录名作为默认名字，这里不需要改，直接确认即可
Description: A example for write a module 模块说明
Pa...[2018/10/12]
nodejs中用npm初始化来创建package.json的实例讲解
1.先正确的安装nodejs这个软件，自己去百度一下，安装很简单
2.然后在安装的NodeJS目录下打开cmd,在里面输入命令npm init,会得到如下图所示：
3.按提示，一步步来完成项目文件的配置，没有的可以不写，直接enter,这样初始化时会创建默认的文件，最后创建完的目录如...[2018/10/12]
详解Node.js读写中文内容文件操作
由于Node.js仅支持如下编码：utf8, ucs2, ascii, binary, base64, hex，并不支持中文GBK或GB2312之类的编码，
因此如果要读写GBK或GB2312格式的文件的中文内容，必须要用额外的模块：iconv-lite
1、安装模块：npm inst...[2018/10/12]
Node.js中读取TXT文件内容fs.readFile()用法
文件：
read.js:
var fs=require(''fs'');
fs.readFile(''readtxt/demo.txt'',''utf-8'',function(err,data){
if(err){
console.error(err);
...[2018/10/12]
nodejs更新package.json中的dependencies依赖到最新版本的方法
如果手动去修改dependencies中各个包的版本号，那就太麻烦了，借助npm-check-updates工具可以很方便的将package.json中的依赖包版本号更新为最新版本。
1、安装：
npm install -g npm-check-updates
使用：
2、检查pa...[2018/10/12]
Node.js npm命令运行node.js脚本的方法
通过npm运行node脚本 (控制台应用程序)
cmd---cd package.json所在的目录---npm start (package.json中的scripts属性中设置start命令)
cmd---npm （通过该命令可以查看npm后面能够设置的具体命令）
package...[2018/10/12]
nodejs require js文件入口,在package.json中指定默认入口main方法nodejs require js文件入口,在package.json中指定默认入口main方法
我们都知道nodejs遵循commonJS规范，各个js是独立的。
如果目录结构是：
–config 文件夹
– index.js
– test.js
app.js
那么在app.js中require(''./config'')的时候，默认是index.js。
如...[2018/10/12]
nodejs读取本地中文json文件出现乱码解决方法
1. 确定json文件是UTF-8 无BOM编码的的。如果有BOM，会在读取第一行的时候出现乱码。
Per "fs.readFileSync(filename, ''utf8'') doesn''t strip BOM markers #1918", fs.readFile...[2018/10/12]
nodejs aes 加解密实例
如下所示：
''use strict'';
const crypto = require(''crypto'');
/**
* AES加密的配置
* 1.密钥
* 2.偏移向量
* 3.算法模式CBC
* 4.补全值
*/
var AES_co...[2018/10/12]
用Object.prototype.toString.call(obj)检测对象类型原因分析
这是一个十分常见的问题，用 typeof 是否能准确判断一个对象变量，答案是否定的，null 的结果也是 object，Array 的结果也是 object，有时候我们需要的是 "纯粹" 的 object 对象。如何避免呢？比较好的方式是：
console.log(Object.pro...[2018/10/12]
css配合JavaScript实现tab标签切换效果css配合JavaScript实现tab标签切换效果
本文给大家介绍如何用CSS实现二维码扫描的效果，有一定的参考价值，有需要的朋友可以参考一下，希望对你们有所帮助。
这是html代码
<p id="main">
<!--标题-->
<ul id="tab">
<li cl...[2018/10/12]
详解vscode中vue代码颜色插件
vue提示插件【Vscode】 编者寄语：vscode的确是前端开发中很好的工具，安装颜色插件，从视觉上是美的享受。曾经的我遇到了vscode代码全是灰色，黑色的困惑，后来整理找到方法，整理这篇，以下高亮插件，建议大家都安装了。 &nb...[2018/10/12]
《React Native 精解与实战》书籍连载「React Native 源码学习方法及其他资源」
此系列文章将整合我的 React 视频教程与 React Native 书籍中的精华部分，给大家介绍 React Native 源码学习方法及其他资源。
最后的章节给大家介绍 React Native 源码的查阅方法，以便你进行更加高阶的开发与研究时参阅，并分享了开发过程中可能遇到的众多问题的解...[2018/10/11]
收藏！js原生带缩略图的图片切换效果
js原生带缩略图的图片切换效果 本例中用到的 moveElement(elementID,final_x,final_y,interval)是来自《JavaScript DOM编程艺术（中文第二版）》一书第10章中有一段代码。（可以直接baidu） 左边是banner图，右边是缩略图，当鼠标滑入缩略...[2018/10/11]
Node.js模块导入导出Node.js模块导入导出
这篇文章本来是想模块导入导出和事件循环一起写的，但是感觉一起写的话会太长了，所以就分开两篇文章写吧。下一篇会重点介绍一下js中的事件循环，js代码到底是以何种顺序去执行的呢？我相信你看懂了事件循环再去看node对你的帮助是非常大的。
讲模块系统之前先认识一下node.js中的全局对象。
node...[2018/10/11]
JavaScript Date
var date = new Date(); Sat Sep 29 2018 10:44:43 GMT+0800 (中国标准时间)
]new Date().toLocaleString(); 可根据本地时间把 Date 对象转换为字符串，并返...[2018/10/11]
深入理解javascript对象系列第一篇——初识对象深入理解javascript对象系列第一篇——初识对象
对象创建
有以下三种方式来创建对象，包括new构造函数、对象直接量和Object.create()函数
【1】new构造函数
使用new操作符后跟Object构造函数用以初始化一个新创建的对象
var person = new Object();
如果不给构造函...[2018/10/11]
JS封闭函数、闭包、内置对象
一、变量作用域
变量作用域指的是变量的作用范围，javascript中的变量分为全局变量和局部变量
1、全局变量：在函数之外定义的变量，为整个页面公用，函数的内部外部都可以访问。
2、局部变量：在函数内部定义的变量，只能在定义该变量的函数内部访问，外部无法访问。函数内部访问变量时，先在内部查找...[2018/10/11]
js，setTimeout与setInterval的用法js，setTimeout与setInterval的用法
1.setTimeout与setInterval的区别
setTimeout：
1.直接使用的话，按照指定 的时间，只执行一次传入的函数参数。
2.函数的终止使用clearTimeout。
setInterval：
1.直接使用的话，按照指定的时间，循环执...[2018/10/11]
事件冒泡与事件捕获
需要了解的知识点：
1. 向指定元素添加事件的方法：addEventListener()方法
2. Dom2级事件中事件流的三个阶段：事件捕获阶段、目标元素、事件冒泡阶段
3. javascript中 “this与e.target”的区别
...[2018/10/11]
纯JS实现前端动态分页码纯JS实现前端动态分页码
思路分析：有3种情况 第一种情况，当前页面curPage < 4 第二种情况，当前页面curPage == 4 第三种情况，当前页面curPage>4 此外，还要考虑，当前页码 curPage < pageTotal（总页码）-2，才显示 ... 首先，先是前...[2018/10/11]
DOM事件-调用函数
通过调用函数改变其内容：
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>...[2018/10/11]
Array对象常用属性
concat()
用于连接两个或多个数组。该方法不会改变现有的数组，而仅仅会返回被连接数组的一个副本。
var a = ["aa","ccc"];
var b = ["vv","mm"];
var c = ["123"];
var d = a.contac(b,c); ==&...[2018/10/11]
webpack4 系列教程(十一)：字体文件处理
教程所示图片使用的是 github 仓库图片，网速过慢的朋友请移步《webpack4 系列教程(十一)：字体文件处理》原文地址。或者来我的小站看更多内容：godbmw.com
0. 课程介绍和资料
>>>本节课源码
>>>所有课程源码
本节课的代码目录...[2018/10/11]
Webpack编译结果浅析-渔人码头-
如今Webpack已经是一个不可或缺的前端构建工具，借助这个构建工具，我们可以使用比较新的技术（浏览器不能直接支持）来开发。
你是否好奇你写的代码经过Webpack构建之后会生成什么东西？是否有时调试遇到莫名其妙的问题？
本文不讲如何进行配置，只是基于几个基础的例子，简要分析一下 webp...[2018/10/11]
nuxt 优化项：禁用js的预加载
这里有个nuxt和vue不同的地方，这个地方很有意思，官方的中文文档说得蜜汁自信
-------------------------------
In production, nuxt.js uses the prefetch strategy to pre-fetch t...[2018/10/11]
学习HTML5 canvas遇到的问题
学习HTML5 canvas遇到的问题
1. 非零环绕原则(nonzZero rule)
非零环绕原则是canvas在进行填充的时候是否要进行填充的判断依据。
在判断填充的区域拉一条线出来，拉到图形的外面，这条拉出来的线就是辅助线。判断绘制的线是否是从辅助线的左边穿过到辅助线的右边...[2018/10/11]
unicode编码和utf8编码的区别
编码格式不同在数据的传输和显示会有很大的影响。最近在使用的过程中发现一些网络文件传输的编码格式问题，会影响文件的正常传输，于是查看了一下网上的资料，自己也写一篇小总结。 uicode是万国码，用16位二进制（65536个编码）表示字符串，几乎包括了所有语种的文字UTF -8 全称8-b...[2018/10/11]
Bootstrap简要介绍
Bootstrap是一个CSS的框架，它有Twitter工程师开发，但是目前这个框架比Twitter本身更为流行，ppt中重点描述了Bootstrap的网格布局原理，当然，作为一个框架，需要前端工程师能够深入看更多的例程，本文仅仅对最核心的思想做了概要介绍。
篇幅过长 点击链接下载资源https...[2018/10/11]
IndexedDB 简单封装
IndexedDB 浏览器数据库，是一个非关系型数据库，数据形式使用的是json，IndexedDB适合存储大量数据，它的API是异步调用的，当然他的api 也相对复杂。
当然浏览器数据存储 还有LocalStorage，Cookies，web SQL等 为什么还再来一个in...[2018/10/11]
解决安卓字体偏移：页面整体缩放解决安卓字体偏移：页面整体缩放
在h5中实现一些小标签、按钮的时候，很容易发现部分安卓机型上的字体显示有问题，总会向上偏移2px左右。这是设置padding或line-height无法修复的，与rem也无关，即使在字体大于12px时依然存在。下图来自于网友的分享，从左到右依次是显示正常的苹果、显示正常的安卓、显示异常的安卓：...[2018/10/11]
vue 国际化i18n 多语言切换vue 国际化i18n 多语言切换
安装
npm install vue-i18n
新建一个文件夹 i18n ，内新建 en.js zh.js index.js 三个文件
准备翻译信息
en.js
export default {
home: {
helloworld: "hello workd ！"
...[2018/10/11]
CSS的再深入3（更新中···）
在前面，我们学习了标准文档流，但在实际制作的过程中，用标准文档流书写显然是不现实的，因此，我们来了解几种脱离标准文档流的方法：
1.float 浮动
float：left/right；（左浮/右浮）
效果：元素都加浮动，后面的元素紧跟前面的元素并排排列
第一个加了float，脱离了标准...[2018/10/11]
Sass入门及知识点整理Sass入门及知识点整理
Sa 快速入门 | SASS 中文网
文档链接：https: www.sa c .com/getting-started/
前言
之前整理了一篇关于Le 的，现在就来整理一下关于Sa 的。
因为这两种都是CSS的主流预处理器，当然还有Stylus。
要解...[2018/10/11]
css的再深入4（更新中···）
两种居中的方式：
Margin:0 auto;和text-align:center;
Margin的居中是对自身，text-align对元素内部的文本来说。
隐藏的两种方式：
visibility：hidden；和display:none;
visibil...[2018/10/11]
兼容性问题的解决方式（更新中···）
1、清除浮动的兼容性（低版本的浏览器不兼容问题）
.clearfix:after{
content:"";
clear:both;
display:block;
visibility:hidden;
height:0;
}
.clear{
&nb...[2018/10/11]
swiper3d横向滚动多张炫酷切换banner
最近有了个新需求，swiper3d横向滚动多张炫酷切换banner要和elementUI里边走马灯的卡片化card 类似，但是还需要h5手机触摸滚动啊啊啊啊，昨天折腾了半个早上总算完成，今天乖乖跑来mark一下。一眨眼过了一个月，9月这段期间项目多，还带着小徒弟做项目，一边教还要一边赶进度。真的是...[2018/10/10]
经验首页