SundayAaron-优快云博客

原创我的web前端2016

校园：大学生活是很自由的，认识了很多朋友，同时也遇到了我现在的女朋友。大学是学的网络专业，专业课是和路由器交换机打交道，也有Linux PS AI这些课程。但是我最终选择了web前端这行。相对于小学到高中的课程，我更喜欢大学的课程，兴趣是最好的老师。高中那些死板的课程真的是枯燥乏味。但是大学就不一样了，都是我喜欢学习的，而且以后会用到的东西。大学上课的时候我都是非常认真的坐在第一排听讲，各科老师总

2016-12-30 10:05:10 3205 1

原创微信小程序开发之——weui-wxss的使用

概述：WeUI 是一套同微信原生视觉体验一致的基础样式库，由微信官方设计团队为微信内网页和微信小程序量身设计，令用户的使用感知更加统一。包含button、cell、dialog、 progress、 toast、article、actionsheet、icon等各式元素。预览：用微信web开发者工具打开dist目录（请注意，是dist目录，不是整个项目） Github下载地址： https

2016-12-13 11:33:55 21073 4

原创微信小程序开发之——flex布局

打开微信小程序开发工具，新建Hello word项目，删除掉无用的代码。flex-direction flex-direction属性表示布局的方向有两个值： row | column 默认属性是row 行布局html代码如下：<view class="section"> <view class="section__title">flex-direction: row</view>

2016-12-06 15:36:29 13686 2

原创使用css3 filter滤镜功能实现图片自动变色效果

预览图：关键代码：@keyframes pulse { from { filter: hue-rotate(0); } to { filter: hue-rotate(360deg); } }全部代码：...

2019-01-03 11:58:32 2273 4

原创通过原生js 简单的实现过滤html标签功能

使用场景：想输出一个div里的纯文本内容，例如：<div id="divA">This is <span>some</span> text <br>123 <p>5555</p></div>解决方案：<script> var div=

2018-09-06 09:34:02 2062

原创 js计算斐波那契数列

斐波那契数列简介：斐波那契数列（Fibonacci sequence），又称黄金分割数列、因数学家列昂纳多·斐波那契（Leonardoda Fibonacci）以兔子繁殖为例子而引入，故又称为“兔子数列”，指的是这样一个数列：1、1、2、3、5、8、13、21、34、……在数学上，斐波纳契数列以如下被以递推的方法定义：F(1)=1，F(2)=1, F(n)=F(n-1)+F(n-2)（n&g...

2018-08-25 10:12:36 1541

原创 element Tooltip 提示组件修改背景颜色箭头颜色

组件官方文档：http://element-cn.eleme.io/#/zh-CN/component/tooltip需求：官方只给了两套主题颜色，无法满足某些需求。修改方法：添加自定义类名popper-class="test"<el-tooltip content="Top center" placement="right" popper-class="t...

2018-08-08 16:18:09 15212 1

原创简单粗暴的移动端图片浏览插件demo

使用方法：首先引入 jQuery<script src="./fly-zomm-img.min.js"></script>再引入图片浏览插件<script src="./fly-zomm-img.min.js"></script>无需额外引入css样式文件HTML结构：<div id="conten

2018-08-03 16:08:27 5020 1

原创 js生成不重复的随机数

需求：js生成不重复的随机整数。基础版： var originalArray = [1, 2, 3, 4, 5]; originalArray.sort(function () { return 0.5 - Math.random(); }); console.log(originalArray);实现思路：首先定义一个数组，然后用sort方法把数组打乱，最后输出...

2018-05-03 16:10:19 7082

原创 js生成指定范围的随机整数（例如0-100）

1：功能需求js生成指定范围的随机整数有时候想要实现通过js Math.random()方法来实现获取指定区间的随机数。2：需求实现定义一个random()函数，原理是随机数和最大值减最小值的差相乘最后再加上最小值。function random(min, max) { return Math.floor(Math.random() * (max - min)) + min; ...

2018-04-28 17:41:36 18282

原创前端自动化刷新工具 live-server 的介绍与使用方法

前言介绍前端开发调试的时候以前总需要不断的刷新看效果，效率很差。使用live-server后，当鼠标离开编辑器之后会自动为我们刷新浏览器。liver-server的安装使用cnpm全局安装cnpm install -g live-server liver-server的使用windows下在cdm切换到当前项目目录，输入命令live-server即可。如图：...

2018-03-24 10:45:57 4446

原创新手学vue.js（一）基础入门

前言介绍对于前端人员来说，学习VUE很容易，我是从事WEB前端的，开始准备学习VUE。首先从官方文档看起点击进入VUE官网。VUE是轻量级框架易于上手和其他框架对比hello world例子安装开发版本下载生产版本下载学习的话还是选择开发版比较好，有错误提示。能力要求需要具备 HTML、CSS 和 JavaScript 中级前端知识。一定要有前端知识，不然驾驭不了。声明

2017-06-23 14:40:13 3231

原创 windows下搭建webstorm+nodejs环境

前言：分享一下自己在搭建环境中遇到的坑，按照我下面的顺序配置的话，应该都没问题。下面进入正题：1.安装webstorm 已经在使用webstorm的同学请直接跳过此步骤去webstorm官网下载官方安装包，一路NEXT。安装完毕。最简单的激活方法：在输入注册码那一栏选择用户名和注册码那一个选项，然后输入一下信息。用户名是： lan yu注册码： CNEKJPQZEX-e

2017-03-23 16:23:14 1231

原创 javascript学习之小案例（30）——瀑布流

效果图：HTML骨架部分：CSS样式部分：JS部分函数：在线效果预览：源码已经放在我网站上了，点击预览效果优快云免积分下载地址：点击下载源码个人微信公众号：如果我的文章对您有帮助，微信或支付宝打赏：微信：支付宝：

2017-03-20 16:57:56 995

原创 javascript学习之小案例（29）——js时钟

1、效果图：项目已经放在了我的个人网站上——>点击查看效果2、实现思路 html部分使用flex布局来定位； js部分使用date对象和定时器setInterval实现，date对象相关知识点请参考我之前的两篇博客。javascript学习之日期字符串（14）—— 时间和日期 Date类型 javascript学习之日期字符串（15）—— 时间和日期常用方法3、主要部分代码h

2017-02-22 14:54:55 1455

原创 javascript学习之 function类型（29）——浏览器对象模型 Bom 简介

1、介绍： 1.BOM（Browser Object Document）即浏览器对象模型。 2.由于BOM主要用于管理窗口与窗口之间的通讯，因此其核心对象是window； 3.由于BOM主要用于管理窗口与窗口之间的通讯，因此其核心对象是window； 4.BOM缺乏标准，JavaScript语法的标准化组织是ECMA，DOM的标准化组织是W3C，BOM最初是Nets

2017-02-13 10:25:22 566

原创 javascript学习之 function类型（28）——function类型 this应用

1、this this是一个引用，指向函数被调用时的对象。示例代码：var name="张三"; function show() { alert(name); } window.show(); //this指向的就是window对象 window是js内置好的对象效果图：例子2：

2017-02-08 16:35:43 828

原创 javascript学习之 function类型（27）——function类型内部属性

1、arguments arguments 属性:指向一个类似数组但不是数组的对象，存储的是实际传递给函数的参数，而不局限于函数声明所定义的参数列表示例代码：function show(a,b)//定义show函数 { if(arguments.length==2)//如果实际输入两个值 alert(a+b);

2017-02-07 16:25:12 859

原创微信小程序开发阅读&电影小程序之（3）——新闻列表页面构建-数据绑定-for循环

1、效果图预览2、准备工作在拿到效果图后不要先急着去写代码，而是要去分析一下页面的整体结构，用什么方式定位和布局。小程序里建议使用flex布局，因为小程序对flex的支持是很好的。上一篇博客中完成了轮播图部分，接下来继续完成下面的新闻列表部分3、wxml部分新闻列表部分整体使用flex纵向布局比较合适，先把页面内的元素标签和类名写好。 <view class="post-conta

2017-02-06 16:23:00 15579 1

原创 win10下配置webstorm自动编译SASS

最近刚接触SASS，语法规则还没学习，就先研究下环境的配置吧。 webstorm是一款很强大的编译器，一直在使用。1、安装ruby下载安装包：优快云免积分下载rubyinstaller-2.3.3-x64 下载后双击安装，路径默认就可以，安装的时候记得勾选下面两个选项安装完毕后点击开始菜单中的 Start Command 输入 gem install sass安装完毕后输入 sa

2017-01-19 15:45:07 5373

原创 javascript学习之正则表达式（26）——常用验证规则

1、验证手机号示例代码： var reg=/^1[3578]\d{9}$/; var phone="13899998888"; alert(reg.test(phone));效果图： 2、把手机号中间四位显示为****示例代码： var reg=/(\d{3})\d{4}(\d{4})/; var phone="13899

2017-01-19 10:35:08 836

原创 javascript学习之正则表达式（25）——exec方法

1、使用exec()方法返回数组示例代码： var reg=/[a-z]+\s\d{4}/; //匹配规则：小写字母a-z 空格四个数字 var str="hello 2017"; alert(reg.exec(str));效果图： 2、捕获性分组示例代码： var re

2017-01-18 16:08:21 862

原创微信小程序开发阅读&电影小程序之（2）——阅读页面轮播图实现

前言：今天打开微信官方文档发现轮播图组件更新了两个功能，但是目前暂未启用，估计过几天就能使用了。属性名类型默认值说明 indicator-color Color rgba(0,0,0,.3) 指示点颜色（这个属性目前暂未启用） indicator-active-color Color #000000 当前选中的指示点颜色（这个属性目前暂未

2017-01-18 10:42:08 2803 2

原创 javascript学习之正则表达式（24）——字符匹配

1、\s \s 匹配空白字符、空格、制表符和换行符示例代码： var reg=/java\sscript/; var str="study java script"; alert(reg.test(str));效果图： 2、| a | b | c 匹配 a或b或c中的任意一个示例代码：

2017-01-11 16:42:32 1418

原创 javascript学习之正则表达式（23）——字符集

1、 . . :代表任意字符（除换行外）示例代码： var reg=/b..k/; var str="book"; alert(reg.test(str));效果图： 2、? * + ?：出现0次或1次 *：出现0次或多次 +：出现1次或多次示例代码： var reg=

2017-01-09 11:36:27 1364

原创 javascript学习之正则表达式（22）——String正则方法

除了RegExp中的test()和exec()方法，String对象也提供了4个使用正则表达式的方法。1、match(pattern) match(pattern)返回pattern中的子串或null，返回数组，数组中含有匹配的字符串。示例代码： var reg=/hello/; var str="hello world,hello matc

2017-01-05 14:51:43 1977

原创 javascript学习之正则表达式（21）——RegExp类型

创建正则表达式的两种方法 1：使用 new 运算符 RegExp(string,pattern) i:不区分大小写 g:全局匹配 m:多行匹配 var reg=new RegExp(“hello”,”ig”); 2:字面量方式 var reg=/hello/ig;使用正则表达式进行验证的方式：tes

2017-01-04 11:44:52 1641

原创微信小程序开发阅读&电影小程序之（1）——欢迎页面的创建

先看下最后的效果图：首先打开开发工具，创建quick start项目，简单的修改一下。把Index文件夹重命名为welcome；底部的hello world改为一个类似于按钮的样式；添加背景颜色；修改顶部样式；按钮的实现：welcome.wxml <view class="usermotto"> <text class="btn">开启小程序之旅</text> </vie

2017-01-03 11:52:40 6701 3

原创 javascript学习之正则表达式（20）—— 概述

例子1，使用普通方法：验证qq号是否合法：5-15位，不能以0开头，全是数字 var qq="1234566"; if (qq.length>=5 && qq.length<=15) { if (qq.charCodeAt(0)!=48) { if (!isNaN(q

2016-12-29 10:53:33 2614

原创 javascript学习之日期字符串（19）—— 字符串常用方法(下)

1、substr(index1,index2) substr(index1,index2) 第一个参数表示截取的起始索引，第二个参数表示截取的字符的个数示例代码：var ss="hello word 好好学习 abc123";alert(ss.substr(5,5));效果图： 2、substring(index1,index2) substring(index1,index2)第一

2016-12-28 16:01:43 3066

原创 javascript学习之日期字符串（18）—— 字符串常用方法(中)

1、indexOf(str)方法 indexOf(str) 默认返回在字符串中第一次出现的索引示例代码： var ss="aaabbbcccdddeeebbbfffghi"; var index=ss.indexOf("bbb"); alert(index);效果图：”bbb”第一次出现在下标为3的位置 2、indexOf(str,positio

2016-12-28 11:38:07 1226

原创 javascript学习之日期字符串（17）—— 字符串常用方法(上)

1、charAt()方法字符串中的每个字符都有一个索引，从0开始； charAt(index);根据索引得到字符串中的某一个字符示例代码： var ss="abc0123def!@#"; alert(ss.charAt(0));效果图： 2、charCodeAt()方法返回索引对应字符的编码示例代码：var ss="abc0123def!@#";alert(

2016-12-27 15:14:51 1646

原创 VR探索之——aframe框架在浏览器显示全景照片

aframe介绍： A-Frame是一款开源的可通过定制HTML元素构建WebVR方案的框架。 github开源地址：https://github.com/aframevr/aframe/前几天公司项目中需要vr图片预览功能，所以我就开始研究一下如何在浏览器和手机端显示全景图片。在百度中找到了 aframe框架，看了官网的demo ，仅需几行代码就可以实现，太高大上了。所以就把经验分享给

2016-12-27 10:13:43 6012

原创微信小程序开发阅读&电影小程序之（0）——基础目录创建

我将带大家从0开始搭建一个小程序，我也是在一边学习一边写博客。也希望能和大家交流交流经验。之前是从事web前端的，上手小程序计较容易。0、效果图展示： 1、目录结构讲解：微信小程序有四种文件类型：*.wxml *.wxss*.js*.json wxml：类似网页里的html页面； wxss：类似于网页里的css样式； js：js文件，用来定义函数方法等； json

2016-12-23 10:43:06 4889 3

原创 javascript学习之日期字符串（16）—— 字符串简介

先来看一个小例子： var a="abc"; var s=new String("abc"); alert(typeof a+"=====>"+typeof s);效果图： a和s的类型是不同的我们再来看下a和s的值是否相等 var a="abc"; var s=new String("abc"); a

2016-12-20 16:33:44 2091

原创 javascript学习之日期字符串（15）—— 时间和日期常用方法

1、通用方法 UTC() 方法可根据世界时返回 1970 年 1 月 1 日到指定日期的毫秒数。参数描述 year 必需。表示年份的四位数字。 month 必需。表示月份的整数，介于 0 ~ 11。 day 必需。表示日期的整数，介于 1 ~ 31。 hours 可选。表示小时的整数，介于 0 ~ 23。 minutes 可选。表示分钟的整数，介

2016-12-20 10:48:59 3209

原创 javascript学习之日期字符串（14）—— 时间和日期 Date类型

js提供了Date类型来处理日期和时间获取系统当前日期时间 var date=new Date(); alert(date);效果图：自定义不同的时间格式：1000毫秒： var d1=new Date(1000);//从1970.1.1 08：00开始 1000毫秒 alert(d1);效果图：指定2016年6月20号：

2016-12-19 16:26:47 3477

原创 javascript学习之数组（13）—— 数组排序

数组中的排序使用的是sort方法，示例代码： sort方法默认是按照ASCII字符升序排序的注：ACSII码对照表 http://www.51hei.com/mcu/4342.html var a=[1,50,25,60,55];//定义一个数组 a.sort(); alert(a);效果图：例子2： var b=[

2016-12-19 15:06:44 3645

原创 javascript学习之数组（12）—— 数组常用方法

toString方法 toString() ：把数组中的数据转换成字符串并返回示例代码： var arr=["张三",25,"北京"]; alert(arr.toString());效果图： join方法 join() ：使用指定的分隔符把数组中的数据连接成字符串示例代码：var arr=["张三",25,"北京"];alert(arr.join("*"

2016-12-16 15:40:54 5578

原创 javascript学习之数组（11）—— 数组创建及使用

创建及使用1，使用new方法创建数组：var arr=new Array(10); //定义了一个可以存储10个数的数组向数组中添加数据： arr[0]=1; arr[1]=2;输出数组中的内容： var arr=new Array(10); arr[0]=1; arr[1]=2; alert("arr0:"

2016-12-15 16:28:52 4750