自定义博客皮肤

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+

CSS3绘制三角形

三角形是在网页应用中一种常见的图形,我们用CSS3技术可以很容易的绘制出来。 首页我们先定义好相应的html结构: <div class="wrap"> <span class=&quo...

2019-01-08 09:14:31

阅读数 228

评论数 0

Angular父组件和子组件通过服务来通讯

我们在Angular中可以通过服务来实现子组件和父组件数据的双向流动。 这张图揭示了子组件和父组件通过服务来通讯的原理。 我们先用ng new parent-child来创建一个工程。接下来我们用以下命令生成相应的组件和服务。 生成父组件: 生成子组件: 生成服务: 整个工程的目录结构如下...

2018-11-18 17:59:03

阅读数 446

评论数 0

仿百度搜索热点列表的实现

相信大家都用过百度搜索,其中在百度搜索结果的右侧会有一个搜索热点的列表。 这个搜索列表中有一个换一换的链接,当我们点击这个链接的时候列表就会更换一次。其实这个交互的实现效果非常的简单。 html代码如下: <d...

2018-10-21 15:05:19

阅读数 929

评论数 0

Rxjs在Angular中的简单应用

Angular中集成了Rxjs库,Rxjs是javascript的一个响应式编程库,它提供了很多api,可以很方便的处理和操作应用中的数据。 我们在自己的angular项目中新建一个组件: ng generate component rx-button --spec=false 这个组件的代码如...

2018-10-04 22:00:29

阅读数 821

评论数 0

记录一次eval的问题

eval方法接收一个字符串,并且会把传进去的字符串当做js代码去执行。 在讲eval的问题之前,我们先看一个数组的问题: var str = 'a' + ['b'] + 'c'; console.log(str); // abc 以上这段代码会输出一个字符串abc,因为数组自动调用了Array....

2018-09-24 10:45:17

阅读数 124

评论数 0

记录一次数组的操作

操作数组的常见的方法有forEach、map、filter,其中map和filter方法的返回值都是数组,forEach的返回值是undefined,可以理解为没有返回值。 由于原生的数组对象中,没有concatAll方法,所以打算自己实现一个。concatAll方法要做的事情很简单,就是把一个二...

2018-09-23 18:49:34

阅读数 63

评论数 0

用Node实现登录注册功能(一)

环境搭建 首先要初始化项目,我们进入项目的目录后,运行npm init命令即可进行对项目的初始化: 项目初始化完毕后就要开始安装项目依赖了: 我们可以在package.json文件中dependencies字段下看到此项目所需要的依赖: ...

2018-09-15 23:23:42

阅读数 463

评论数 0

移动端星级评分效果的实现

星级评分在网页当中是经常用到的,今天特地用原生的JS实现了在移动端中的星级评分效果。由于在移动端中是没有鼠标事件的,所以在移动端中的星级评分效果的实现方式要与pc端稍微有点不同,就是要把相应的事件转成移动端的事件。 星级评分的目录结构如下: 图片资源也很简单: 星级评分的html结构...

2018-09-08 12:10:57

阅读数 1997

评论数 0

MongoDB数据库的连接

MongoDB数据库是当今最流行的Nosql数据库之一,要连接MongoDB数据库先要开启MongoDB的服务。要开启MongoDB数据库服务,我们先进入MongoDB数据库安装目录的bin目录: 进入后我们执行以下命令: 这样,我们的MongoDB数据库服务就开启了。然后我们就可以用...

2018-09-02 17:54:23

阅读数 2535

评论数 0

三种三栏网页宽度自适应布局方法

三栏网页宽度自适应的布局在网页中非常的常见,这里总结了三种实现三栏网页宽度自适应布局的方法,一种是绝对定位法,另一种是margin负值法,最后一种是自身浮动法。 绝对定位法 绝对定位法的原理比较简单,代码如下: <!DOCTYPE html> ...

2018-08-11 16:26:16

阅读数 114

评论数 0

JS数组reduce()方法简介

reduce()方法是处理数组的方法,它接收一个函数和一个初始值,然后将数组中的每个元素和初始值当作参数传入这个函数中进行处理,最后返回和初始值相同类型的值。 例如,将某个值减去数组中的每个元素: var items = [5, 10, 15]; var reducer = function ...

2018-08-05 19:07:28

阅读数 642

评论数 0

JS代码压缩与代码混淆工具UglifyJS2的使用介绍

JS代码的压缩和代码的混淆可以使得文件变小,还可以有效的防止网站的数据被网络爬虫获取。代码混淆可以把变量名变成a, b, c等字母,可以防止爬虫获取到JS代码中的Ajax,从而防止网站数据被他人获取。目前最流行的工具是UglifyJS2。UglifyJS2官方的定义如下: UglifyJS...

2018-07-30 23:06:34

阅读数 1177

评论数 0

jQuery.extend()方法讲解

jQuery.extend()方法在插件开发中经常会运用到,它能够将两个对象合并成一个对象。今天我就用一个例子来讲解jQuery.extend()的用法,具体代码如下: var object1 = { apple: 20, pear: 10 }; var object2 = { ...

2018-07-22 22:54:41

阅读数 53

评论数 0

图片预加载之无序加载

当一个页面的图片很多,或者有图片很大的时候,就可以使用图片预加载的技术来提升用户的体验效果。图片预加载技术核心是用到了Image对象,将图片预先存在Image对象中,当需要展示这张图片的时候,就可以直接从浏览器缓存中获取,这样就不会出现页面假死的情况。 今天,我打算用图片预加载技术来做一个简单的...

2018-07-22 22:06:09

阅读数 71

评论数 0

JS实现页面返回顶部

页面返回顶部是在Web中常见的效果,在一个很长的页面中,页面返回顶部按钮可以方便用户回到页面的顶部,增强用户体验。 这里我要实现的效果图如下: 其html代码如下: <body style="height: 1800...

2018-07-15 21:43:35

阅读数 487

评论数 0

原生JS实现图片幻灯片效果

图片幻灯片是在网页开发中常见的一种效果,几乎是谁处可见。我今天想要实现的幻灯片的效果图如下: 它的html的代码非常的简单: <div class="img-wrap"> <ul&...

2018-07-14 22:13:54

阅读数 2230

评论数 0

记录一个有关offsetWidth的怪异问题

offsetWidth 是什么?从外形上来看,它和width很像,其实offsetWidth是取得一个DOM对象的border + padding + width的和。果然是和width属性是有关联的啊。 我们认识了offsetWidth后,看一下以下的代码,看看offsetWidth返回的值是...

2018-07-08 22:40:08

阅读数 733

评论数 0

获取当前对象的样式

JS获取对象样式的方法如下: function css(obj, attr) { if (obj.currentStyle) { return obj.currentStyle[attr]; } else { return getComputedS...

2018-07-08 10:21:23

阅读数 341

评论数 0

仿苹果菜单的图片放大特效实现

我想用过mac的人都应该见过它的菜单特效,就是鼠标移到适当的位置的时候,菜单图片会有一个放大的效果,今天我就模仿这个效果来做一个有关图片的特效,最终的实现效果如下: 它的HTML结构如下: <div class="wrap"&...

2018-07-01 20:01:36

阅读数 290

评论数 0

仿京东图片放大镜动效

相信大家应该都有在京东上买过东西,那么大家在买东西的时候一定见到过图片放大的特效,就像是这样的效果: 其实这个效果的原理也很简单,就是我们要准备两张尺寸比例一样的图片,一张小图,一张大图,当鼠标移动到小图上面时,大图显示出相应的部分来。 <!DOCTYPE HTML&...

2018-07-01 15:16:05

阅读数 848

评论数 1

提示
确定要删除当前文章?
取消 删除