- 博客(66)
- 资源 (4)
- 问答 (4)
- 收藏
- 关注
RSS订阅原创 CSS3绘制三角形
三角形是在网页应用中一种常见的图形，我们用CSS3技术可以很容易的绘制出来。首页我们先定义好相应的html结构：<div class="wrap"> <span class="rank-label"></span></div>接下来，我们开始正式的编写样式：.wrap { width: 200px; height: 100px; ...
2019-01-08 09:14:31
999
原创 Angular父组件和子组件通过服务来通讯
我们在Angular中可以通过服务来实现子组件和父组件数据的双向流动。这张图揭示了子组件和父组件通过服务来通讯的原理。我们先用ng new parent-child来创建一个工程。接下来我们用以下命令生成相应的组件和服务。生成父组件：生成子组件：生成服务：整个工程的目录结构如下：如果要让数据在多个组件中流动的话，我们就会想到多播，然后我们自然就会想到RxJS中的Subjec...
2018-11-18 17:59:03
2042
1
原创 仿百度搜索热点列表的实现
相信大家都用过百度搜索，其中在百度搜索结果的右侧会有一个搜索热点的列表。这个搜索列表中有一个换一换的链接，当我们点击这个链接的时候列表就会更换一次。其实这个交互的实现效果非常的简单。html代码如下：&amp;amp;amp;amp;amp;amp;lt;div class=&amp;amp;amp;amp;amp;quot;out&amp;amp;amp;amp;amp;quot;&amp;amp;amp;amp;amp;am
2018-10-21 15:05:19
3294
原创 Rxjs在Angular中的简单应用
Angular中集成了Rxjs库，Rxjs是javascript的一个响应式编程库，它提供了很多api，可以很方便的处理和操作应用中的数据。我们在自己的angular项目中新建一个组件：ng generate component rx-button --spec=false这个组件的代码如下：import { Component, OnInit } from '@angular/core...
2018-10-04 22:00:29
3473
原创 记录一次eval的问题
eval方法接收一个字符串，并且会把传进去的字符串当做js代码去执行。在讲eval的问题之前，我们先看一个数组的问题：var str = 'a' + ['b'] + 'c';console.log(str); // abc以上这段代码会输出一个字符串abc，因为数组自动调用了Array.toString()这个方法。接下来，我们来正式讲eval的问题： function log...
2018-09-24 10:45:17
509
原创 记录一次数组的操作
操作数组的常见的方法有forEach、map、filter，其中map和filter方法的返回值都是数组，forEach的返回值是undefined，可以理解为没有返回值。由于原生的数组对象中，没有concatAll方法，所以打算自己实现一个。concatAll方法要做的事情很简单，就是把一个二维数组转成一维。Array.prototype.concatAll = function() { ...
2018-09-23 18:49:34
279
原创 用Node实现登录注册功能（一）
环境搭建首先要初始化项目，我们进入项目的目录后，运行npm init命令即可进行对项目的初始化： 项目初始化完毕后就要开始安装项目依赖了： 我们可以在package.json文件中dependencies字段下看到此项目所需要的依赖： ...
2018-09-15 23:23:42
3641
2
原创 移动端星级评分效果的实现
星级评分在网页当中是经常用到的，今天特地用原生的JS实现了在移动端中的星级评分效果。由于在移动端中是没有鼠标事件的，所以在移动端中的星级评分效果的实现方式要与pc端稍微有点不同，就是要把相应的事件转成移动端的事件。 星级评分的目录结构如下： 图片资源也很简单： 星级评分的html结构很简单：<!DOCTYPE html><html><head&g...
2018-09-08 12:10:57
5193
原创 MongoDB数据库的连接
MongoDB数据库是当今最流行的Nosql数据库之一，要连接MongoDB数据库先要开启MongoDB的服务。要开启MongoDB数据库服务，我们先进入MongoDB数据库安装目录的bin目录： 进入后我们执行以下命令： 这样，我们的MongoDB数据库服务就开启了。然后我们就可以用robo3t——MongoDB数据库可视化工具来建立新连接了： 建立新连接后，我们就可以进入这个...
2018-09-02 17:54:23
16824
原创 三种三栏网页宽度自适应布局方法
三栏网页宽度自适应的布局在网页中非常的常见，这里总结了三种实现三栏网页宽度自适应布局的方法，一种是绝对定位法，另一种是margin负值法，最后一种是自身浮动法。绝对定位法绝对定位法的原理比较简单，代码如下：<!DOCTYPE html><html><head> <meta charset="UTF-8" /> <me...
2018-08-11 16:26:16
959
原创 JS数组reduce()方法简介
reduce()方法是处理数组的方法，它接收一个函数和一个初始值，然后将数组中的每个元素和初始值当作参数传入这个函数中进行处理，最后返回和初始值相同类型的值。 例如，将某个值减去数组中的每个元素：var items = [5, 10, 15];var reducer = function minus(minusSum, item) { return minusSum - item;...
2018-08-05 19:07:28
3800
原创 JS代码压缩与代码混淆工具UglifyJS2的使用介绍
JS代码的压缩和代码的混淆可以使得文件变小，还可以有效的防止网站的数据被网络爬虫获取。代码混淆可以把变量名变成a, b, c等字母，可以防止爬虫获取到JS代码中的Ajax，从而防止网站数据被他人获取。目前最流行的工具是UglifyJS2。UglifyJS2官方的定义如下： UglifyJS is a JavaScript parser, minifier, compressor and b...
2018-07-30 23:06:34
4309
原创 jQuery.extend()方法讲解
jQuery.extend()方法在插件开发中经常会运用到，它能够将两个对象合并成一个对象。今天我就用一个例子来讲解jQuery.extend()的用法，具体代码如下：var object1 = { apple: 20, pear: 10};var object2 = { banana: 50, orange: 30};var fruit = $.ext...
2018-07-22 22:54:41
304
原创 图片预加载之无序加载
当一个页面的图片很多，或者有图片很大的时候，就可以使用图片预加载的技术来提升用户的体验效果。图片预加载技术核心是用到了Image对象，将图片预先存在Image对象中，当需要展示这张图片的时候，就可以直接从浏览器缓存中获取，这样就不会出现页面假死的情况。 今天，我打算用图片预加载技术来做一个简单的图片相册，最终的效果图如下： 它的html结构如下：<div class="box"&...
2018-07-22 22:06:09
389
原创 JS实现页面返回顶部
页面返回顶部是在Web中常见的效果，在一个很长的页面中，页面返回顶部按钮可以方便用户回到页面的顶部，增强用户体验。 这里我要实现的效果图如下： 其html代码如下：&amp;lt;body style=&quot;height: 1800px;&quot;&amp;gt;&amp;lt;div class=&quot;to-top&quot;&amp;gt;&
2018-07-15 21:43:35
8153
3
原创 原生JS实现图片幻灯片效果
图片幻灯片是在网页开发中常见的一种效果，几乎是谁处可见。我今天想要实现的幻灯片的效果图如下： 它的html的代码非常的简单：<div class="img-wrap"> <ul> <li><img src="./image/aa.webp"/></li> <li>&am
2018-07-14 22:13:54
7344
原创 记录一个有关offsetWidth的怪异问题
offsetWidth 是什么？从外形上来看，它和width很像，其实offsetWidth是取得一个DOM对象的border + padding + width的和。果然是和width属性是有关联的啊。 我们认识了offsetWidth后，看一下以下的代码，看看offsetWidth返回的值是什么。<!DOCTYPE html><html><head>...
2018-07-08 22:40:08
2188
原创 获取当前对象的样式
JS获取对象样式的方法如下：function css(obj, attr) { if (obj.currentStyle) { return obj.currentStyle[attr]; } else { return getComputedStyle(obj, false)[attr]; }}...
2018-07-08 10:21:23
872
原创 仿苹果菜单的图片放大特效实现
我想用过mac的人都应该见过它的菜单特效，就是鼠标移到适当的位置的时候，菜单图片会有一个放大的效果，今天我就模仿这个效果来做一个有关图片的特效，最终的实现效果如下： 它的HTML结构如下：<div class="wrap"> <img src="./images/aa.png"/> <img src="./images/bb.png"/> ..
2018-07-01 20:01:36
1252
原创 仿京东图片放大镜动效
相信大家应该都有在京东上买过东西，那么大家在买东西的时候一定见到过图片放大的特效，就像是这样的效果： 其实这个效果的原理也很简单，就是我们要准备两张尺寸比例一样的图片，一张小图，一张大图，当鼠标移动到小图上面时，大图显示出相应的部分来。<!DOCTYPE HTML><html><head><meta http-equiv="Content-...
2018-07-01 15:16:05
2446
1
原创 JS面向对象之类式继承
JS中没有类的概念，我们可以把JS中的构造函数看做是类。function Father() { // 父类 this.name = '名字';}Father.prototype.showName = function() { console.log(this.name);}function Child() { // 子类}Child.prototype = n...
2018-06-23 20:43:53
367
原创 利用js的call实现属性的继承
/** * 学生类，代表一个学生. * @constructor * @param {string} name - 学生的姓名. * @param {string} id - 学生的学号. */function Student(name, id) { this.name = name; this.id = id;}/** * 小学生类，代表一个小学生. * @...
2018-06-23 11:03:13
416
原创 JS面向对象之拷贝继承
JS中的继承和我们现实当中的继承类似，就是子类（继承者）拥有父类（被继承者）的所有特性（属性与方法），同时子类又可以拥有自己特定的属性或方法（基因突变），而且子类的改变不会影响到父类。我们为什么要继承呢？其实主要是为了代码复用。 继承分两个部分，第一是属性的继承，第二是方法的继承。 我们先创造一个简单的父类：function CreatePerson(name,sex){ //父类 ...
2018-06-18 23:41:08
381
原创 移动端时间联动选择实例
今天我做了一个移动端的时间联动选择的小实例，最终的效果如下： 这个时间联动选择所用的地区数据的数据结构是这样的：var area = [ { name: '华北地区', province: [ { name: '北京市', city: [ { name: "北京市", ...
2018-06-18 16:18:44
1748
原创 JavaScript面向对象最基本的写法
function Aaa() { this.name = '小明';}Aaa.prototype.showName = function() { console.log(this.name);};var a1 = new Aaa();a1.showName();以上就是面向对象最基本的写法，首先定义一个构造函数，我们可以在构造函数的原型中添加自己的方法，然后要使用这个对象的时...
2018-06-17 11:23:52
248
原创 一个很好用的移动端Lightbox特效插件（二）
上一篇博客本人主要是介绍了Lightbox插件的一些语法，这篇文章主要是介绍本人用Lightbox插件编写的一个实例，让大家更深入地了解这个Lightbox插件。 首先，看一下这个实例最终的效果： 接下来，我们就看看这个效果是怎样实现的吧。 代码的html的结构很简单：&lt;div class="cut-wrap"&gt; &lt;div class="cut-imgs&qu
2018-06-16 10:09:53
1088
原创 前端开发中关于文本溢出的处理
文本溢出是在网页中经常出现的情况，如果是要实现单行文本溢出用省略号代替的话，是非常容易实现的，代码如下：overflow:hidden;text-overflow:ellipsis;white-space:nowrap示例： 但是，如果是要实现多行文本溢出时，溢出的文本用省略号代替呢？那也是非常简单的，代码如下（只有webkit内核才有作用）：overflow: hidd...
2018-06-09 10:47:17
2910
原创 一个很好用的移动端Lightbox特效插件（一）
Lightbox特效,即灯箱特效，类似于相册预览的效果，说得直白一些就是鼠标点击图片，这个图片会浮起来全屏显示。这个是在网页开发中非常常见的一种特效。这种特效在网上有比较多的插件可以使用，在PC端中有lokesh写的lightbox2插件，在移动端中有PhotoSwipe，MagnificPopup等等。下面我就来介绍一种开发者可以根据自身的需求，高度定制自己的lightbox特效的插件——ima...
2018-06-03 17:13:46
2137
原创 JavaScript原生拖拽的面向对象写法
本篇文章和上一篇介绍用面向对象的编程技术来实现tab的效果一样，也先用面向过程的编程技术来将拖拽的效果实现一遍，然后通过变型，再用面向对象的编程技术将其实现一遍，让读者在对比中学习。 拖拽的效果其实在网页开发中是一种普遍的效果，它可以让用户自定义的构造我们的系统界面，例如自定义地显示表格的列呀，自定义地设置系统的导航呀等等。 这个拖拽效果的html结构代码如下：<div id="dr...
2018-05-19 18:07:14
731
原创 tab面向对象写法
面向对象可以说是一种思维方式，它将世界上的万事万物抽象出来变成一个一个的单元，面向对象也是一种编程的技术，适用于大型信息系统的开发。tab是在网页中常见的一种特效（组件），本文将会讲解如何用面向对象的方式来实现tab效果。 在讲解tab的面向对象的实现方式之前，我会先用过程式的方法来将tab选项卡特效实现一遍，让大家在对比中学习。 其中的html结构如下：&lt;button class=...
2018-05-13 11:32:00
899
原创 JS模拟手机短信发送
今天实现了用JS模拟手机短信发送的效果，其HTML代码如下：<div class="out"> <div class="main-content"> <div class="head"></div> <div class="content&
2018-05-05 23:46:43
2322
原创 原生JS实现省市区(县)三级联动下拉列表
接到了公司的新需求，其中有涉及到要选择区域的三级联动下拉列表有关的东西。然后我到网上找有关这方面的资料，发现大多是用插件写的，但是我不想让代码变得很庞大，所以想用原生的JS来实现。实现的思路与主要代码如下： 主要的html代码： &lt;fieldset&gt; &lt;legend&gt;下拉选择框实现省市区（县）三级联动&lt;/legend&gt; &lt;for
2018-05-01 21:05:27
6550
2
原创 用数学方法实现排列算法
我曾经写过一篇用递归和循环来实现排列算法的文章。那篇文章的代码比较复杂，其实我们仅仅是想知道排列有几种结果的话，用数学公式的原理来实现会简单许多。数学公式如下：其中阶乘可以用递归来实现，整体代码如下：function A(n, m) { return f(n) / f(n - m);}function f(num) { if (num <= 1) { return 1;...
2018-02-24 16:52:00
1131
原创 用递归与循环实现排列算法
排列就是从n个数中取出m个数(考虑数的顺序)来有几种情况。这个是数学上的定义，可能比较难理解。比较生活化的角度来看就是从一盒装有一个红球、一个黄球、一个绿球、一个白球和一个黑球的箱子中去出3个球来(考虑球的顺序)有几种情况。排列算法就是为了解决这类问题而发明出来的。我们可以用画树形图的方法来解决这个问题：从上图可以看出从['A', 'B', 'C', 'D']中取3个数来排列有6 * 4 = 24...
2018-02-24 09:40:30
961
原创 半透明边框的实现
在用CSS实现半透明边框效果的时候，我们需要用到一个CSS属性——background-clip。background-clip的用法如下：实现的CSS代码如下：要注意的是要将background-clip属性放在background下面。否则不会有半透明的效果。实现的效果如下：...
2018-02-22 11:25:27
937
原创 MongoDB GUI（ Robo 3T）基本使用
Robo 3T是很好用的MongoDB可视化管理工具。按照以下操作就可以像编辑文本一样对数据库表（集合）进行基本的增删改操作，十分方便。
2018-02-19 17:54:37
3898
原创 纯CSS3实现的蓝天白云效果
纯CSS3实现的蓝天白云效果今天我使用了CSS3新增的属性border-radius、linear-gradient、scale(缩放)和一些布局技巧实现了蓝天白云的效果。其HTML结构如下：<div class="container"> <div class="blueSky"> <div class="cloud1"></div> <div class
2017-06-21 20:50:52
3138
原创 JS函数-返回一定范围的数组
有这么一道JS编程题：编写一个js函数，该函数有一个n（数字类型），其返回值是一个数组，该数组内是n个随机且不重复的整数，且整数取值范围是[2,32]首先，定义一个函数用来返回一定范围的数值：function getRand(a,b){ var rand = Math.round(Math.random()*(b-a)+a); return rand;}其次，定义一个函数
2017-05-26 22:12:37
6292
原创 纯JS实现的简单tab选项卡切换效果
本人在上一篇文章也写了用JS来实现tab选项卡切换效果，但是上次的那个代码比较复杂，这次是简化版的。 Tab效果 ul{ list-style: none; } *{ margin: 0; padding: 0; } #tab{ border: 1px solid #ccc; margin: 20px auto; width
2017-04-22 16:25:34
11780
1
jQuery.mobile-1.0.1.js与jQuery.mobile-1.0.1.min.js
2016-04-08
JavaScript 浏览器检测
2015-10-15
javascript 正则表达式
2015-10-03
JavaScript正则表达式
2015-09-29
oNowSnake为什么有index属性？
2015-09-16
TA创建的收藏夹 TA关注的收藏夹
TA关注的人