js页面播放音乐

html

1
2
3
<a class="myMusic" title="">
	<span class="circle play"></span>
</a>

css

…

js,导入jquery

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<script>
    var musicSrc = 'bulid/images/music.mp3';
    var audio = null;
    function setAudio(){
	audio = document.createElement('audio');
	audio.src = musicSrc;
	if(!audio){
	    audio.load(); //加载音乐
	}else{
	    audio.play();
	    audio.loop = true; //循环播放
	}
    }
    var musicBtn  = $('.myMusic');
    var $music = musicBtn.find('.circle');
    //控制
    musicBtn.off().on('click',function(){
	if($music.hasClass('play')){ //如果已经播放，则暂停
	    audio && (audio.pause());
	    $music.addClass('pause').removeClass('play');
	}else{
	    audio && (audio.play());
	    $music.addClass('play').removeClass('pause');
	}
    });
    //页面加载后执行
    window.onload = function(){
	setAudio();
    }
</script>

js判断当前页面是pc端，移动端，ipad 

1
2
3
4
5
6
7
8
9
10
11
var _UA=navigator.userAgent;
if(_UA.search('Windows')!=-1||(_UA.search('Mac')!=-1&&_UA.search('iPhone')==-1&&_UA.search('iPad')==-1)) {
    //pc端

}else if(_UA.search('iPad')!=-1||(_UA.search('Android')!=-1&&window.outerWidth>=768)){
	//ipad

}else if(_UA.search('iPhone')!=-1||(_UA.search('Android')!=-1&&window.outerWidth<768)){
	//iphone

}

github 使用

github在windows系统下操作及流程介绍：

1.安装 nodejs 这是必备的，这里就不多说了。

2.安装git。如果不会百度吧。

3.如果是第一次在电脑上玩github需要配置 SSH才能访问github

配置SSH

检查本机是否有ssh key设置

1
$ cd ~/.ssh 或 cd .ssh

如果没有则提示： No such file or directory

如果有则进入~/.ssh路径下

如果没有ssh key设置，进行一下操作：

1
ssh-keygen -t rsa -C "xxxxxx@yy.com"

会出现类似一下页面

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
Generating public/private rsa key pair.

Enter file in which to save the key (/c/Users/xxxx_000/.ssh/id_rsa):   #不填直接回车

Enter passphrase (empty for no passphrase):   #输入密码（可以为空）

Enter same passphrase again:   #再次确认密码（可以为空）

Your identification has been saved in /c/Users/xxxx_000/.ssh/id_rsa.   #生成的密钥

Your public key has been saved in /c/Users/xxxx_000/.ssh/id_rsa.pub.  #生成的公钥

The key fingerprint is:

e3:51:33:xx:xx:xx:xx:xxx:61:28:83:e2:81 xxxxxx@yy.com

这样本机完成ssh key设置，其存放路径为：c:/Users/xxxx_000/.ssh/下。用文本打开 id_rsa.pub 复制所有内容。

添加ssh key到GItHub

登录GitHub系统；点击右上角账号头像的 “▼” → Settings → SSH kyes → Add SSH key

粘贴 id_rsa.pub 复制的内容。

这样 本机与github 链接已经完成了。

配置账户

1
git config --global user.name "your_username"  #设置用户名
1
git config --global user.email "your_registered_github_Email"  #设置邮箱地址(建议用注册giuhub的邮箱)

测试ssh keys是否设置成功

1
ssh -T git@github.com

如果出现 Hi xxx! You've successfully authenticated, but GitHub does not provide shell access. 出现词句话，说明设置成功。

本地项目通过SSH push到GitHub

在github上创建一个示例仓库, 复制创建的仓库地址

打开git输入

1
git clone  #仓库地址

进入仓库项目目录

1
cd #仓库项目目录名称

随意增加文件或者项目

1
git status  #查看更改删除及增加的文件或者文件夹

出现的红色字体表示你更改删除及增加的文件或者文件夹

1
git add .  #表示把要提交的文件添加到索引库中

回头再 git status 发现更改删除及增加的文件或者文件夹 颜色变成绿色。这表示文件添加成功了

1
git commit -m '#本次添加文件的描述信息'
1
git pull origin master  #合并master分之代码
1
git push origin master  #上传代码到master分之代码

提示会要输入 用户名及密码。

js 获取月份有多少天 

1
2
3
4
5
6
var date = new Date();
var getFullYear = date.getFullYear();
var getMonth = date.getMonth() + 1;

var d = new Date(getFullYear, getMonth, 0);
var num = d.getDate();

在hexo中加入多说评论

首先在根目录下_config.yml中增加duoshuo_shortname: 你站点的short_name，这里的short_name也就是你的二级域名。

如果使用的是默认的landscape主题只需要在themes\landscape\layout_partial\article.ejs 添加一下代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
 <% if (!index && post.comments && config.duoshuo_shortname){ %>
  <section id="comments">
   <!-- 多说评论框 start -->
<div id="ds-thread" class="ds-thread" data-thread-key="<%= post.path %>" data-title="<%= post.title %>" data-url="<%= post.permalink %>"></div>
<!-- 多说评论框 end -->
<!-- 多说公共JS代码 start (一个网页只需插入一次) -->
<script type="text/javascript">
var duoshuoQuery = {short_name:"datoublog"};
	(function() {
		var ds = document.createElement('script');
		ds.type = 'text/javascript';ds.async = true;
		ds.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') + '//static.duoshuo.com/embed.js';
		ds.charset = 'UTF-8';
		(document.getElementsByTagName('head')[0] 
		 || document.getElementsByTagName('body')[0]).appendChild(ds);
	})();
	</script>
<!-- 多说公共JS代码 end -->
  </section>
  <% } %>

web app自适应方案rem

rem是CSS3新引进来的一个度量单位。支持Mozilla Firefox 3.6+、Apple Safari 5+、Google Chrome、IE9+和Opera11+等浏览器。现在多在移动端上使用。

方案一：

css设置全局字体大小：

1
2
html{font-size: 100px; }
body{font-size: 0.14rem;}

jquery计算当前浏览器全局字体大小：

1
2
3
4
5
6
$(window).resize(function(){
    $('html').css({'font-size':$(window).width()/3.2+"px"});
});
$(function(){ 
    $('html').css({'font-size':$(window).width()/3.2+"px"});
});

在使用过程中，假设是640像素的设计，测量宽度是 20px,css中对应尺寸是 0.1rem。

方案二:

css部分：

1
2
3
4
5
6
html{
    font-size: 1rem;
}
body{
    font-size:0.24rem;
}

jquery部分：

1
2
3
4
5
6
7
8
9
10
11
12
$(window).resize(function(){
    setRem(640);
});
$(function(){
    setRem(640);
})
function setRem(maxWidth){
    var sw = $(window).width();
    var radio = sw/maxWidth>1?1:sw/maxWidth;
    var perSize = radio*100 + 'px';
    document.documentElement.style.fontSize=perSize;
}

640表示设计图纸宽度为640像素，在使用过程中，测量宽度是 20px ,css中对应尺寸是 0.2rem。

jquery 禁止右键及复制

禁止右键的代码：

1
2
3
$('body').bind('contextmenu', function() {
    return false;
});

禁止复制的代码：

1
2
3
$('body').bind("selectstart",function(){
    return false;
});

css3透视perspective,3D图(3D长方体) 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        body{
            background-color:#ccc;
        }
        .cube{
            margin:100px auto;
            width:200px;
            height:200px;
            perspective: 250px;
            -webkit-perspective: 250px;
            transform-style:preserve-3d;/*指定元素的子元素在3D空间内定位*/
            -webkit-transform-style:preserve-3d;
            perspective-origin: -100% -50%;/*指定用户从哪个方向看过来*/
            -webkit-perspective-origin: -100% -50%;
        }
        .cube div{
            display:block;
            position:absolute;
            width:100px;
            height:100px;
            line-height:100px;
            font-size:30px;
            text-align:center;
        }
        .front{
            border:none;
            background:rgba(0, 0, 0, 0.3);
            transform:translateZ(50px);
            -webkit-transform:translateZ(50px);
        }
        .back{
            background:rgba(0, 225, 0, 1);
            transform:translateZ(-50px);
            -webkit-transform:translateZ(-50px);
        }
        .right{
            background:rgba(196, 0, 0, 0.7);
            transform:rotateY(90deg) translateZ(50px);
            -webkit-transform:rotateY(90deg) translateZ(50px);
        }
        .left{
            background:rgba(0, 0, 196, 0.7);
            transform:rotateY(-90deg) translateZ(50px);
            -webkit-transform:rotateY(-90deg) translateZ(50px);
        }
        .top{
            background:rgba(196, 196, 0, 0.7);
            transform:rotateX(90deg) translateZ(50px);
            -webkit-transform:rotateX(90deg) translateZ(50px);
        }
        .bottom{
            background:rgba(196, 0, 196, 0.7);
            transform:rotateX(90deg) translateZ(50px);
            -webkit-transform:rotateX(-90deg) translateZ(50px);
        }
    </style>
</head>
<body>
    <div class="cube">
        <div class="front">1</div>
        <div class="back">2</div>
        <div class="right">3</div>
        <div class="left">4</div>
        <div class="top">5</div>
        <div class="bottom">6</div>
    </div>
</body>
</html>

html5移动初模板 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <meta name="format-detection" content="telephone=no, email=no"/>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>document</title>
    <meta name="keywords" content="">
    <meta name="description" content="">
</head>
<body>
  
</body>
</html>

javerscript 获取class 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<script>
var getByClass = function (oParent, cname) {
    if (oParent == null) {
        oParent = document;
    }
    if (oParent.getElementsByClassName) {
        return oParent.getElementsByClassName(cname);
    } else {
        var all = oParent.getElementsByTagName("*");
        var j = all.length;
        var theClass = new RegExp("(^|\\s)" + cname + "(\\s|$)");
        var result = new Array();
        for (var i = 0; i < j; i++) {
            var allClass = all[i].className;
            if (theClass.test(allClass)) {
                result.push(all[i])
            }
        }
        return result;
    }
}
</script>

复选框全选与反选 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="js/jquery-2.1.1.min.js"></script>
    <script>
        $(document).ready(function(){
            $("#CheckAll").on("change",function(){
                if($("#CheckAll").prop("checked")){
                    $('input[name=subBox]').prop('checked', true); 
                }else{
                    $('input[name=subBox]').prop('checked', false); 
                }
            });

            $(".chec")
        });
    </script>
</head>
<body>
    <div class="check"> 
        <input id="CheckAll" type="checkbox" />全选 
        <input name="subBox" type="checkbox" />
        <input name="subBox" type="checkbox" />
        <input name="subBox" type="checkbox" />
        <input name="subBox" type="checkbox" />
    </div>
    <input id="btn" type="button" value="按钮" />
</body>
</html>

AngularJS 购物车简单案例 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
<!DOCTYPE html>
<html>
    <head>
        <meta charset = "utf-8">
        <script type="text/javascript" src = "js/angular.js"></script>
        <style type="text/css">
           .item{
                height: 200px;
                width:100px;
                margin:5px;
                border:1px solid #ccc;
                float:left;
           }
        </style>
    </head>
    <body ng-app = "mapp" ng-controller = "mctrl">
        <!--
        <div class = "list">
            <div class = "item" ng-repeat = "item in items">
                <p class = "item-name"><span>商品名:</span>{{item.name}}</p>
                <p class = "item-price"><span>价格:</span>{{item.price|currency:"￥"}}</p>
                <input type = "button" ng-click = "buy($index)" value = "购买">
            </div>
        </div>
        -->
        <div class = "item-car">
            <p ng-repeat = "item in items">
                <span>{{item.name}}</span>
                <span>{{item.price|currency:"单价"}}</span>
                <input type = "button" value = "-" ng-click = "minus($index)"/>
                <input type = "text" ng-model = "varlist.itemNum[$index]">
                <input type = "button" value = "+" ng-click = "add($index)"/>
                <span>单件总价:{{item.price*varlist.itemNum[$index]|currency:"￥"}}</span>
            </p>
            <p>总价：{{varlist.total|number:2}}</p>
        </div>
        <span style="background-color: #339966;"></span>
        <script type="text/javascript">
            var app = angular.module("mapp", []);
            app.controller("mctrl", function($scope) {
                // 数据源
                $scope.items = [{
                    "name": "王老吉",
                    "price": 4
                }, {
                    "name": "老干妈",
                    "price": 7.5
                }, {
                    "name": "臭豆腐",
                    "price": 7.32
                }, {
                    "name": "饼干",
                    "price": 22
                }, ];
                var len = $scope.items.length;
                var arr = [];
                // 循环为数组赋值
                for (var i = 0; i < len; i++) {
                    arr[i] = 0;
                }
                // 检测是否变化，为了总价能够改变
                $scope.$watch("varlist.itemNum", function() {
                    getTotal();
                }, true);
                // 定义变量
                $scope.varlist = {
                    itemNum: arr,
                    total: 0
                }
                // 购物的时候操作
                $scope.buy = function($index) {
                    $scope.varlist.itemNum[$index]++;
                    getTotal();
                }
                // -----
                $scope.minus = function($index) {
                    if ($scope.varlist.itemNum[$index] == 0) {
                        return;
                    } else {
                        $scope.varlist.itemNum[$index]--;
                        getTotal();
                    }
                }
                // ++++
                $scope.add = function($index) {
                    $scope.varlist.itemNum[$index]++;
                    getTotal();
                }
                // 计算总价
                var getTotal = function($index) {
                    $scope.varlist.total = 0;
                    for (var j = 0; j < len; j++) {
                        $scope.varlist.total = $scope.varlist.total + $scope.varlist.itemNum[j] * $scope.items[j].price;
                    }
                    return $scope.varlist.total;
                }
            });
        </script>
        <span style="background-color: #339966;"></span>
    </body>
</html>

[转]图片上传的demo，支持移动，缩放，裁剪

某大神写的图片上传的demo

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
<!doctype html>
<html>
<head>
    <link  href="/domo/cropper.min.css" rel="stylesheet">
    <script src="/domo/lrz.bundle.js"></script>
    <script src="/domo/cropper.min.js"></script>
</head>
<body>
<h1>Upload Demo</h1>
<input type="file" id='input'>
<button id="crop">Crop</button>
<div id="img-preview">
    <img src=""  id="showImage" alt=""/>
</div>
<script>

    var $ = function(el){
        return document.querySelector(el);
    };

    var result = $('#img-preview'),
        preview = $('#showImage'),
        cropOption = {
            aspectRatio: 1 / 1,
            guides: false,
            cropBoxResizable: false,
            cropBoxMovable: false,
            dragCrop: false,
            minContainerWidth: 200,
            minContainerHeight: 200
        },
        cropper = null;

    // 预览
    $('#input').onchange = function (e) {
        var file = this.files[0];
        lrz(file,{width: 600})
            .then(function (rst) {
                preview.style.display = 'block';
                preview.onload = function () {
                    cropper = new Cropper(preview,cropOption);
                };
                preview.src = rst.base64;
            })
            .catch(function (err) {

            })
            .always(function () {

            });
    };


    // 裁剪
    $('#crop').onclick = function(){
        var img = new Image();
        img.onload = function () {
            $('body').appendChild(img);
            // 销毁
            cropper.destroy();
            preview.style.display = 'none';
        };
        img.src = cropper
            .getCroppedCanvas(cropOption, {
                width: 200,
                height: 200
            })
            .toDataURL("image/jpeg", 0.9);
    };

</script>
</body>
</html>

js中cookie的使用

在网站中，很多地方需要使用到cookie，例如用户登录状态，用户下次访问时，保存上一次操作状态等。 cookie是浏览器提供的一种机制，它将document 对象的cookie属性提供给JavaScript。可以由JavaScript对其进行控制，而并不是JavaScript本身的性质。cookie是存于用户硬盘的一个文件，这个文件通常对应于一个域名，当浏览器再次访问这个域名时，便使这个cookie可用。因此，cookie可以跨越一个域名下的多个网页，但不能跨越多个域名使用。

cookie的缺点主要集中于安全性和隐私保护。主要包括以下几种：

  • cookie可能被禁用。当用户非常注重个人隐私保护时，他很可能禁用浏览器的cookie功能；
  • cookie是与浏览器相关的。这意味着即使访问的是同一个页面，不同浏览器之间所保存的cookie也是不能互相访问的；
  • cookie可能被删除。因为每个cookie都是硬盘上的一个文件，因此很有可能被用户删除；
  • cookie安全性不够高。所有的cookie都是以纯文本的形式记录于文件中，因此如果要保存用户名密码等信息时，最好事先经过加密处理。

下面是js设置网站cookie和读取网站cookie的简单用法：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
//读取cookie
var res = document.cookie.substring(5);
//alert(res); //输出：www.yaobblog.com

//判断浏览器是都有当前网站cookie信息
if(res != "www.yaobblog.com"){
    
    //添加 cookie
    var oDate = new Date();
    oDate.setDate(oDate.getDate + 30); //设置30天以后

    //设置网站cookie 30天后失效
    document.cookie = "name=www.yaobblog.com;expires=" + oDate; 
}

前端构建工具gulp入门教程

第1步：安装Node

首先，最基本也最重要的是，我们需要搭建node环境。访问 nodejs.org，然后点击大大的绿色的 install 按钮，下载完成后直接运行程序，就一切准备就绪。npm会随着安装包一起安装，稍后会用到它。

为了确保Node已经正确安装，我们执行几个简单的命令。

1
2
node -v
npm -v

因为国内访问外网都很慢，甚至不能访问！

淘宝针对国内下载npm库缓慢的问题，使用建立自己的cnpm库，可以很方便使用在公司内部使用，命令如下：

1
2
npm install -g cnpm --registry=https://registry.npm.taobao.org
cnpm -v

如果这命令没有得到返回，可能node就没有安装正确，进行重装。安装淘宝镜像后，以后下载npm库，都用cnpm代替，下载会快很多。

第2步：安装gulp

首先我们要全局安装一遍：

1
cnpm install -g gulp

运行时注意查看命令行有没有错误信息，安装完成后，你可以使用下面的命令查看gulp的版本号以确保gulp已经被正确安装。

1
gulp -v

接着我们要进去到项目的根目录再安装一遍

1
cnpm install gulp --save-dev

第3步：新建gulpfile.js文件

  • sass的编译（gulp-sass）
  • 自动添加css前缀（gulp-autoprefixer）
  • 压缩css（gulp-minify-css）
  • js代码校验（gulp-jshint）
  • 合并js文件（gulp-concat）
  • 压缩js代码（gulp-uglify）
  • 压缩图片（gulp-imagemin）
  • 自动刷新页面（gulp-livereload）
  • 图片缓存，只有图片替换了才压缩（gulp-cache）
  • 更改提醒（gulp-notify）

安装这些插件需要运行如下命令（也可以拆开单独安装）：

1
cnpm install gulp-sass gulp-autoprefixer gulp-minify-css gulp-jshint gulp-concat gulp-uglify gulp-imagemin gulp-notify gulp-rename gulp-livereload gulp-cache --save-dev

接着我们要创建一个gulpfile.js在根目录下，gulp只有四个API：
task，watch，src，和 dest

  • task这个API用来创建任务，在命令行下可以输入 gulp test 来执行test的任务。
  • watch这个API用来监听任务。
  • src这个API设置需要处理的文件的路径，可以是多个文件以数组的形式[main.scss, vender.scss]，也可以是正则表达式/*/.scss。
  • dest这个API设置生成文件的路径，一个任务可以有多个生成路径，一个可以输出未压缩的版本，另一个可以输出压缩后的版本。

第4步：编辑gulpfile.js文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
//加载插件
var gulp = require('gulp'),
    sass = require('gulp-sass'),//sass的编译
    autoprefixer = require('gulp-autoprefixer'),//使用Autoprefixer来补全浏览器兼容的css
    minifycss = require('gulp-minify-css'),//压缩css
    jshint = require('gulp-jshint'),//js代码校验
    uglify = require('gulp-uglify'),//压缩js代码
    imagemin = require('gulp-imagemin'),//压缩图片
    rename = require('gulp-rename'),
    concat = require('gulp-concat'),//合并js文件
    notify = require('gulp-notify'),
    cache = require('gulp-cache'),//图片缓存，只有图片替换了才压缩
    livereload = require('gulp-livereload'),//自动刷新页面
    watch = require('gulp-watch');

// 编译sass、自动添加css前缀和压缩。Styles任务
gulp.task('styles', function () {
    return gulp.src('stylesheets/*.scss')
        .pipe(sass())
        .pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4'))//添加前缀
        .pipe(gulp.dest('assets/css/'))//保存未压缩文件到我们指定的目录下面
        .pipe(rename({
            suffix: '.min'//给文件添加.min后缀
        }))
        .pipe(minifycss())//压缩样式文件
        .pipe(gulp.dest('assets/css/'))//输出压缩文件到指定目录
        .pipe(notify({
            message: 'Styles task complete'//提醒任务完成
        }));
});

//  js代码校验、合并和压缩 Scripts。 Scripts任务
gulp.task('scripts', function () {
    return gulp.src('javescript/*.js') //js代码校验
        .pipe(jshint())
        .pipe(jshint.reporter('default'))
        .pipe(concat('all.js'))//js代码合并
        .pipe(rename({
            suffix: '.min'//给文件添加.min后缀
        }))
        .pipe(uglify())//压缩脚本文件
        .pipe(gulp.dest('assets/js/'))//输出压缩文件到指定目录
        .pipe(notify({
            message: 'Scripts task complete'//提醒任务完成
        }));
});

// 图片压缩。Images
gulp.task('images', function () {
    return gulp.src('assets/images/*')//检测图片路径
        .pipe(cache(imagemin({
            optimizationLevel: 3,
            progressive: true,
            interlaced: true
        })))
        .pipe(gulp.dest('assets/images'))
        .pipe(notify({
            message: 'Images task complete'
        }));
});
// Default task
gulp.task('default', function () {
    gulp.start('styles', 'scripts', 'images');
});
// 事件监听。Watch
gulp.task('watch', function () {
    gulp.watch('stylesheets/*.scss', ['styles']);
    gulp.watch('javascript/*.js', ['scripts']);
    gulp.watch('assets/images/*', ['images']);
    livereload.listen();
    gulp.watch(['assets/*']).on('change', livereload.changed);
});

jquery 搜索自动匹配关键字

在项目中，可能会碰到搜索功能自动匹配关键字功能，开始也不会，后经过某位大神提供代码实现了搜索自动匹配功能；
实例使用的是模拟服务器发送json数据方式来实现功能；

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var json = [
    {
        "name": "搜索a",
        "pinyin": "aaa"
    },
    {
        "name": "搜索b",
        "pinyin": "bcd"
    },
    {
        "name": "数据",
        "pinyin": "abc"
    }
       // 。。。。。。。。
];

js代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
$('#input').on('keyup', function () {
    var arr3=[];//匹配出来的所有对象
    var search_str = $(this).val();
    if(search_str !=""){ //判断当前搜索框非空
        $(".search .s").css("display","block");//搜索框非空时，显示下拉搜索框
        
        var search_result = findInJsonPin(search_str, json);
        var $show_area = $('#show-area');
        $show_area.empty();
        search_result.forEach(function (val) {
            $show_area.append('<li>' + val + '</li>');//添加匹配出来的对象
            arr3.push(val);//将所有匹配的对象存放到数组
        });
        //点击匹配的对象添加到输入框，并隐藏下拉搜索框
        $("#show-area").on("click","li",function(){
            $('#input').val(arr3[$(this).index()]);
            $(".search .s").css("display","none");
        });
    }else{
        $(".search .s").css("display","none");
    }
});

function findInJson(search_str, json) {
    var result = [];
    json.forEach(function (val) {
        var regex = new RegExp(search_str, 'i');
        if (regex.test(val.name)) {
            result.push(val.name);
        } else if (regex.test(val.pinyin)) {
            result.push(val.pinyin);
        }
    });
    return result;
}

html代码部分：

1
2
<input id="input" class="txt" type="text" >
<ul class="s" id="show-area"></ul>

jquery ajax获取txt数据

JSON(JavaScript Object Notation)是一种轻量级的数据交换格式。JSON存储了以“Key-Value”为结构的数据。有时候我们需要读取JSON格式的数据文件，在jQuery中可以使用Ajax或者 $.getJSON()方法实现。
txt假设为服务器发送的数据，以json格式为例，如下：

1
2
3
4
5
{
  "one": "aaa",
  "two": "bbb",
  "three": "ccc"
}

1.ajax方法：

js获取txt文本，转化成json数据，代码如下：

1
2
3
4
5
6
7
8
9
$(document).ready(function(){
    var ajax = $.ajax({
        url:"txt.txt",
        dataType: 'json',
        success:function(data){
            console.log(data);//打印数据
        }
    });
});

2.getJSON方法：

参数:

  • url,[data],[callback]String,Map,FunctionV1.0
  • url:发送请求地址。
  • data:待发送 Key/value 参数。
  • callback:载入成功时回调函数。
1
2
3
4
5
$(document).ready(function(){
    $.getJSON("txt.txt",function(data){
        console.log(data);//打印数据
    })
});

css3 鼠标滑过背景图片，图片围绕圆心旋转的效果

鼠标滑过背景图片，图片围绕圆心旋转，鼠标移出图片就停止转动。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<style>
img{
    transition:transform 0.8s;
    -moz-transition: -moz-transform 0.8s; /* Firefox 4 */
    -webkit-transition: -webkit-transform 0.8s; /* Safari and Chrome */
    -o-transition: -o-transform 0.8s; /* Opera */
}
img:hover{
    transform:rotate(180deg);
    -ms-transform:rotate(180deg);   /* IE 9 */
    -moz-transform:rotate(180deg);  /* Firefox */
    -webkit-transform:rotate(180deg); /* Safari 和 Chrome */
    -o-transform:rotate(180deg);    /* Opera */
}
</style>

html行内元素 和 块状元素 总结

块级元素和内联元素的区别：

块级：块级元素会独占一行，默认情况下宽度自动填满其父元素宽度；块级元素可以设置宽高；
行内：行内元素不会独占一行，相邻的行内元素会排在同一行。其宽度随内容的变化而；行内元素不可以设置宽高

块状元素

  • address 地址

  • blockquote 块引用

  • center 举中对齐块

  • dir 目录列表

  • div 常用块级容易，也是CSS layout的主要标签

  • dl 定义列表

  • fieldset form控制组

  • form 交互表单h1 标题

  • h2 副标题

  • h3 3级标题

  • h4 4级标题

  • h5 5级标题

  • h6 6级标题

  • hr 水平分隔线

  • isindex input prompt

  • menu 菜单列表

  • noframes frames可选内容，（对于不支持frame的浏览器显示此区块内容

  • noscript 可选脚本内容（对于不支持script的浏览器显示此内容）

  • ol 有序表单

  • p 段落

  • pre 格式化文本

  • table 表格

  • ul 无序列表

内联元素

  • a 锚点
  • abbr - 缩写
  • acronym - 首字
  • b - 粗体(不推荐)
  • bdo - bidi override
  • big - 大字体
  • br - 换行
  • cite - 引用
  • code - 计算机代码(在引用源码的时候需要)
  • dfn - 定义字段
  • em - 强调
  • font - 字体设定(不推荐)
  • i - 斜体
  • img - 图片
  • input - 输入框
  • kbd - 定义键盘文本
  • label - 表格标签
  • q - 短引用
  • s - 中划线(不推荐)
  • samp - 定义范例计算机代码
  • select - 项目选择
  • small - 小字体文本
  • strike - 中划线
  • strong - 粗体强调
  • sub - 下标
  • sup - 上标
  • tt - 电传文本
  • u - 下划线
  • var - 定义变量

font-awesome图标字体库和CSS框架的使用

Font Awesome 是一套专门为 Twitter Boostrap 设计的图标字体库。这标字体集几乎囊括了网页中可能用到的所有图标，除了包含 Twitter Boostrap 的默认图标外，还有社交收集图标、Web 应用法度图标和编辑器图标等等。Font Awesome为您提供可缩放的矢量图标，您可以使用CSS所提供的所有特性对它们进行更改，包括：大小、颜色、阴影或者其它任何支持的效果。

参考网站：fontawesome

  • 下载最新 Font Awesome 插件；

  • 把css和fonts文件夹引入到项目中；

  • 在页面上调用css样式，使用方法，例如：

1
<i class="fa fa-camera-retro"></i>