一滴墨-CSDN博客

原创 CSS实现单行、多行文本溢出显示省略号

如果实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来，当然还需要加宽度width属来兼容部分浏览。实现方法：overflow: hidden;text-overflow:ellipsis;white-space: nowrap;效果如图：但是这个属性只支持单行文本的溢出显示省略号，如果我们要实现多行文本溢出显示省略号呢。接下来重点说一说多行文本溢出

2017-10-25 08:07:37 454

原创取消chrome浏览器下input和textarea的默认样式

chrome浏览器下的input和textarea在聚焦的时候都有一个黄色的边框，而且textarea还可以任意拖动放大，这是不能容忍的，影响美观不说，有时候拖动textarea还会使页面布局错乱，所以决定重置这些样式取消chrome下input和textarea的聚焦边框：input,button,select,textarea{outline:none}取消chrome下textarea可拖动放

2017-10-25 08:01:17 1629

原创 JSON取值(key是中文或者数字)方式详解

先准备一个json对象用于演示var json = {'name':'zhangsan', '年龄':23, 404:'你可能迷路了'};使用JS中with关键字with(json) { console.log(name);//输出:zhangsan console.log(年龄);//输出:23 console.log(404);//输出:404,用这种方法读取key是数字

2017-08-10 07:21:56 10323 1

原创 vue 开发命名规范

views 命名views 文件夹下面是由以页面为单位的 vue 文件或者模块文件夹组成的，放在 src 目录之下，与 components、assets 同级。views 下的文件夹命名views 下面的文件夹代表着模块的名字由名词组成（car、order、cart）单词只能有一个（good: car order cart）（bad: carInfo carpage）尽量是名词

2017-07-21 14:32:55 3235

原创 JavaScript技巧

1. 空(null, undefined)验证当我们创建了一个新的变量，我们通常会去验证该变量的值是否为空(null)或则未定义(undefined)。这对于JavaScript编程来说，是一个经常要考虑到的验证。如果直接写，那么像下面这样：if (variable1 !== null || variable1 !== undefined || variable1 !== '') { let var

2017-07-10 10:54:10 354

原创 JavaScript对话框

在JavaScript中，对话框共有3种，这3种对话框分别使用以下3种方法定义：（1）alert()；（2）confirm()；（3）prompt()；其中前两种用得比较多，最后一种在实际开发中用得比较少一、alert()在JavaScript中，我们可以使用window对象中的alert()方法来弹出一个提示框。语法：alert(message)说明：该对话框只是用于提示，并不能对Ja

2017-05-15 19:01:06 399

原创 Math对象的方法

方法说明max(x,y) 返回x和y中的最大值min(x,y) 返回x和y中的最小值pow(x,y) 返回x的y次幂abs(x) 返回数的绝对值round(x) 把数四舍五入为最接近的整数random() 返回0~1之间的随机数ceil(x) 对一个数进行上舍入floor(x) 对一个数进行下舍入例子： document.wri

2017-05-15 17:33:48 616

原创数组对象

一、数组基础1、数组是什么？在JavaScript中，我们可以使用“数组”来存储一组“相同数据类型”的数据结构。2、创建数组在JavaScript中，创建数组共有3种方法：（1）新建一个长度为0的数组举例：var myArr = new Array();（2）新建长度为n的数组举例：var myArr = new Array(3);myArr[0]="HTML";myArr[1]

2017-05-15 17:14:12 404

原创日期对象

一、创建日期对象在JavaScript中，创建日期对象必须使用“new语句”。使用关键字new新建日期对象时，常用的有2种：方法一：var 日期对象名 = new Date();方法二：var 日期对象名 = new Date(日期字符串);方法二的日期字符串可以是以下几种形式：（1）”2015-5-3” （2）”May 3,2015” （3）”2015/5/3”其实创建日期对象不止这2种形式，

2017-05-15 17:12:15 492

原创字符串对象

一：length属性在JavaScript中，对于字符串来说，要掌握的属性就只有一个，那就是length属性。我们可以通过length属性来获取字符串的长度。语法：字符串名.length二： match()方法在JavaScript中，使用match()方法可以从字符串内索引指定的值，或者找到一个或多个正则表达式的匹配。语法： stringObject.match(字符串) //匹配字

2017-05-15 17:09:44 480

原创内置函数

在JavaScript中，常用的内置函数有7个：（1）eval()函数（2）isFinite()函数（3）isNaN()函数（4）parseInt()函数（5）parseFloat()函数（6）escape()函数（7）unescape()函数一、eval()函数在JavaScript中，eval()函数可以把一个字符串当做一个JavaScript表达式一样去执行它。例如：eval("docume

2017-05-15 15:57:14 560

原创函数

一、函数是什么？函数，就是一个一系列JavaScript语句的集合，这是为了完成某一个会重复使用的特定功能。在需要该功能的时候，直接调用函数即可，而不必每次都编写一大堆重复的代码。并且在需要修改该功能的时候，也只要修改和维护这一个函数即可。总之，将语句集合成函数，好处就是方便代码重用。并且，一个好的函数名，可以让人一眼就知道这个函数实现的是什么功能，方便维护。函数的使用只需要2步：（1）定义函数；（

2017-05-15 15:36:10 392

原创 JavaScript程序流程控制

JavaScript对程序流程的控制跟其他编程语言是一样的，主要有3种：（1）顺序结构；（2）选择结构；（3）循环结构；一、选择结构在JavaScript中，选择结构共有5种：（1）if语句;（2）if……else语句;（3）if……else if……语句;（4）if语句的嵌套;（5）switch语句;二、循环结构在JavaScript中，循环结构总有3种：（1）while语句；（2）do……w

2017-05-15 15:17:25 431

原创 JavaScript基础

一、数据结构JavaScript的数据结构包括：标识符、关键字、常量、变量等。1、标识符标识符，说白了，就是一个名字。在JavaScript中，变量和函数等都需要定义一个名字，这个名字就可以称为“标识符”。JavaScript语言中标识符最重要的3点就是：（1）第一个字符必须是字母、下划线（_）或美元符号这3种其中之一，其后的字符可以是字母、数字或下划线、美元符号；（2）变量名不能包含空格、加号、

2017-05-15 15:12:17 356

原创 JavaScript简介

1. JavaScript是什么？JavaScript，就是我们通常所说的JS，是一种嵌入到HTML页面中的脚本语言，由浏览器一边解释一边执行。HTML、CSS和JavaScript的关系如下：“HTML是网页的结构，CSS是网页的外观，而JavaScript是页面的行为。”2. JavaScript在HTML中的引用方式JavaScript在HTML的引用共有4种：（1）页头引入（head标签内）

2017-05-15 08:50:54 623

原创平常用到的图片

平常用到的图片

2017-04-12 16:31:45 307

原创 React 组件生命周期

Mounting：已插入真实 DOM Updating：正在被重新渲染 Unmounting：已移出真实 DOM生命周期的方法有： componentWillMount 在渲染前调用,在客户端也在服务端。componentDidMount : 在第一次渲染后调用，只在客户端。之后组件已经生成了对应的DOM结构，可以通过this.getDOMNode()来进行访问。如果你想和其他JavaScr

2017-03-31 21:54:14 364

原创 React 组件 API

在本章节中我们将讨论 React 组件 API。我们将讲解以下7个方法:设置状态：setState替换状态：replaceState设置属性：setProps替换属性：replaceProps强制更新：forceUpdate获取DOM节点：findDOMNode判断组件挂载状态：isMounted设置状态:setStatesetState(object nextState[, func

2017-03-31 21:29:46 315

原创 React Props

state 和 props 主要的区别在于 props 是不可变的，而 state 可以根据与用户交互来改变。这就是为什么有些容器组件需要定义 state 来更新和修改数据。而子组件只能通过 props 来传递数据。var HelloMessage = React.createClass({ render: function() { return <h1>Hello {this.pro

2017-03-31 20:33:12 371

原创 React State(状态)

React 把组件看成是一个状态机（State Machines）。通过与用户的交互，实现不同状态，然后渲染 UI，让用户界面和数据保持一致。React 里，只需更新组件的 state，然后根据新的 state 重新渲染用户界面（不要操作 DOM）。以下实例中创建了 LikeButton 组件，getInitialState 方法用于定义初始状态，也就是一个对象，这个对象可以通过 this.stat

2017-03-31 19:45:03 452

原创 React 组件

如何使用组件使得我们的应用更容易来管理。React 实例let HelloMessage = React.createClass({ render: function () { return <div><h1>Hello World</h1></div>; }});ReactDOM.render( <HelloMessage />, document.get

2017-03-31 19:06:57 300

原创 React JSX

React 使用 JSX 来替代常规的 JavaScript。 JSX 是一个看起来很像 XML 的 JavaScript 语法扩展。我们不需要一定使用 JSX，但它有以下优点：JSX 执行更快，因为它在编译为 JavaScript 代码后进行了优化。它是类型安全的，在编译过程中就能发现错误。使用 JSX 编写模板更加简单快速。使用 JSX JSX 看起来类似 HTML ，我们可以看下

2017-03-31 18:39:01 478

原创 React 入门实例教程

一、HTML 模板<!DOCTYPE html><html> <head> <script src="../build/react.js"></script> <script src="../build/react-dom.js"></script> <script src="../build/browser.min.js"></script> </head>

2017-03-31 18:06:43 645

原创 windows 下安装nodejs

中文网站：http://nodejs.cn/官网https://nodejs.org/en/选择安装的版本下载的要和自己的系统匹配，不然会出现错误的。安装文件当然是双击安装，比ubuntu方便多了。nodejs，默认是安装在C:\Program Files\nodejs下面，我也就不改变了。打开C盘的Program Files\nodejs。你会发现nodejs文件夹下面有npm,直接用npm

2017-03-31 10:43:02 278

原创 React安装

React 可以直接下载使用，下载包中也提供了很多学习的实例。你可以在官网 http://facebook.github.io/react/ 下载最新版。你也可以直接使用 BootCDN 的 React CDN 库，地址如下：我们引入了三个库： **react.min.js 、react-dom.min.js 和 babel.min.js：****react.min.js** - Re

2017-03-31 09:21:02 4177

原创 React 教程

**React 是一个用于构建用户界面的 JAVASCRIPT 库。 React主要用于构建UI，很多人认为 React 是 MVC 中的 V（视图）。 React 起源于 Facebook 的内部项目，用来架设 Instagram 的网站，并于 2013 年 5 月开源。 React 拥有较高的性能，代码逻辑非常简单，越来越多的人已开始关注和使用它。**React 特点1.声明式设计 −Re

2017-03-31 01:03:55 424

原创 Android Studio获取SHA1或MD5的方法

方法/步骤打开项目, 将左侧项目目录结构排序方式选择为Android按照图示步骤操作, 看不清楚请点击大图在 Android Studio 2.2版本以后, 按经验教程步骤操作依然看不到的SHA1和MD5, 怎么办怎么办? 别担心, 这时候我们点击一下这个小按钮, 还是熟悉的味道, 还是熟悉的感觉.

2017-03-08 10:41:24 396

原创 Bootstrap 导航元素

Bootstrap 提供的用于定义导航元素的一些选项。表格导航或标签创建一个标签式的导航菜单：以一个带有 class .nav 的无序列表开始。添加 class .nav-tabs。<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>Bootstrap 实例 - 标签式的导航菜单</title> <l

2016-11-25 22:39:08 639

原创响应式网页与自适应网页的区别

通俗的说，自适应网页设计也是响应式网页设计，响应式网页设计也是自适应网页设计。但是真正的细分起来，自适应只是响应式的一个子集，指网页中整体大图的自适应或者banner的自适应。（响应式设计可以一个网站兼容多个不同终端）　　响应式网页设计优势：流体网格的网站适合响应式网页设计。　　1、灵活性强，可以适应不同分辨率的设备　　2、方便快捷的解决多设备显示适应问题　　　　自适应网页设计优

2016-11-25 17:10:19 2134

原创自适应网页设计

自适应网页设计:允许网页宽度自动调整允许网页宽度自动调整“自适应网页设计”：首先，在网页代码的头部，加入一行viewport元标签。viewport是网页默认的宽度和高度，上面这行代码的意思是，网页宽度默认等于屏幕宽度（width=device-width），原始缩放比例（initial-scale=1）为1.0，即网页初始大小占屏幕面积的100%。所有主流浏览器都支持这个设置，包括IE9。

2016-11-25 17:06:23 468

原创 Bootstrap 输入框组

Bootstrap 支持的另一个特性，输入框组。输入框组扩展自表单控件。使用输入框组，您可以很容易地向基于文本的输入框添加作为前缀和后缀的文本或按钮。通过向输入域添加前缀和后缀的内容，您可以向用户输入添加公共的元素。例如，您可以添加美元符号，或者在 Twitter 用户名前添加 @，或者应用程序接口所需要的其他公共的元素。向 .form-control 添加前缀或后缀元素的步骤如下：把前缀

2016-11-25 16:17:31 1517

原创 Bootstrap 字体图标和下拉菜单、按钮

Bootstrap 字体图标http://www.runoob.com/try/demo_source/bootstrap3-glyph-icons.htm使用; <button type="button" class="btn btn-default"> <span class="glyphicon glyphicon-sort-by-order"> </span></button>

2016-11-25 16:07:21 2340

原创 Bootstrap 表格

Bootstrap 表格Bootstrap 提供了一个清晰的创建表格的布局。下表列出了 Bootstrap 支持的一些表格元素：标签描述<table> 为表格添加基础样式。<thead> 表格标题行的容器元素（<tr>），用来标识表格列。<tbody> 表格主体中的表格行的容器元素（<tr>）。<tr> 一组出现在单行上的表格单元格的容器元素（<td> 或 <th>）。<td>

2016-11-01 08:51:47 632

原创 Bootstrap 网格系统

Bootstrap 的网格系统（Grid System）Bootstrap 提供了一套响应式、移动设备优先的流式网格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。什么是网格（Grid）？摘自维基百科：在平面设计中，网格是一种由一系列用于组织内容的相交的直线（垂直的、水平的）组成的结构（通常是二维的）。它广泛应用于打印设计中的设计布局和内容结构。在网页设计中，它是一

2016-10-26 19:00:26 369

原创 Bootstrap CSS

HTML 5 文档类型（Doctype） Bootstrap 使用了一些 HTML5 元素和 CSS 属性。为了让这些正常工作，您需要使用 HTML5 文档类型（Doctype）。因此，请在使用 Bootstrap 项目的开头包含下面的代码段。<!DOCTYPE html><html>....</html>如果在 Bootstrap 创建的网页开头不使用 HTML5 的文档类型（Docty

2016-10-26 01:00:07 400

原创 Bootstrap 简介

什么是 Bootstrap？Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的。为什么使用 Bootstrap？移动设备优先：自 Bootstrap 3 起，框架包含了贯穿于整个库的移动设备优先的样式。浏览器支持：所有的主流浏览器都支持 Bootstrap。 Internet Explorer Fir

2016-10-25 23:38:53 417

原创 AngularJS 动画

AngularJS 提供了动画效果，可以配合 CSS 使用。 AngularJS 使用动画需要引入 angular-animate.min.js 库。<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular-animate.min.js"></script>还需在应用中使用模型 ngAnimate：<body n

2016-10-25 15:19:44 349

原创 AngularJS API

AngularJS 全局 APIAngularJS 全局 API 用于执行常见任务的 JavaScript 函数集合，如：比较对象迭代对象转换对象全局 API 函数使用 angular 对象进行访问。API 描述angular.lowercase() 转换字符串为小写angular.uppercase() 转换字符串为大写angular.isString() 判断给定的对象是

2016-10-25 15:01:24 692

原创 AngularJS 模块

模块定义了一个应用程序。模块是应用程序中不同部分的容器。模块是应用控制器的容器。控制器通常属于一个模块。创建模块你可以通过 AngularJS 的 angular.module 函数来创建模块：<div ng-app="myApp">...</div><script>var app = angular.module("myApp", []); </script>添加控制器你可以使用

2016-10-25 14:51:01 265

原创 AngularJS 事件

ng-click 指令ng-click 指令定义了 AngularJS 点击事件。 AngularJS 实例<div ng-app="" ng-controller="myCtrl"><button ng-click="count = count + 1">点我！</button><p>{{ count }}</p></div>隐藏 HTML 元素 ng-hide 指令用于设置应用部分是否可见。

2016-10-25 14:46:07 323