纯 JavaScript 生成随机数方法

前言 用到随机数的地方还是挺多的,如有些网站为了吸引用户就会对网站文章的点赞数,评论数,阅读数等等作出一个可观的数字,让别人看起来觉得不点都不舒服,虽然把随机数用到这里有点不好,但这种现象确确实实存在于我们的生活中。随机数除了这个用途外,其实还有很多方面会用到它。下面我们变来了解下如何通过 JavaScript 生成一个随机数。 相关方法 在说随机数之前我们先来了解JavaScript 中的几个...

2016
07-27

meta viewport 你真的了解吗?

前言 <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no"> 上面是一行我几乎每天都用到的代码,它给我们带来的好处是非常明显的,一眼就可以看到的,除了这一点,我对它就一无所知了,我天真地以为只要认识它能给我实现什么样的效果就足够了,可事实却告诉我:“你这小子也太天真了,你千万别被网上一大堆的搜索结果骗了,...

2016
07-09

设备像素,设备独立像素,CSS像素

前言 这两个属性说难不难,说容易又不易容。但如果你弄明白了这个,你就明白了一些东西,一些你常常用但却不知道为什么的代码。下面我们还是先从它们各自的定义开始说起,其实虽然标题里是三个名词,但我们接下来只聊两个就可以了,为什么?看完你就知道了。 基本定义 设备像素:设备像素又称物理像素(physical pixel),设备能控制显示的最小单位,我们可以把这些像素看作成显示器上一个个的点。 CSS...

2016
07-02

document.querySelector()

前言 在平时的前端开发中,我们经常需要写一些小效果,比如TAB切换、图片轮播等等,不管是写什么 JavaScript 效果,你肯定离不开获取元素作为对象,然后对这个对象进行一系列的操作。而获取元素时,我们可以使用jQuery 库,也可以使用 JavaScript 为我们提供的原生的并且比较常用的方法getelementbyid()、getelementbyTagName()、getElementsByClassName()。但是本文要跟大家分享是另一种方法也是 JavaSc...

2016
06-22

纯 JavaScript 实现页面返回顶部效果

前言 对于一个内容有点多的页面来说,当你滚动页面底部浏览了一通后,突然想回到页面顶部,而如果页面没有类似于返回顶部功能的按钮,那么你也只能乖乖地滚动鼠标滚轮或者拉动浏览器滚动条来实现回到页面,很多时候你会觉得这个很费劲,特别是在手机端,一个屏幕本来就小得可怜的手机,如果内容非常,那么手动滚动回到页面顶部就如同噩梦一般。所以下面就给大家分享一个纯 JavaScript 实现的页面返回顶部...

2016
06-21

AngularJS

简单介绍 HTML is great for declaring static documents, but it falters when we try to use it for declaring dynamic views in web-applications. AngularJS lets you extend HTML vocabulary for your application. The resulting environment is extraordinarily expressive, readable, and quick to develop. 译:不可否认 HTML 是一个很棒的静态文档语言,但当我们用它来做 webAPP 应用时,它就...

2016
06-16

html5 page visibility api 用法

前言 如今浏览器的多tab 窗口设计已经很普遍,可以说绝大多数的浏览器都已经默认地使用这种方法来打开网页进而提高用户体验。但因此问题也随之而来-资源的浪费,性能的下降。 在我们平时浏览页面时候,都没不经意地打开很多页面。就拿我自己来说,很多时候可能会同时打开7-8面而,由于工作需要甚至同时打开十几二十个页面也是常有的事。即使页面的数量不能少,那么怎么才能让用户使用了浏览器默认的tab窗...

2016
06-15

JavaScript call() 方法 和 apply() 方法详解

前言 最近在研究canvas时无意中遇到了call方法,于是乎一场不可避免的为期两天的厮杀就这样开始了。call() 听起来简单,但要是让你在别人的项目中遇到了,我估计你还是不怎么明白,别人为什么这样写。就拿我自己来说,一开始在网上查了了,看到一个解释是说这个方法是用来改变this 的指向的。如果单单看到这个,我想我早就应该明白了,call() 方法说真的其实很简单,但要把它真真正正的搞明白了,还是需...

2016
06-14

CSS3 clip-path 用法详解

前言 css3 的出现无疑是我们这些作为前端人的福音。因为它的出现让我们的在前端的世界变得更炫,多美,更多姿!接下来要给大家介绍的这个属性clip-path 就是一个可以让我们的页面更多姿多彩的 css3 属性。 clip-path 作用 正如前言中所说到的,可以让我们的页面变得多姿多彩,何为多姿,何为多彩呢? 多姿:可以让一个元素显示出不同的形式(如:正方形,圆形,长方形,椭员形,多边形……)...

2016
06-09

CSS 中改变横纵方向 writing-mode 属性

前言 Writing-mode属性,我从事前端这么久也还没看到过,更不用说上过了,是近在网上看到一篇关于 writing-mode属性的介绍,觉得不错,所以在这里也给大家整理分享出来。 其实这个属性IE5.5 版本的浏览器就已经支持了,但这个属性还是没流行起来,或者是说极少看到它的身影,因为在很长的一段时间里 FireFox,Chrome 浏览器都不支持wirting-mode属性。但随着前端技术的发展,各大主流浏览器也慢慢地开始...

2016
06-07

Animate.css 使用教程(一个强大的 CSS3 动画库)

前言 animate.css 是一个有趣,酷炫的,跨浏览器的动画库,你可以将它用于你的项目中。不管是主页,滑动切换,又或者是其它方面,你都可以通过它来制作出惊人的效果。 基本用法 引入CSS文件 这个对你来说应该再容易不过了,我相信你可能也已经对引入外部的CSS样式文件的代码以及快捷键也都背得滚瓜烂熟了。 你只需要在HTML文件的head标签中引入CSS样式文件,如下: <head> <link rel="styl...

2016
06-03

原生js开发,轻量级的移动端图片懒加载(lazyloadImg)插件

前言 下面给大家分享一个很好用,很经量的图片懒加载插件,重点是它是原生的javascript 不依赖任何 javascript 库。所以对于移动端来说,这真是一个棒极了的图片懒加载插件。我们先来看看官方激动人心的介绍: LazyloadImg介绍 LazyloadImg 轻量级的移动端图片懒加载插件 原生js开发,不依赖任何框架或库 支持将各种宽高不一致的图片,自动剪切成默认图片的宽高。比如说你的默认图片是一张正方形的图片...

2016
06-01

CSScomb – Sublime text中一个超赞的CSS属性排序插件

前言 CSS样式的有序排列对于提高工作效率或多或少都会有就贡献,当你看到自己写的代码齐刷刷的有序排列,心情肯定也不会差,特别是对于从事前端开发的朋友来说。所以下面就给大家分享Sublime text中一个超赞的CSS属性排序插件 – CSScomb。通过这个工具可以让你重新排列CSS中所定义的属性,也可以按照你预定义的排序格式生成新的CSS。 基本介绍 CSScomb 插件的主要特征: 1.帮助排序CSS属性 2.自...

2015
12-06

CSS3 Flex 弹性布局用法详解

什么是Flex弹性布局 Flex是Flexible Box的简称,意为弹性布局,顾名思义,在网页布局时,他可以给我们提供更多的灵活性。 说明: 1.flex是display的一个属性值。与之相当应的还有一个是inline-flex。 2.设置了Flex布局后,子元素的float,clear,还有verticle-align属性都不起作用。 3.设置了display:flex属性的元素,称为Flex容器,他里面的所有子元素统称为容器成员,称为Flex项目。后面我们就使用Fle...

2015
11-26

移动web福音:HTML 5 应用程序缓存

前言 虽然现在有了4G网络,也快奔5G网络了,但是移动WEB在移动端表现还不是很出色,其中一个最关键的原因就是网速问题,移动端网速才是王道,如果你的移动应用打开得慢了,那么还有谁愿意花几十秒来等你这个网页下载完呢? 不过值得我们高兴的是HTML5给我们带来了一大惊喜:应用程序缓存。其实它的强大之处不是表现在功能上,而是用户体验上。他可以让你的移动WEB页面得到更快的响应以及更加快的展现在用...

2015
11-03

Ruby 环境 Sass 编译时出现 Invalid GBK character "\xE5"的解决办法

Ruby环境安装好,Sulime text 的Sass插件也安装完毕,并且也用来写代码有几天了,今天突然遇到了一个问题 Error: Invalid GBK character “\xE5” on line 2 of C:\Users\Administrator\Desktop\canvas\test.scss Use –trace for backtrace. [Finished in 0.6s]6. 原因是我们代码里出现中文了,只要我把中文去掉,点保存就没问题了。但用中文作为注释是必需的呀,所以百度了下,方法也找到...

2015
10-08

最详细的 Sass 基础教程指南

前言 这几天一直都在研究 Sass/Scss,这次就把 Sass 基础使用方法整理发表出来。让想学习这方面知识的朋友可以多一份参考资料。毕竟现在这方面的资料特别的稀缺。 在这里贴出这两天研究 Sass 的小小成果: 《Sass开发 – Ruby安装出错解决办法:淘宝网镜像 RubyGems》 《Sublime Sass插件编译出错Decode error及‘sass’不是内部或外部命令的解决方法》 《Scss 与 Sass 是什么,他们的区别在哪里?...

2015
10-08

Decode error及‘sass’不是内部或外部命令的解决方法

之前有分享过一篇关于Ruby的安装及在安装过程中遇到错误的解决方法《Sass开发 – Ruby安装出错解决办法:淘宝网镜像 RubyGems》的文章。不过Ruby安装成功安装完成之后,怎么用,怎么通过Sass来进行编码,这才是我们安装Ruby的初衷。 于是我网站百度了下“Ruby使用方法”诸如此类的关键词。Ruby 使用方法出来的结果跟本不是自己民想来的,随后我就搜了下“Ruby Sass怎么用”结果才是这想要的东西。只要是标...

2015
10-06

Scss 与 Sass 是什么,他们的区别在哪里?

要想了解Scss 与 Sass 是什么以及他们的区别又在哪里,我们不过不先从他们各自的定义说起。 Sass是什么 Sass 是一门高于 CSS 的元语言,它能用来清晰地、结构化地描述文件样式,有着比普通 CSS 更加强大的功能。Sass 能够提供更简洁、更优雅的语法,同时提供多种功能来创建可维护和管理的样式表。Sass 是采用 Ruby 语言编写的一款 CSS 预处理语言,它诞生于2007年,是最大的成熟的 CSS 预处理语言。最初...

2015
10-06

Sass开发 – Ruby安装出错解决办法:淘宝网镜像 RubyGems

前言 想学习研究sass/scss的朋友要做的第一件事就是安装开发环境,安就是安装目前比较流行的Ruby。但安装过程并不是很顺利。 下载、安装 首先我们从官方下载一个Ruby安装程序。 http://rubyinstaller.org/ 第一次安装的时候我没有选择默认的路径(C:\Ruby22),而是放在E:\Program Files (x86)目录下,安装成功后就按着cmd.exe。 输入gem install sass,可是问题就来了,出现如下错误提示: ERROR: Wh...

2015
10-05

HTML5 Canvas中 fillText() 和 strokeText() 的区别

前言 Canvas现在越来越多地被运用到我们的项目中了,所以对Canvas的研究也得跟上呀,不然就被时代抛弃了。这次要给大家分享的是 HTML5 Canvas 中的 fillText 和 strokeText 的区别,代码及效果图片演示。 效果演示 HTML代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Canvas</title> <style> canvas{border: 1px solid ...

2015
09-25

Meta标签里的 apple-mobile-web-app-capable 作用

apple-mobile-web-app-capable的存在让本来屏幕就小的移动设备来说,可谓是福音呀。他可以让用户的屏幕变得“更大”。其实他就是通过删除苹果默认的工具栏和菜单栏,来给用户腾出更多的空间从而让网页得到更好的展现,让iphone达到屏幕增大的效果。 他的用法也好简单: <meta name=”apple-mobile-web-app-capable” content=”yes” /> 其实针对iphone的meta标签属性不仅仅就只有这个,下面我们再来看别外...

2015
09-22

Meta 标签里的 format-detection 含义及作用

format-detection 翻译成中文就是格式检测的意思,他是用来检测页面里的一些格式。如果你是做移动开始的应该常常会遇到这种情况,明明就是一串数字,没添加点击拔号的,但当你用 iphone 时默认给你加上了,明明就是一个邮箱地址,没点击发送邮件的,明明是个地址,点击却跟到一个一地图中,那么 format-detection 正好是为你解决这些问题的好帮手,不信?请往下看! meta的format-detection属性主要是有以...

2015
09-22

WEB前端视频教程网站推荐

每一个人的获取知识方式都不一样,有的人喜欢通过书籍来汲取营养,而有的人就喜欢通过视频教程来提升自己。各有各的好,各有各的妙,关键还是看你自己怎么学。有好的资源不一定会得到好的成果,只要你肯下功夫,相信你不管通过那种方式都会成长。下面给大家推荐几个比较好的视频教程网站。 后盾网 后盾网论坛是后盾教育旗下的专业技术交流论坛,涵盖了以PHP培训技术为主的几乎所有的web技术交流,并会不...

2015
09-15

HTML5视频(Video)和音频(Audio)类库jplayer

jplayer是什么 jPlayer 是一个通过JavaScript编写的,完全免费的且开源的媒体库。他是一个jQuery插件,jPlayer可以让你在网页上方便快捷地运用跨平台的 audio和video。jPlayer有着全面的API,为你在创建一些有创意的新媒体解决方案提供了可能。这些API由活跃的,在慢慢成长的 jPlayer社区提供支持。 为什么选择jPlayer 1.易用,部署只是分分钟的事。 2.可以通过HTML和CSS实现完全定制和换肤。 3.轻量...

2015
09-14

网页视频播放器插件 Video.js

介绍 Videojs 插件支持 HTML5 视频和 Flash 视频,YouTube 和 Vimeo,他支持PC端和移动端的视频播放。该项目从2010年中旬出现到现在已经超过 50,000 100,000 200,000 网站在使用了。 用法 在的需要插入视频的页面的 head 标签之间像下面这样引入相关文件就可以了 <link href="//vjs.zencdn.net/5.8/video-js.min.css" rel="stylesheet"> <script src="//vjs.zencdn.net/5.8/video.min.js">...

2015
04-15

极佳的响应式框架

随着移动互联网的兴起,移动应用遍地开花。对于传统的网站而言,已经无法适应移动设置。如手机,平板等。不过随着HTML5标准的尘埃落定,响应式框架如雨后春笋般出现。下面就给大家介绍一些比较优秀的响应式框架。 Bootstrap Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架,用于开发响应式布局、移动设备优先的 WEB 项目。 为所有开发者、所有应用场景而设计:Bootstrap 让前端开发更快速、简单。所有开发...

2015
04-08