weiweitb8-CSDN博客

原创 sass学习(二)：注释，混合器与继承

一静默注释注释可以作为简单的样式说明，解释你当时为什么这样写，但是你不一定希望浏览网站的每个人都能看到你的注释，sass提供一种注释方式，当在生成css时会自动抹去注释，即使用//进行注释，而使用/* */进行注释时则会在css文件中显示注释，除非/* */使用在原生css不该放置的地方，如属性和选择器中，注释会被抹去。二混合器当你的工程中需要重复使用大量相同的样式时，单单使用变量

2017-11-21 16:34:01 478

原创 sass学习(一)：变量、嵌套与导入

一使用变量sass使用的一大好处就是可以使用变量，对于那些重复使用的属性，可以通过变量名来引用。1.变量声明sass中变量通过$来声明，书写方法与CSS相似，属性值可以使用空格和逗号进行分割。与CSS属性不同的是，其变量可以声明在规则块外，在规则块内部声明的变量只能在本规则块内使用。举例如下：$nav-color: #F90;nav { $width: 100px; w

2017-11-14 19:52:02 3444

原创 React学习(八)：Redux基础

一 Action1.Action它是把数据从应用传到store的有效载荷，它是store数据的唯一来源，一般说来，view层的变化可以反映到Action上，然后通过store.dispatch()将action传到store，reducer在根据action和现有的state来更新状态。Action是一个js的普通对象，唯一的约束就是type属性。那么Action是由谁创造的呢？2.A

2017-11-06 15:02:11 339

原创 React学习(六)：路由

一 React Router1.优势通过将组件和路由关联起来，它能使UI和URL保持同步；它的另一个优势是，它提供了一种机制让你可以控制应用程序的流程。2.组件React Router提供了如下的3个组件：Router和Route：采用声明方式将路由映射到你的应用程序的UI层级。Link：一种在项目中导航的办法，用来替代原生中的a标签，使用如下About；他有一个较

2017-10-31 10:42:45 297

原创 React学习(五)：动画与拖放

一 React动画1. ReactCSSTransitionGroupReactCSSTransitionGroup元素必须包装在你需要实现动画效果的子元素外，它可以接收三个属性，transitionName(映射到css中包含实际动画定义的类名),transitionEnterTimeout, transitionLeaveTimeout (定义了动画的持续时间)。若设定动画名

2017-10-28 16:02:12 1936

原创 React学习(四)：使用组件构建应用程序

一属性校验1.propTypes可以用来记录组件，声明可以使用哪些属性，哪些属性是必须的，属性可以接受的数据类型等，当误用了组件时会在控制台显示一个错误信息。语法为：Greeter.propTypes = { salutation: PropTypes.string.isRequired } 。可以为属性设置默认值，语法如下：Greeter.defaultProps = { saluta

2017-10-28 12:44:48 238

原创 React学习(三)：性能调优

从底层设计开始，React就充分考虑了性能问题，在更新UI时，他使用很聪明的技巧来尽可能减少耗时的DOM操作。一子级校正当你改变了组件的状态时，会触发一次新的重绘，React会构建一个虚拟的DOM来呈现UI的状态，并与当前的虚拟DOM相对比，得出差异进而计算出哪些DOM元素需要进行增加，删除，更改等操作，这个过程就是子级校正。1.批处理React中调用setState之后不会立即

2017-10-27 10:21:06 335

原创 React学习(二)：组件的生命周期及数据流

一 React在生命周期的不同时刻都有对应的钩子函数：1加载阶段Class constructor -> componentWillMount -> render -> componentDidMount2 卸载阶段componentWillUnmount3 props更改componentWillReceiveProps ->shouldComponentUpdate -

2017-10-25 10:04:08 185

原创 node.js升级后npm工作报错

node升级后npm工作报错如下：npm ERR! Cannot find module 'internal/fs'npm ERR! npm ERR! If you need help, you may report this error at:npm ERR! npm ERR! Please include the following file with any suppor

2017-10-18 11:02:01 1749

原创 React学习(一)：React入门

一 React 的优点1.响应式渲染React 最大的优点在于其响应式渲染，相对于传统的更新整个页面的缓慢而言，React 会生成一个虚拟的DOM，当用户进行操作使状态有所变化时，React会计算出一个新的虚拟表现，计算出虚拟页面的当前版本与新版之间的差异，基于这些差异对DOM进行必要的最少更新。2.灵活的文档模型抽象表现React 内置了一个自己的UI轻量级模型，以抽象出UI底层

2017-10-17 09:57:46 862

原创 Echarts基础(二)柱、饼、折线图

常见图制作柱状图与折线图使用横坐标轴设置类目，series里设置对应数据，其type分别为‘bar'和’line‘，这里面柱状图的data对应于每个柱子的高度，而折线图的数据则为连成线的多个点，若为多线图，则需要多组对应的name，type与data。饼图没有横纵坐标的设置，其data多为[{value:12,name:test1},{value:34,name:test2}]的样式，这里

2017-10-11 21:03:44 383

原创 jQuery基础复习篇

一 jQuery效果1⃣️效果常见的效果设置有隐藏与显示效果(hide, show, toggle)如$("p").hide(speed, callback)；还有淡入淡出效果(fadeIn, fadeOut, fadeToggle, fadeTo),其中fadeTo可以淡入到给定的透明度，$(selector).fadeTo(speed,opacity,callback)。有上下滑动的

2017-10-11 15:01:44 198

原创 Echarts基础(一)：散点图

一 Echarts制作散点图Echarts的使用：首先需要设定一个div用来承载图表，然后初始化echarts实例。将所有的数据与配置写在option中，需要设置的几部分内容为：一）backgroundColor：背景颜色，可设置为某一个固定的背景颜色，也可设置为渐变的背景颜色，如下:(参数为x轴，y轴，z轴位置)backgroundColor: new echarts. graphi

2017-10-10 10:55:01 31655 1

原创 jquery实现无缝轮播

1.目标效果现在网站上常常用到轮播的效果，最常见的无缝轮播的用户体验更好，即实现几个图片的循环轮放，可通过左右按钮点击进行轮播，也可以定时自动轮播。2.实现思路1）为显示区域设置宽高，再将内容器的宽度调大，并将所有图片都向左浮动，将第一张图片复制并放到最后，设置显示容器的overflow为hidden。2）点击左右按钮时，实现在绝对定位下的left的动画改变效果，当轮播至最后一张

2017-09-28 10:34:03 504

原创 H5实战(七)：列表布局切换

1.目标效果实现信息列表的平铺布局与列表布局的切换效果。2.实现思路1）写出信息列表与切换按钮，切换按钮可使用正方形中间插入span的白条而形成两种不同的按钮。2）为两种不同布局设置样式，一种是列表形式，另一种为平铺方式，可设定每个li宽度并向左浮动而形成。3）为没有被选中的按钮添加类，当点击事件发生时，判断若是此类，则切换布局（即将列表部分的类名改变）。3.代码实现

2017-09-22 09:50:09 2367

原创 H5实战(六)：固定边栏滚动特效

1.目标效果现在各大网站常常使用固定边栏滚动特效，即页面内容较长时，边栏先随着页面向下滚动，当边栏滚动到底时，则不会随着页面的滚动而滚动，而是固定在页面上保持不动。2.实现思路1）设计好页面布局，页面向左浮动，边栏向右浮动。2）当滚动高度加上页面高度大于侧边栏的高度时，应设置侧边栏的position为fixed，否则就将position变回static。3.代码实现1）jq

2017-09-21 15:36:04 838

原创 H5实战(五)：幽灵按钮效果

1.目标效果现在幽灵按钮是网站上十分常见的一种效果，通过使按钮变的薄透来提高页面的美观性，这里我们要实现的效果是有三个图片，在鼠标悬浮时可以放大并旋转360度，每个图标下面都有一个幽灵按钮，当鼠标悬浮时会有四边飞入，tooltip等效果，下面介绍下实现的具体过程。2.实现思路1）图片部分：首先设定整体盒子的宽度，然后设定每个装有图片和按钮的盒子的宽度，span标签以背景图片的方式导

2017-09-20 10:04:33 3078 1

原创 H5实战(四)：导航栏

1.导航栏效果导航栏主要分为两种：水平导航栏和垂直导航栏，其中水平导航栏又有普通导航栏与简约导航栏等样式设置。2.实现思路：导航栏的实现主要使用ul标签结合a标签，设置a标签为块元素，可为其设置宽高，将其向左浮动就可形成水平导航栏，取消其默认的原点与下划线样式，并为鼠标移入时增加样式，颜色较深的背景色的导航栏，鼠标移入时，多会修改移入部分背景色，背景为白色的导航栏在鼠标移入时，可为其添

2017-09-18 11:03:59 5791

原创 H5实战(三)：路径图页面布局

1.目标效果实现一个不同阶段的导航布局，如实现学习的各个阶段的路径导航页面。有一条线为轴，左侧是每个阶段的题目，右侧为相应的学习课程的展示。2.实现思路1）首先制作左侧导航部分的效果，使用div的左边框作为轴，并以span显示为正方形作为轴上的点，

2017-09-15 11:26:08 1239

原创 js—栈的使用

1.栈的概述栈是一种高效的数据结构，他是一种特殊的列表，只能通过列表的一端访问，具有后入先出的特点。2.常用的变量和方法栈的三个主要方法是push(), pop(), peek()，分别用来压入栈，弹出栈，返回栈顶元素而不删除。clear()方法可清除栈内所有元素，length属性记录栈内元素个数，empty表示栈内是否有空元素，变量top可以标记栈顶的位置。3.栈的常见应用数

2017-09-14 11:14:46 449

原创 js—列表的使用

1.列表的实现function List(){ this.listSize=0; this.pos=0; this.dataStore=[]; this.clear=clear; this.find=find; this.toString=toString; this.insert=insert; this.append=ap

2017-09-14 10:50:38 7213

原创 js—数组总结

一数组数组在javascript里面是一种特殊的对象，js中的数组非常灵活，可以通过不同方式进行查找和排序。1.创建与读写数组创建方式有以下4种：var arr =[]; var arr = [1,1,2,3]; var arr = new array(); var arr = new array(1,1,12,3);前两种方式更为常用。可使用［］元素进行读写，如读取arr[1]

2017-09-13 09:20:04 286

原创 H5实战(二)：Tab标签切换效果

一 Tab标签切换效果的思路与实现1.目标效果：实现鼠标移到不同的tab标签上，下面对应的内容进行切换的效果，同时，被选中的选项卡有左右边框，无下边框，而未被选中的则存在下边框。2.实现思路1）点击选择的部分使用ul实现，设定好整个装标题的div的宽度，然后计算出每个标题所占的宽度，并设置文字居中即可，这里应注意留出边框的位置，比如装标题的容器宽度为300，有5个标题，那么可设置每

2017-09-11 16:57:41 9711

原创 H5实战(一)：照片墙效果

照片墙的思路与实现1.实现思路＊首先在html中插入图片，设置整个容器的整体大小，然后设置每个图片的宽度，并为它们添加边框边距等，设置成为相框的效果。＊然后为每个图片设置旋转角度，top，left等，此时每个图片都有了一定的倾斜度。＊最后制作鼠标悬浮效果，当鼠标放置时，使图片旋转角度为0，图片变大，并使其显示在最上层（可设置z-index实现），为其设置动画过渡效果。2.代码实

2017-09-05 15:02:10 7348

原创 css复习整理(五)：CSS3新特性

一. 边框与背景1. 边框border-radius:倒角属性，可为边框添加倒角；border-image可以使用图片来创建边框，如url(/i/border.png) 30 30 round；box-shadow可用来向框添加阴影，其语法为box-shadow: h-shadow v-shadow blur spread color inset。2. 背景background

2017-08-21 14:09:53 262

原创 css复习整理(四)：css定位

一.定位机制css有三种基本的定位机制：普通流、浮动和绝对定位。除非专门指定，否则所有框都在普通流中定位。也就是说，普通流中的元素的位置由元素在 (X)HTML 中的位置决定。块级框从上到下一个接一个地排列，框之间的垂直距离是由框的垂直外边距计算出来。行内框在一行中水平布置。可以使用水平内边距、边框和外边距调整它们的间距。但是，垂直内边距、边框和外边距不影响行内框的高度。由一行形成的水平框

2017-08-21 10:35:33 206

原创 css复习整理(三)：盒子模型

一.盒子模型1.盒子模型 CSS中，一个独立的盒子模型由content(内容)、border（边框）、padding(内边距)和margin（外边距）4个部分组成。通常设置的width，height是实际内容的尺寸，元素框的最内部分是实际的内容，直接包围内容的是内边距，内边距呈现了元素的背景，内边距的边缘是边框。边框以外是外边距，外边距默认是透明的，因此不会遮挡其后的任何元素，盒子模型如

2017-08-18 15:19:12 385

原创 css复习整理(二)：css样式

一.样式：1.背景样式: background-color, background-image, background-position, background-attachment, background-repeat，可以通过这些属性设置背景的颜色，背景图片［如background-image: url('image.png')］，背景图片所在位置，是否重复以及滚动时背景图片不动等

2017-08-17 16:37:10 214

原创 css复习整理(一)：选择器与创建

css的选择器分为：1.标签选择器 2.类选择器 3.id选择器；然后选择器又可以进行各种组合：＊后代选择器：父代名后代名｛属性名：属性值｝后代元素为所有后代（子子孙孙元素；＊子代选择器：父代名> 子代名｛属性名：属性值｝子元素为父元素的儿子元素，不包括孙元素等；＊兄弟选择器：如table + ul｛属性名：属性值｝解释为紧临table元素的ul元素；＊

2017-08-16 10:42:44 299

原创数组中单独元素问题

问题描述：给定整数数组，除了一个元素之外，每个元素都会出现两次，找到那个单一的元素。解析思路：思路一：先对数组进行排序，然后每一对的值应该相同，当在比较中出现不同时，则奇数位（在数组中的序号为偶数）上的数值就是所求，代码如下： /** * @param {number[]} nums * @return {number} */var singleNumber = fu

2017-08-11 15:48:23 574

原创 js中的this关键字

js中的this关键字在不同场合下所指的内容不同，但总的原则是指向调用他的函数，共分为以下几种情况：1.this在函数中的调用：这属于全局性的调用，此时this相当于global；var x = 1; 　　function test(){ 　　　　alert(this.x); 　　} 　　test(); // 1 2.this作为对象方法的调用，此时this指向上一级对

2017-08-10 11:49:20 151

原创求水中岛周长问题

问题描述：给出一个二维整数网格形式的地图，其中1表示土地，0表示水。网格单元水平/垂直（不对角线）连接。网格完全被水包围，并且正好有一个岛（即，一个或多个连接的地面细胞）。岛上没有“湖泊”（水内没有连接到岛上的水）。一个单元格是具有边长为1的正方形。网格为矩形，宽度和高度不超过100，确定岛的周长。[[0,1,0,0], [1,1,1,0], [0,1,0,0], [1,1,

2017-08-03 15:31:05 295

weiweitb8的博客