【6月29日】西瓜贡献的练习题

[imochen]

• 【1】将以下字符串中的${name}替换为Mali,${time}替换为2016

var str = '<div>{$name}：你好，{$time}！</div>';

//参考答案
var data = {
  name : 'Mali',
  time : 2016
}

function compile(str,data){
  return str.replace(/\{\$(\w+)\}/g,function(match,$1){
    return data[$1];
  })
}

compile('<div>{$name}：你好，{$time}！</div>',data);
//<div>Mali：你好，2016！</div>

• 【2】 有以下样式，请说明div内文字是多少px?

html{ font-size:14px; }
div{ font-size:1.2rem; }

• 【3】请写出下面代码执行结果

for(var i=1;i<=3;i++){
  setTimeout(function(){
    console.log(i);
  },0)
}

• 【4】请写出一个方法，用于获取以下url中的参数值

var url = 'http://xxx.com?a=1&b=2';

//参考答案
function parseParam(url) {
  var a = document.createElement('a');
  a.href = url;
  var param = a.search,
    tmp = {};
  if (!param) return tmp;
  var paramArr = param.slice(1).split('&');
  paramArr.forEach(function(item) {
    var match = item.split('='),
      key = match[0],
      value = decodeURIComponent(match[1] || '');
    tmp[key] = value;
  });
  return tmp;
}

• 【5】如何实现浏览器内多个标签页之间的通信？
• 【6】为什么说jsonp不是真正的ajax？
• 【7】请依次写出html5新标签，音乐、图形、视频、导航、页眉

[yishichangan]

好厉害

[deliveph]

666

[Keraun]

6666

[bl4ckn1ght]

选c

[StarOfLife]

打印3个4

[qiaobox]

三短一长选最长，长短不一要选B，参差不齐就选D

[qiaobox]

建议上传答案以供参考

[newHandSu]

建议上传答案以供参考

[dongjianguo]

【2】14*1.2 = 16.8px,但实际会显示16px的字体大小； 【3】三个4； 【5】LocalStorage,Cookies 【6】jsonp是非官方的一种跨域请求的一种方式，动态创建script标签，并把内容填入到这个标签内，跟ajax是完全不一样的东西。 【7】,,,

,

[Forthere]

不懂，帮顶

[dongjianguo]

    function getData(url) {

      if (url.indexOf('?') === -1) {
        alert('请传入一个带参数的url字符串');
      } else {
        //去掉#后面的参数
        if (url.indexOf('#') > 0 ) {
          url = url.split('#')[0];
        }
        //将字符串处理成为每项为'key=value'的数组
        var temp = url.split('?')[1].split('&');
        //定义返回的对象
        var result = {};

        //遍历temp数组，将key,value写入对象
        for (var i = 0; i < temp.length; i++) {
          var keyValue = temp[i].split('=');
          var key = keyValue[0];
          var value = keyValue[1] || '';
          result[key] = value;
        }
      } 

      //返回结果对象
      return result;

    }

    //getData('http://xxx.com?a=1&b=2')

[Keraun]

//获取URL后面参数
function getUrlSearch(url) {
    var result = {},
        paramsArr;
    var tempArr = url.split('?');
    if (tempArr.length <= 1) return result;
    try {
        paramsArr = decodeURI(tempArr[1]).split('&');
    } catch (e) {
        console.warn('url解析失败', e);
    }
    paramsArr.forEach(function(item, index) {
        var match = item.split('='),
            key = match[0],
            value = match[1] || '';

        result[key] = value;
    });
    return result;
}
//测试用例
var url = [
    'http://www.baidu.com',
    'www.baidu.com?code= &spm=190.10.10.0',
    '?code=0&spm=192.10.10.1',
    'http://www.baidu.com?code=1&spm=191.10.10.2',
    'http://www.baidu.com/#/module?code=2&spm=192.10.10.3',
    ''
];

url.forEach(function(val, index) {
    val = encodeURI(val);
    console.log(getUrlSearch(val));
});
//输出
/*
{}
{ code: ' ', spm: '190.10.10.0' }
{ code: '0', spm: '192.10.10.1' }
{ code: '1', spm: '191.10.10.2' }
{ code: '2', spm: '192.10.10.3' }
{}
 */

考虑query+hash的情况

//获取URL后面参数
function getUrlSearch(url) {
    var result = {},
        paramsArr;
    var targetA = document.createElement('a');
    targetA.href = url;
    tempArr = targetA.search;
    if (!tempArr) return result;
    try {
        paramsArr = decodeURI(tempArr).slice(1).split('&');
    } catch (e) {
        console.warn('url解析失败', e);
    }
    paramsArr.forEach(function(item, index) {
        var match = item.split('='),
            key = match[0],
            value = match[1] || '';

        result[key] = value;
    });
    return result;
}
//测试用例
var url = [
    'http://www.baidu.com',
    'www.baidu.com?code= &spm=190.10.10.0',
    '?code=0&spm=192.10.10.1',
    'http://www.baidu.com?code=1&spm=191.10.10.2',
    'http://www.baidu.com?code=3&spm=192.10.10.3#/module',
    ''
];

url.forEach(function(val, index) {
    val = encodeURI(val);
    console.log(getUrlSearch(val));
});
//输出
/*
{}
{ code: ' ', spm: '190.10.10.0' }
{ code: '0', spm: '192.10.10.1' }
{ code: '1', spm: '191.10.10.2' }
{ code: '2', spm: '192.10.10.3' }
{}
 */

[13hua]

只会第二个。。。

[babel1995]

任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合: 1em=16px。那么12px=0.75em,10px=0.625em。为了简化font-size的换算，需要在css中的body选择器中声明Font-size=62.5%，这就使em值变为 16px_62.5%=10px, 这样12px=1.2em, 10px=1em, 也就是说只需要将你的原来的px数值除以10，然后换上em作为单位就行了。（from 某网站） html{ font-size:14px; } div{ font-size:1.2rem; } 14px=1.4em 1.4_1.2=1.68em 1.68em=16.8px （我只能理解到这儿了，至于rem 。。。）

[imochen]

@babel1995 你这个太乱了。

em是根据其父级的font-size来计算的，rem则是根据root（也即html）的font-size来计算的。

html{ font-size:14px; }
div{ font-size:1.2rem; } /*font-size = 14*1.2px*/

#div{ font-size: 50px;}
#div .div{ font-size:1.2em;} /*font-size:50*1.2px*/

[babel1995]

恩，我明白了。Thanks！ @imochen

[babel1995]

7.audio、img、 video、nav、header

[zxjyuqiao]

7.audio、canvas、 video、nav、header

[babel1995]

@zxjyuqiao canvas?是图形吗？怎么不是img?