加载中…
个人资料
西山刀客
西山刀客
  • 博客等级:
  • 博客积分:0
  • 博客访问:122,095
  • 关注人气:35
  • 获赠金笔:0支
  • 赠出金笔:0支
  • 荣誉徽章:
访客
加载中…
好友
加载中…
评论
加载中…
留言
加载中…
博文
分类: js

应用场景:

用户在多行文本输入框里输入多条数据,但后端接收的参数格式却是以逗号连接的字符串。

涉及两个知识点:

一,正则的replace替换。

二,换行符在不同操作系统​下的不同表现。


综上,比较合理稳妥的解决方案是:

string.​replace(/\r\n/g, ',').replace(/\r/g, ',').replace(/\n/g, ',').replace(/,{2,}/g, ',')


拿去不谢。

阅读  ┆ 评论  ┆ 转载 ┆ 收藏 
分类: HTML/CSS
 常见斑马loading

上图是我们常见的loading进度条,以前都是用一张背景图片平铺的。其实如果抛去兼容性因素,我们可以用零图片纯样式来实现。

一,首先,我们先为容器定义一个纯蓝色背景:

box{background-color:##337ab7}​

二,绘制条纹。

我们可以用linear-gradient来绘制条纹。在本例中

阅读  ┆ 评论  ┆ 转载 ┆ 收藏 
分类: js
var _util = {
   
    map2array: function (obj) {
        var ret = [];
        for (var i in obj) {
            ret.push({
                'label': obj[i],
                'text': obj[i],
                'value': i
            });
        }
        return ret;
    },
   
    array2map: function (array, key) {
        var map = {};
        for (var i = array.length; i--;) {
            var item = array[i],
 
阅读  ┆ 评论  ┆ 转载 ┆ 收藏 
标签:

location

分类: js
图解location

怎么样,是不是很好很强大?

接下来,我们可以通过location.pathname  或者 location.hash等方法来获取location的各个组成部分了。

图片来源:http://www.dreamdu.com/javascript/location.pathname/
阅读  ┆ 评论  ┆ 转载 ┆ 收藏 
标签:

股票

it

分类: js
是啊,为啥啊。看见人家这么写或者公司规定就这么写了。都没有去想过。

直到今天看到了void的用法。

void运算符的作用是执行一个表达式,然后返回undefined。

举个例子:
var x=3;
void( x=5 )
x

结果为5。

当然,重点不在执行,而在于返回结果。因为它无论如何执行,返回结果都是undefined。

so,不仅仅可以写成javascript:void(0),只要你愿意,也可以写javascript:void(“abc”),或者 javascript:void(1000)。。。。




阅读  ┆ 评论  ┆ 转载 ┆ 收藏 
标签:

it

分类: HTML/CSS
一、opacity。前文中已经说过。http://blog.sina.com.cn/s/blog_448f59f30102ve4k.html   但比较浅,再说一次。
z-index的默认值为auto。举个例子,A是一个定位元素,其z-index缺省。B是一个常规文档流块元素。那么,A肯定是在B的上面的。但假如为B元素添加opacity属性(其值小于1),会发现B在A的上面了。假如将A的z-index值改为0,依然如此,改成1后,情况就不一样了。

所以,opacity影响z-index的条件如下:

  1. 必然发生在定位元素和非定素元素的关系中。如果两个都是定位元素,则不影响。如果都不是定位元素,也不会发现重叠的场景。
  2. 定位元素的z-index属性缺省或者值为0
  3. 非定位元素的opacity值小于1

二、transform。我们再来看另一个例子。A元素包含B元素。A元素为常规块级元素,假设宽高都是100px,B元素设置为position:fixed。宽高都是100%。结果发现,B元素的宽高是整个显示器的宽高。即使给A元素设置posito
阅读  ┆ 评论  ┆ 转载 ┆ 收藏 
(2015-10-19 19:00)
标签:

it

分类: js
类数组不是真的数组,仅仅是披着数组的外衣:具有length属性,成员也拥有索引下标。但仅此而已,却不能使用数组的内置方法,比如说:join,concat等等。
 
常见的类数组有arguments和HTMLCollection。

HTMLCollection为例,我们通过getElementsByTagName_r('li') ,获取了一组节点。

可以看出,它们虽然被[ ]所包裹,也有0-3的index以及length,但它的_proto_属性却是HTMLCollection。

其实,我们可以将类数组转换为真正的数组。

既然类数组对象没有继承自Array.prototype,那就不能在它们上面直接
阅读  ┆ 评论  ┆ 转载 ┆ 收藏 
分类: js
一直以为动画效果是用setInterval来执行的。也比较好理解,一直执行下去,直到条件再次出现时清除setInterval。

这几天看了用setTimeout来做动画的例子,起初我是不理解的。动画和延迟执行有毛关系(其实是有关系的,后面会讲到。)代码是这样子的:

for ( i=0; i<200; i++){
    setTimeout ( function(){
        var left = el.style.left ? el.style.left : 0;
        left = parseInt( left ) +1;
        el.style.left = left+ 'px';
    } , i );
}

代码就是以上样子的啦。我当时所不理解的是,为什么每次都要延迟的时间递增?为什么刚好到200px就停止执行了,i明明是时间,为什么和距离的值一样?

首先回答第一个问题,
for循环其实是动画的关键,仅仅执行
阅读  ┆ 评论  ┆ 转载 ┆ 收藏 
标签:

it

分类: js
通常,我们输入银行账号的界面是这样子的:
每隔四位加入一个空格。
这个空格肯定不是用户输入的,是伴随着用户的正常输入自动生成的。
在做一个添加合同页面时,无意间发现了这个正则表达式。

function formatCTNum(num){
    return num.replace(/[^0-9]/g, '').replace(/(\d{4})(?!$)/g, '$1 ')
}

这里涉及到正则的几个知识点:一,replace替换。二,捕获分组。三,否定顺序环视。
去年上半年的时候曾专门抽时间来学习正则,其实这些知识点当时也都了解过。但苦于没有正式接触相关项目,所以印象不深,基础不牢。趁这个机会又回炉了下。

一开始我不
阅读  ┆ 评论  ┆ 转载 ┆ 收藏 
标签:

it

分类: HTML/CSS
记得我刚去凤凰的时候,连float和position都没整明白。好在春哥给我了足够锻炼的机会。可是,我现在就真的整明白了吗?

上周的时候,王静问我,假如只给元素指定positon:absolute 而不指定它的四个方位值,会是什么情况?
我本能的回答:默认left和top为0。事实证明我错了。

被一个刚学CSS的同学问住了,好丢人。不过恰恰是刚学CSS的同学,才会问这种实际上很少遇到的场景。因为我们平时都是先指定元素absolute的状态,再指定它的方位值,几乎是同步的。

正解是,假如为一个元素指定了positon:absolute 而不指定它的四个方位值,它还是会按文档流来排列。类似于positon:static。不过说到这里,大家肯定问,这和不指定它的定位有什么区别呢?区别还是有滴,就是它拥有z-index属性,也就是说,不占位。听起来好像有点难以理解。举个例子好了。

假如一个父元素有A,B,C,D,E 这五个子元素。假如B,C,E是常规的文档流元素,A和D是
阅读  ┆ 评论  ┆ 转载 ┆ 收藏 
  

新浪BLOG意见反馈留言板 不良信息反馈 电话:4006900000 提示音后按1键(按当地市话标准计费) 欢迎批评指正

新浪简介 | About Sina | 广告服务 | 联系我们 | 招聘信息 | 网站律师 | SINA English | 会员注册 | 产品答疑

新浪公司 版权所有