前端设计经验 - 技术经验

数组的基本操作

push() 在数组末尾添加一个元素 pop() 在数组末尾删除一个元素 shift() 删除数组第一个元素 unshift 在数组开头添加一个元素 concat() 方法用于连接两个或多个...[2018/10/10]

JS判断类型

JS中的typeof方法可以查看数据的类型，如下： 1 console.log(typeof 2); number 2 console.log(typeof "2"); string 3 console.log(typeof true); boolean 4 console.l...[2018/10/10]

H5 签到功能

Introduce(介绍) 用户签到的H5例子（c +jquery，无图片），由于网上找的的用户签到例子都不好，要不就是好多图片组成的，要不就大量冗余代码，所以特意做了个签到界面（移动端）。 User sign sample page for mobile using h5 which only...[2018/10/10]

Get与Post的主要区别

这里附一篇自己的简短理解 get相对于post更不安全，虽然都可以加密 get的参数会显示在浏览器地址栏中，而post的参数不会显示在浏览器地址栏中；使用post提交的页面在点击【刷新】按钮的时候浏览器一般会提示“是否重新提交”，而get则不会；用get的页面可以被搜索引擎抓取，而用p...[2018/10/10]

call/apply以及this指向的理解

　　javascript是面向对象的语言，Function也是一种对象，有自己的属性和方法。call和apply就是js函数自带方法，挂在Fucntion.prototype上。　　一般调用某函数时，直接“函数名（参数）”的写法即可，函数内部的this指向函数的调用者。 function...[2018/10/10]

我想这次我真的理解了 JavaScript 的单线程机制

今天面试的时候被问到一个问题，是关于 JS 异步的。当时我脑海中闪过了一个单线程的概念，但却没有把真正的原理阐述清楚。所以回来特意重新回顾了前面单线程和异步相关的一些知识点。虽然之前学习的时候也接触了单线程模型相关的东西，但当时理解得并不是很清楚和明白。所以这道面试题也没有给出一语中的的答案...[2018/10/10]

JQuery 获取除某指定对象外的其他对象 :not() 与.not()

.not() 遍历方法从匹配元素集合中移除元素 :not() 选择器选取除了指定元素以外的所有元素。 <ul> <li>li...[2018/10/10]

为不同的屏幕尺寸提供不同的图片（为那些没有必要下载全尺寸大图的设备节省带宽）

为不同的屏幕尺寸提供不同的图片　　现在我们可以让图片完美缩放，而且也知道了如何限制特定图片的显示尺寸。图片尺寸必须比其显示尺寸更大以保证渲染效果，否则的话图片可能看起来很糟糕。基于这个原因，图片文件的体积就永远比实际显示所需的大。　　很多人都在研究这个问题，尝试为较小的屏幕尺寸提供较小...[2018/10/10]

前端学习之路之CSS （四）

Infi-chu: http: www.cnblogs.com/Infi-chu/ CSS盒子模型概念：CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。盒模型允许我们在其它元素和周围...[2018/10/10]

使用css实现三角符号

关于使用c 制作三角符号，网上有很多的例子了，在这里只是为了详细的向各位解释一下三角符号的原理下图，是一个长宽为100px，边框宽度为100px的一个元素，由此可见，在c 中上下左右的边框相交处并不是一个直线，所以，可以根据此属性进行编写三角符号那么如何使用c 的该属性来实现三角符号的...[2018/10/10]

vue axios 简单封装以及思考

先安装 axios npm install axios axios的详细介绍以及用法就不多说了请移步 github ?? https: github.com/axio axios 下面是简单的封装一个 http.js，在此说明 ch...[2018/10/10]

纯css3实现宠物小鸡实例代码_css3_CSS

最近看了很多关于c 3的知识和文章，觉得c 3用起来很方便，使用c 3的话，在页面布局上可以省去很多不必要的代码。所以最近用c 3仿写了我每天都照顾的宠物小鸡的模样，第一次写，有些细节处理的不够好。先看最终效果图：接下来是我书写的步骤：首先是html,分别写出云朵，小鸡的身体，鸡冠，眼睛，...[2018/10/10]

详解canvas drawImage()方法绘制图片不显示的问题

canvas有个很强大的api是drawImage()（w3c）：他的主要功能就是绘制图片、视频，甚至其他画布等。问题：慕名赶来,却一脚踩空,低头一看,地上一个大坑。事情是这样的,在我看完w3c的介绍和很有说服力和教学力的demo后,本着实践出真知的思想决定上手一试,这一试不要紧~ 我按照...[2018/10/10]

详解左右宽度固定中间自适应html布局解决方案_HTML/Xhtml

本文介绍了详解左右宽度固定中间自适应html布局解决方案，分享给大家，具体如下： a.使用浮动布局 html结构如下 <div cla ="box"> <div cla ="lef...[2018/10/10]

HTML5 和小程序实现拍照图片旋转、压缩和上传功能

原文地址： github.com/whinc/blog/… 最近接到一个“发表评论”的需求：用户输入评论并且可以拍照或从相册选择图片上传，即支持图文评论。需要同时在 H5 和小程序两端实现，该需求处理图片的地方较多，本文对 H5 端的图片处理实践做一个小结...[2018/10/10]

HTML5 视频播放(video),JavaScript控制视频的实例代码

具体代码如下所示： <html lang="en"> <head> <meta charset="UTF-8"> <title>Documenttitle> <...[2018/10/10]

JS函数内部属性之arguments和this实例解析

在函数内部，有两个特殊的对象：arguments和this。 1、arguments 　　arguments是一个类数组对象。包含着传入函数中的所有参数。但这个对象还有一个名叫callee的属性，该属性是一个指针，指向拥有这个arguments对象的函数。　　经典案例：阶乘函数 ...[2018/10/10]

JavaScript检查数据中是否存在相同的元素（两种方法）

这里是两个用于数组中查找重复元素的demo，可以看看啦 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title<...[2018/10/10]

微信小程序wx:for循环的实例详解

列表渲染 wx:for 在组件上使用 wx:for 控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。默认数组的当前项的下标变量名默认为 index，数组当前项的变量名默认为 item。 <view wx:for="{{array}}"> {...[2018/10/10]

CKEditor4配置与开发详细中文说明文档

一、CKEditor4安装安装CKEditor 是很容易的。选择合适的过程（新安装或升级），按下面描述的步骤安装。 1、新安装第一次安装CKEditor，按如下方式进行： 1) 从CKEditor 网站：http: ckeditor.com/d...[2018/10/10]

webpack4.0 入门实践教程

webpack 可以看做是模块打包机：他做的事情是，分析你的项目结构，找到 JavaScript 模块以及其他的一些浏览器不能直接运行的扩展语言（ Sc 、 TypeScript 等），将其打包为合适的格式以供浏览器使用构建就是把源代码转换成发布到线上可执行的 JavaScript 、CS...[2018/10/10]

npm scripts 使用指南详解

Node 开发离不开 npm，而脚本功能是 npm 最强大、最常用的功能之一。本文介绍如何使用 npm 脚本（npm scripts）。一、什么是 npm 脚本？ npm 允许在package.json文件里面，使用scripts字段定义脚本命令。 { ... ...[2018/10/10]

webpack@v4升级踩坑(小结)

之前看到各大公众号都在狂推 webpack 新版发布的相关内容，之前就尝试了升级，由于部分插件的原因，未能成功，现在想必过了这么久已经可以了，今天就来试一下在我的项目中升级会遇到哪些坑。查阅更新日志在安装更新之前，先大致浏览了一下更新日志，对大部分用户来说迁移上需要注意的应该就是这些点...[2018/10/10]

JS中验证整数和小数的正则表达式

验证整数和小数的正则表达式　网上很多关于验证小数的正则表达式，但是很多都不是百分百正确，所以我结合一些前辈的经验，自己写了一个。　　验证非0开头的无限位整数和小数。整数支持无限位，小数点前支持无限位，小数点后最多保留两位。　　js代码如下：　 var reg = ...[2018/10/10]

angularJs中json数据转换与本地存储的实例

1.html:把json对象转换成json字符串 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo...[2018/10/10]

webpack之引入图片的实现及问题

前言：本文演示了 webpack如何在c 文件中引入图片； webpack如何在html中引入图片；需要安装配置的loader: file-loader; 为何要使用file-loader：如果我们希望在页面引入图片（包括img的src和backgroun...[2018/10/10]

在angularJs中进行数据遍历的2种方法

2种方式分别为： 1、数组数据遍历 2、对象数据遍历 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <script src="ang...[2018/10/10]

详解webpack之图片引入-增强的file-loader：url-loader

前言：本文介绍了url-loader（增强的file-loader）； url-loader作用：根据需求选择性的把某些小图片编码成base64格式写进页面；从而减少服务器请求。优化性能。 url-loader解决的问题: 如果图片较多，会发很多http请求，会降低页面性能。url-loader...[2018/10/10]

angularJs提交文本框数据到后台的方法

如下所示： ng-model="name" 填写的数据提交到index.php index.html <!doctype html> <html lang="en"> <head> <meta charset="U...[2018/10/10]

Bootstrap fileinput 上传新文件移除时触发服务器同步删除的配置

在Bootstrap fileinput中移除预览文件时可以通过配置initialPreviewConfig: [ { url:'deletefile',key:fileid } ] 来同步删除服务器上的文件和记录。但新上传的文件则需要其他方式来同步删除服务器记录。在配置中遇到的...[2018/10/10]

基于Angular中ng-controller父子级嵌套的相关属性详解

ng-controller是为应用变量添加控制器当有两个控制器father、child且child 在 father内，那child 可以称为子控制器，它将继承父控制器father的scope。child就可以访问到father的scope中的所有函数和变量。例： <...[2018/10/10]

Vue组件大全包括（UI组件,开发框架,服务端,辅助工具,应用实例,Demo示例)

Vue是一款比较流行的JS库，本文为大家介绍一些Vue组件,包括UI组件,开发框架,服务端,辅助工具,应用实例,Demo示例等开源项目一、Vue常用UI组件 element ★11612 - 饿了么出品的Vue2的web UI工具套件 Vux ★7503 - 基于Vue和WeUI的组件库 i...[2018/10/10]

js根据json数据中的某一个属性来给数据分组的方法

如下所示： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </he...[2018/10/10]

关于Bootstrap fileinput 上传新文件，移除时触发服务器同步删除的配置

在Bootstrap fileinput中移除预览文件时可以通过配置initialPreviewConfig: [ { url:''deletefile'',key:fileid } ] 来同步删除服务器上的文件和记录。但新上传的文件则需要其他方式来同步删除服务器记录。在配置中遇到的...[2018/10/9]

验证整数和小数的正则表达式

　　网上很多关于验证小数的正则表达式，但是很多都不是百分百正确，所以我结合一些前辈的经验，自己写了一个。　　验证非0开头的无限位整数和小数。整数支持无限位，小数点前支持无限位，小数点后最多保留两位。　　js代码如下：　　var reg = /^(([^0][0-9]+|0)\...[2018/10/9]

WebGL的3D框架比较 ThingJS 和 Three.js

随着flash的没落，浏览器的原生能力的兴起。在3D方面WebGL不管从功能还是性能方面都在逐渐加强。2D应用变为3D应用的需求也越来越强烈。 win10的画图板支持3D图片，2d工具photoshop也开始逐步集成了3D工具。下面就基于...[2018/10/9]

利用JS动态生成隔行换色HTML表格

用JS生成动态生成表格，行、列由用户输入，并使表格隔行换色方法一. 代码: 1 <!DOCTYPE html> 2 <html> 3 <head&g...[2018/10/9]

Vue2.5笔记：v-if 和 v-show指令

熟悉 Angular 的同学对指令肯定不会陌生，Vue中也借鉴了指令这一特性，在 Vue 中指令都是带有 v- 的特殊属性，那么指令有什么作用呢？我的理解就是：指令是用来控制 DOM 元素的行为，例如最简单的显示，隐藏。 Vue 中有很多指令，在今后的学习过程总我们会逐步的学习，今天我们就来...[2018/10/9]

WebSocket 学习笔记

WebSocket 学习笔记来自我的博客因为项目原因需要用到双工通信，所以比较详细的学习了一下浏览器端支持的 WebSocket. 并记录一些遇到的问题。简介 WebSocket 一般是指浏览器提供的 API 接口，允许 Web 页面通过 WebSocket 协议与远程主机进行双向...[2018/10/9]

ReactNative系列组件用法(一)

首先我们来认识view 改变一些特性，再来看看项目的变化我们新增flex布局的一些属性，再来看看项目的变化接下来我们来看看如果获取屏幕的分辨率关于图片的用法，reactNative这里也是很神奇呢先看效果图(博客园里有个人经常发这种色情图片，然后我今天找这种线上链接就去他的闪存里...[2018/10/9]

source map 的原理探究

线上产品代码一般是编译过的，前端的编译处理过程包括不限于转译器/Transpilers (Babel, Traceur) 编译器/Compilers (Closure Compiler, TypeScript, CoffeeScript, Dart) 压缩/Mi...[2018/10/9]

js面向对象学习1

我是菜鸟，老鸟勿看，继承多态等太多概念难以理解，还是从实践中慢慢学吧！争取能大致看懂网上的开源的代码。 -------------- 对象的组成：方法和属性属性关键词：静止的，状态方法关键词：动态的，过程，处理，带括号 -------------- js中的面向对象不是其他语言那样...[2018/10/9]

select获取选中项的值与文本

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <bod...[2018/10/9]

ReactNative组件之scrollView实现轮播

想要实现轮播效果，首先安装时间定时器接下来就是在我们的项目中使用定时器接下来我们将竖着的轮播图变成横着的接下来我们调整间距我们知道轮播图下方，还有5个圆点，那我们怎么做呢？拿到每一个圆点看对应的样式关于当前样式和小圆点颜色的改变见成品图我们要达到的效果是，哪一个...[2018/10/9]

基于 HTML5 Canvas 的组态电机控制面板

前言 HT For Web 提供完整的基于 HTML5 图形界面组件库。您可以轻松构建现代化的，跨桌面和移动终端的企业应用，无需担忧跨平台兼容性，及触屏手势交互等棘手问题。也可用于快速创建和部署，高度可定制化，并具有强大交互功能的拓扑图形及表盘图表等应用。HT for Web 非常适用于实时监控系统...[2018/10/9]

小程序解决方案 Westore - 组件、纯组件、插件开发

数据流转先上一张图看清 Westore 怎么解决小程序数据难以管理和维护的问题: 非纯组件的话，可以直接省去 triggerEvent 的过程，直接修改 store.data 并且 update，形成缩减版单向数据流。 Github: https: github.com/dntzhang...[2018/10/9]

H5新增的标签以及改良的标签

1》OL标签的改良 start type reversed:翻转排序 2》datalist标签自动补全的使用 3》progre 标签的使用:进度条 4》meter标签的应用 5》details展开收缩标签的使用-子标签summary(自动带有展开收缩的效果) 6》mark标...[2018/10/9]

cdn模式下vue的基本用法

我们知道jq是简化了dom操作，而react和vue则是通过使用虚拟dom的方式，不需要频繁的更改ui界面，而是通过更改数据的方式来更新界面。我们知道些jq插件时会在IFFE中传入jQuery，jQuery在此程序中映射为符号，这样可以避免$号被其他库覆写。其实vue中new Vue（）对象， ...[2018/10/8]