轩枫阁

首页 / Web前端 (第30页)

原生JS实用技巧手记（六）

本系列文章旨在记录一些实用的javascript技巧，既可以作为一个知识的积累，又可以作为闲暇时打发时间写写代码的记录。同时也方便日后翻阅~

1. 封装cookie组件

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
var Cookie = {
    // 读取
    read : function(name){
        var cookieStr = "; "+document.cookie+"; ";
        var index = cookieStr.indexOf("; "+name+"=");
        if (index!=-1){
            var s = cookieStr.substring(index+name.length+3,cookieStr.length);
            return unescape(s.substring(0, s.indexOf("; ")));
        }else{
            return null;
        }
    },
    // 设置
    set : function(name,value,expires){
        var expDays = expires*24*60*60*1000;
        var expDate = new Date();
        expDate.setTime(expDate.getTime()+expDays);
        var expString = expires ? "expires="+expDate.toGMTString() : "";
        var pathString = ";path=/";
        document.cookie = name + "=" + escape(value) + expString + pathString;
    },
    // 删除
    del : function(name){
        var exp = new Date(new Date().getTime()-1);
        var s=this.read(name);
        if(s!=null) {
            document.cookie= name + "="+s+"expires="+exp.toGMTString()+";path=/"
        }
    }
};
// demo:
Cookie.set("xuanfengge", "www.xuanfengge.com", 7);
alert(Cookie.read("xuanfengge"));
Cookie.del("xuanfengge");

2. 字符串比较

1
2
3
4
5
var aString = "Hello!";
var bString = new String("Hello!");
if( aString == "Hello!" ){ } //结果: true
if( aString == bString ){ } //结果: true
if( aString === bString ){ } //结果: false (两个对不同,尽管它们的值相同)

3. 检索字符串

1
2
3
var myString = "hello everybody.";
// 如果检索不到会返回-1,检索到的话返回在该串中的起始位置
if( myString.indexOf("every") > -1 ){ } //结果: true

4. 查找替换字符串

查看全文

2014/05 27  周二

CSS3 box-shadow快速教程

前言

形象生动的动画展示box-shadow用法。

简介

box-shadow 属性向框添加一个或多个阴影。这个CSS3的属性很常用，盒阴影、按钮状态等各种地方都有用到，但是你了解并记住各个参数的作用及用法吗？

展示

源码：http://codepen.io/yisi/pen/sDBwC

语法：http://www.w3cplus.com/content/css3-box-shadow

动图：

c1608aa0gw1e9pb1vvnbfg20by08wjzh

使用技巧

查看全文

2014/05 23  周五

用CSS3变形创建半圆形导航

前言

不知大家有没有注意本站的文章页，底部有个白色半圆文章小工具。如果觉得有兴趣学习制作方案，可以继续往下看。

在这个教程中，我会教你使用CSS变形制作圆形导航。 我会带你一步步地创建样式，讲解背后的数学知识和简单的逻辑，让你对这技术有清晰的认识。

正如我提到的，使用CSS变形创建样式，会用到相关的基础数学知识。但是不必担心， 用到的数学非常简单，我会带你一步步地客克服它。

我要指出原技术属于Ana Tudor。我把它修改成我想要效果，这也是我希望你的在教程结束时去做的：对这技术有深入而且清晰的认识，开始查阅资料并且构建自己的样式。

效果

demo：http://tympanus.net/Tutorials/CircularNavigation/

download：http://tympanus.net/Tutorials/CircularNavigation/CircularNavigation.zip 查看全文

2014/05 17  周六

NPM之NodeJS包管理和分发工具推荐

前言

NPM为NodeJS提供了很多包和模块，让我们减少工作量。目前共有73561个packages，如此多的包和模块让我们眼花缭乱，本篇文章会对Node Packaged Modules进行介绍及推荐，持续更新，欢迎投稿！

简介

NPM的全称是，是一个NodeJS包管理和分发工具，已经成为非官方的发布Node模块（包）的标准。

如果你熟悉ruby的gem，Python的pypi、setuptools，PHP的pear，那么你就知道NPM的作用。

Nodejs自身提供了基本的模块，但是开发实际应用过程中仅仅依靠这些基本模块则还需要较多的工作。幸运的是，Nodejs库和框架为我们提供了帮助，让我们减少工作量。但是成百上千的库或者框架管理起来很麻烦，有了NPM，可以很快的找到特定服务要使用的包，进行下载、安装以及管理已经安装的包。 查看全文

2014/05 17  周六

Javascript数组去重方案

前言

数组去重是道经典的前端考题，2013年笔面试的时候，碰到过至少3次，方法有多种。

基本思路

  1. 数组遍历，元素一一比较，遇到相同的数组元素时则删除后面出现的
  2. 数组遍历，元素一一比较，遇到相同的数组元素，跳过前面重复元素，不相同的放入新数组
  3. 取一个数组元素放入新数组，遍历余下数组元素，与新数组的元素一一比较，若不相同则放入新数组
  4. 遍历数组，取一个元素作为对象的属性，判断属性是否存在

具体实现

删除余下重复的元素

查看全文

2014/05 08  周四
<<←2829303132→>>
加载更多

纸飞机许愿

x

钢琴节奏

请选择弹奏的曲谱

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 1
    • 2

    [返回曲谱列表]

    点击开始录制，可以录制弹奏的曲子
    开始录制 完成录制 取消
    马上试听 重新录制 提交此曲
    分享钢琴节奏： 新浪微博 QQ空间