网站代码高亮插件 prettify.js

作为前端开发者,代码是你躲也躲不开的,下面就教你如何在自己的网站里给所有代码块添加高亮效果。而这篇文章要给你介绍的就是这样一个代码高亮插件 prettify.js 。 这个插件的作用方法也非常简单,你只需要引用相关文件,然后再启用它就可以。 <!-- 引入 CSS 文件 --> <link href="prettify.min.css" rel="stylesheet"> <!-- 引入 JS 文件 --> <script src="jquery.min.js">&l...

2017
02-20

网页天气预报 API 及用法整理

在网站中添加天气预报是常有的事,特别是一事提供日常资讯类的网站。下面就给大家整理出一些天气 API 以及他们的用法。 国家气象局天气预报接口 国家气象局为我们提供了两个可用的天气预报 API 接口: http://www.weather.com.cn/data/sk/101280701.html http://www.weather.com.cn/data/cityinfo/101280701.html 这两个接口返回的数据是不一样的,你可以根据自己需要进行选择。 http://www.weather.com...

2017
02-15

移动端 WEB APP 框架大全

现在如今要开发一个 APP 可以说是一件非常简单的事了,因为网上很在有很多这样的 APP 前端框架。下面我给大家整理下。 SUI Mobile 简介 SUI Mobile 是一套基于 Framework7 开发的UI库。它非常轻量、精美,只需要引入我们的CDN文件就可以使用,并且能兼容到 iOS 6.0+ 和 Android 4.0+,非常适合开发跨平台Web App。 轻量的UI库。SUI Mobile 非常轻量,核心库压缩Gzip后的JS、CSS网络传输体积总共只有52K...

2017
02-14

WEB 前端开发插件整理

下拉框插件 网址 1.selecthttp://select2.github.io/ 2.双 selecthttp://loudev.com 3.selectboxhttp://aui.github.io/popupjs/doc/selectbox.html 文字工具插件 网址 1.简繁体转换https://github.com/BYVoid/OpenCC 2.拼音https://github.com/hotoo/pinyin 图表插件 网站网址 1.Highchartshttps://www.hcharts.cn/ 2.EChartshttp://echarts.baidu.com/ 3.Chart.jshttp://chartjs.org/ 4.Paperjsh...

2017
02-14

phpMyAdmin 登录出错 session_start(): open(SESSION_FILE, O_RDWR) failed: Permission denied

在配置 vsftpd 虚拟用户之前,是可以登录 phpMyAdmin 后台的。配置完 vsftpd 虚拟用户后就出现了如下图片所示的错误。 phpMyAdmin – Error Error during session start; please check your PHP and/or webserver log file and configure your PHP installation properly. Also ensure that cookies are enabled in your browser. session_start(): open(SESSION_FILE, O_RDWR) failed: Permission ...

2017
02-13

Linux 里 phpMyAdmin 无法上传大文件的解决方法

不管是网站的迁移还是其它操作,很多时候我们都需要对数据库进行备份还原,而在这个过程中,我们不得不去面对的问题就是大数据库文件的上传问题。下面就给大家分享下这个问题的解决方法。 这个问题大概的解决方法有两种,一种就是修改 php.ini,另一种方法就是修改 phpMyAdmin 的配置文件 config.inc.php。 修改 php.ini 修改 php.ini,这种方法改动的地方有点多,但是总的来看还是很简单的。因为只需要...

2017
02-13

wordpress 无法上传图片的解决方法

自己配置的云服务器肯定会遇到各种坑,好不容易把云服务器配置好了,把 wordpress 上传到站点根目录后程序也装好了,开开心心的发篇文章吧,谁知道无法上传图片。提示:无法将上传的文件移动至 wp-content/uploads/2017/02 如图: 这个问题也不算是什么大问题,网上解决的方法一大堆,但不时候都不尽如人意。 网友智慧 1.直接更改目录权限。 2.修改wp-config.php文件 3.进入WP后台后,点击左侧导航栏的“...

2017
02-10

centos7 vsftpd 虚拟用户配置

虚拟用户的配置说复杂也不复杂,说简单也不一定简单,我在配置这个东西的时候也折腾了好长时间,最后还是把它虚拟用户的配置弄明白了。下面就给大家分享我的此时此刻的喜悦。 首先引起我对虚拟用户配置的注意是因为一次 wordpress  后台上传图片报错的经历。因为刚配置完云服务器,所以问题就不接二连三的出现,后台无法上传图片就是其中一个为了更好的解决图片上传的问题,于是开始了 FTP 虚拟用户征服之...

2017
02-10

Linux ftp 上传文件提示 553 Could not create file

如果你的云服务器用的是 Linux 系统 ,那么权限的设置估计会让你踩了很多坑。这篇文章将要分享的就是其中一个坑,ftp 上传文件时提示 553 Could not create file 严重文件传输错误。网上也有很多关于这个问题的文章,但有时候你遇到的问题虽然“症状”跟它样是一样的,但是解决方法却有很大的不同,下面要分享的就是这么一个例子。 网上很多说法总结下: 网友智慧 1.考虑是不是selinux的原因,是不是没禁用 ...

2017
02-10

Linux 查看系统版本及内核版本的方法

下把 Linux 系统版本和内核版本的查看方法整理出来,本文以 centos 为例子。其它 Linux 发行版本命令行基本差不多。本文除了会说到版本的查看外,还会介绍版本的升级。 查Linux看版本命令 查看Linux系统版本命令 Linux系统版本的查看有三种方法 cat /etc/redhat-release 输出: CentOS Linux release 7.3.1611 (Core) cat /etc/issue 输出: \S Kernel \r on an \m lsb_release -a 输出: LSB Version...

2017
02-09

Linux (centos)命令行收集整理

1.Centos 下查看系统版本号信息的方法 Linux 查看系统版本及内核版本的方法 2.Centos 文件增删改查操作 Centos 7(Linux)文件增删改查操作 3.Centos 文件权限分配操作 4.Centos 用户增删改查操作 5.web 站点环境配置全套(php+nginx+mariadb+ phpmyadmin+vsftpd) Centos 7 php 环境安装及配置 Centos 7 nginx 服务安装及配置 Centos 7 MariaDB 数据库服务安装及配置 MongoDB 在 window 下安装及配置...

2017
02-09

配置好云服务器环境后安装 php 程序向导创建php文件失败

最近刚买了一台云服务器,然后就开始折腾,配置web环境。其实有各种坑,但最后还是迎来了胜利的曙光。这篇文章不会把这个过程中遇到的所有坑都写下来,只分享下云服务器环境配置好后,安装 php 程序时出现的一个错误。这个如果你刚开始玩云服务器的应该会遇到这个小问题:安装 zblog php版时会有如下提示: 提示 创建数据库!zblog 连接数据库并创建数据表! 创建并插入数据成功! 创建c_option.php失败,...

2017
02-08

AngularJS ng-repeat 数据遍历详解

AngularJS 中的ng-repeat 估计你见得不少了。这个东东其实也非常的简单:遍历数据。下面我们变来看看这个ng-repeat 到底可以为我们做些什么。这是本文所写到的例子的在线 Demo:http://yunkus.com/demo/angularjs/ng-repeat/。 基本结构 HTML 结构 <!DOCTYPE html> <html ng-app="yk"> <head> <meta http-equiv="Content-type" content="text/html;charset=utf-8"> ...

2017
01-25

AngularJS ng-style 添加样式详解

AngularJS 里的 ng-style 在平时的项目用也常有用到,一般都是用来通过条件判断然后显示指定的样式。本文我们变来看看这个 ng-style 怎么用,能做什么。下面我们先把基本的HTML 结构和数据准备好。在看代码之前你可以先来看看本文的在线 Demo :http://yunkus.com/demo/angularjs/ng-style/。 HTML 代码 <!DOCTYPE html> <html ng-app="yk"> <head> <meta http-equiv="Content-t...

2017
01-25

AngularJS checkbox 完美实现全选反选功能

刚站的全选反选相信你已经见过不少了,现在我们来看看在 AngularJS 中是如何实现的。下面会给出两个例子,一个是最简单的全选,反选;一个是接近完美的全选反选功能。 你可以先看看本文的 Demo 来预热下:http://yunkus.com/demo/angularjs/checkbox/ 下面直接贴出代码,HTML 代码有点多,但你也不用怕,因为来来去去也就那么几个东西了。现在你可以淡定的开始你的看码之旅了。 HTML代码 <!DOCTYPE html...

2017
01-21

AngularJS 与本地存储 LocalStorage 应用实例

这篇文章是一个关于AngularJS 与本地存储 LocalStorage 配合使用的一个应用实例,里面涉及到的东西也不少,但关键是它们都很简单,你可以不费吹灰之力就能把它人拿下,不信,你试试!废话不多说,直接上代码。你也可以先去品尝一下 AngularJS 与本地存储 LocalStorage 应用实例 Demo:http://yunkus.com/demo/angularjs/localstorage/。戴好安全带,网速有点快。 HTML代码 <!DOCTYPE html> <html...

2017
01-16

AngularJS 数据遍历 angular.foreach()

数据遍历对于前端来说,已经用得不少了,在AngularJS中也一样,我们很多时候需要这么做以达到操作数据的目的。下面我们就来看一个简单的例子。如果你觉得看代码不过瘾,你可以先去观摩下本例子的 Demo:http://yunkus.com/demo/angularjs/foreach/ 基本例子 HTML 代码 <!DOCTYPE html> <html ng-app="yk"> <head> <meta http-equiv="Content-type" content="text/html;chars...

2017
01-14

AngularJS 表单元素操作汇总

本文主要是把AngularJS 里有关表单元素操作的东西整理出来,比如操作input输入框、select下拉框。费话不多说,我们直接进主题。 如果你觉得下面的代码没意思,你也可以直接点这里感受Demo的威力:http://yunkus.com/demo/angularjs/form/ 基本代码结构 HTML代码 <!DOCTYPE html> <html ng-app="yk"> <head> <meta http-equiv="Content-type" content="text/html;charset=utf...

2017
01-14

text-overflow:ellipsis 文字超出省略号代替不起作用解决方法

前言 这个属性想必你平时也用了不少,特别在屏幕小得可怜的移动端。但有时候你会发现它怎么都没效果。思前想后也没发现自己做了什么对不起它事,但他就是对你不理不踩。 场景重现 无效场景一 现在我们来一个正常的例子 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-type" content="text/html;charset=utf-8"> <meta name="viewport" content="w...

2017
01-11

AngularJS filter 用法

Angular 里的filter(过滤器)方法可以让你筛选出符合条件的数据。对数据操作有一定要求的网站来说,filter 相当的体贴(如果你的网站是用filter来开发的话)。 Angular 内置了一些常用的过滤器:currency(货币)、date(日期)、filter(子串匹配)、json(格式化json对象)、limitTo(限制个数)、lowercase(小写)、uppercase(大写)、number(数字)、orderBy(排序),共九种。除了内置的过滤器外,你还可以自定义过...

2017
01-06

HTML5 Audio 对象(属性、方法、事件)

首先得先声明一下,这是一篇很无趣的文章,但是却很实用,因为本文把 HTML5 Audio 对象的属性,方法,事件整理出来。方便自己查阅,同时也希望本文能对你有些许帮助。 HTML5 Audio 对象属性 属性 描述 audioTracks 返回表示可用音频轨道的 AudioTrackList 对象。 autoplay 设置或返回是否在就绪(加载完成)后随即播放音频。 buffered 返回表示音频已缓冲部分的 TimeRanges 对象。 control...

2017
01-01

基于HTML5 Audio 开发音乐播放器

因为HTML5 新增了一些很方便的特性,所以HTML5  在前端圈里越来越受到大家的关注,下面就给大家分享一个基本HTML5 audio 属性开发的一个简单的音乐播放器。 HTML5 audio 实例 HTML 代码 <audio id="myMusic" src="./yellow.mp3"></audio> <div class="music-player-box"> <div class="music-info"> <span id="current-time">00:00</span> ...

2016
12-31

前端开发中常用的 CSS 样式整理(经历之谈)

这是一些经验之谈,虽然本博客里的文章几乎都可以称得上是经验之谈,但本文章更接地气,更实用,你可以把它当做一个字典来用,因为下面所收集的css样式真的很常用。 CSS文件中引入CSS文件 @import url("base.css");  角标实现 div{ vertical-align:super } 小三角实现 .triangle{ display:block; width:0; height:0; border-width:0 8px 8px; border-style:solid; border-colo...

2016
12-29

window 10 下安装nodejs及npm

装上了 window 10 系统后,对于我们这些做前端开发的人来说重新装上开发环境是必不可少的。但新的东西往往会给你带来不少麻烦。比如这篇文章要介绍的Nodejs的安装和npm的安装就是一个不争的事实。 为什么用了window 10 后麻烦事就来了呢?因为也非常简单,那就是window 10 目前还不支持.msi后缀的安装文件,因此你无法从Nodejs官方下载.msi格式的文件进行安装,于是你只能下载.exe的安装包。 .msi格式的安...

2016
12-14

AngularJS 操作JSON文件数据

前言 由于移动端的火爆,AngularJS 也自然而然的流行了起来,不可否认,虽然不能说现如今不能没有AngularJS,毕竟还有其它一些同样棒的MVVC框架,但有AngularJS会让我们的前端世界变得更加多姿多彩。AngularJS 的数据双向绑定可谓是其一大亮点。下面我们变来看一个AngularJS 操作JSON文件数据的例子。 写JSON文件数据(PHP) 不多说,直接上代码。 HTML代码 <!DOCTYPE html> <html ng-app=...

2016
11-20

CSS 水平垂直居中方法大全

前言 居中一个极其常见的需要,你应该绝不会陌生,但下面将要说的方法可能会有你不知道的。 下面的方法统一的HTML代码如下: <div class="demo-wrap"> <div class="demo-center"></div> </div> position+auto .demo-wrap{ width: 300px; height: 300px; background: #eee; position: relative } .demo-center{ width: 200px; height: 2...

2016
10-31

JavaScript 常用的排序方法

前言 Javascript 中排序可以说是非常常见的,不管是在平时的开发还是面试中排序都或多或少出现过。虽然说不算多,但是必不可少是肯定的。那么下面我们就来看看Javascript 中的排序方法都有哪些,在这里就不全列出,只把非常常用的分享给大家,其它的其实我觉得你知道有这个方法,并且知道在什么情况下可以用或者在什么情况下不能用就可以了。 原生sort sort() 方法用于对数组的元素进行排序,在原数组...

2016
10-28

JavaScript 实现数组去重的方法

前言 JavaScript 实现数组去重,一个在面试时常常会碰到的问题。如果你还像我那么不关注,不了解,不研究,那么你下次面试注定会失败,因为我可能就是败给了“去重”。下面我就把去重的方法都整理出来,下面的这些方法都来源于网络,但为了让你看得更清楚明了,我对方法中的代码稍稍作了下修改,但整体的思路还是不变的。 首先我们假定要对如下数组进行去重 var array=['true',true,false,'1',1,'','sss',"...

2016
10-22

CSS:清除浮动的方法(技巧)有哪些?

前言 浮动相信在平时的项目开发当中你一定用了不少,也遇到了不少。也知道有可以清除浮动的最常用的方法。那么下面我就给大家分享下我所知道的可清除浮动的方法。 清除浮动方法 float 法 也就是给父元素一个浮动,以达到清除浮动的效果。 /* 样式 */ .wrap-clear{border:1px solid #ccc;float: left;} .left-column{float: left;border:1px solid teal;} <div class="wrap-clear"> <div...

2016
10-19

立即执行函数(function ( ){……})( )

前言 我不相信你没有看这像标题里的函数书写方法,如果你说没有,那只能说明你才刚刚进入了 JavaScrpt 世界,那这种写法是什么意思,又有什么好处呢?下面我们就一步一步走进立即执行函数世界。 传统与简式 下面我们先来看一个极简单的传统与简式的例子,简单得一看就懂。 传统 我们最常见的函数执行方式就是,先定义一个函数,然后再调用它,如: /*执行函数*/ demo(); /*定义函数*/ function ...

2016
10-17