本文目录:
腾讯的笔试结束,也就意味着9月份的战斗告一段落,每天四处奔波,很累也很充实。十一没有出去玩,也拒绝了一些应酬,把一些笔试题整理下,同时也回顾9月份的得失,好好总结,10月再战,告诫自己最难走的路一定是上坡路,坚持坚持!
不多说,看下26号百度的笔试题,我花了两天的时间整理下面的一些内容。
百度一共是8道题目,2个小时时间,题目不多,总体说来,考的是知识面的广度,开放的题目占多数。本人考的前端岗位。给大家透露个数,杭州地区前端笔试的人数大概在40个左右。好了,看题目:
1,列举你所知道的图片文件格式,以及分别的优缺点和使用场景?
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">  
    <title>子元素不继承父元素透明色</title>
    <style type="text/css">
    body{background-color: #000;margin: 0;padding: 0;}
    .origin{background-color: blue;color: #fff;width: 300px;height: 200px;}
    .container {width: 300px;height: 200px;color: #fff;position:relative;}
       .content {
    position:relative;/*只有定位的元素才能使用z-index*/
    z-index:2;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
   .opacity-box{
    background-color: blue;
    position:absolute;
    top:0px;
    left:0px;
    width:100%;
    height:100%;
    z-index:1;
    /*兼容IE7、8 */
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
    filter: alpha(opacity=50);
    opacity:.5;
}
    </style>
</head>
<body>
    <div class="origin">当没使用透明时的表现
            <img src="test.jpg"  />
    </div>
    <div class="container">
        <div class="opacity-box">
            使用透明,但未做任何处理
            <img src="test.jpg"  />
        </div>
    </div>
    <div class="container">
        <div class="content">
            使用透明,增加相对定位的背景处理
            <img src="test.jpg"  />
        </div>
        <div class="opacity-box"></div>
    </div>
</body>
</html>
这里要注意一点,content一定要设置相对定位,因为z-index只有拥有非static定位的情况下才能设置层叠高度。大家看一下使用后的效果:
这个题目到这里其实已经做完了,但是回过头我们看题目,别人交代的是父元素设置透明,子元素不继承,我们的这个解决方案还是不那么符合要求,因为元素之间根本不是父子关系,只是模拟的父子关系。
其实,这里还有另外一个解决方案,使用css新属性rgba,这里的a是alpher的意思,就是透明度,大家可以使用这个新属性来试下,rgba当中的透明度是不往下继承的。
但是,这个方法也有一个缺陷,就是ie7、ie8不支持。我想出题者应该是想考这个新属性,所以这里写上去应该也是一种选择。
console.log(1+ "2"+"2");//1+"2"先转化为“12”然后进行字符串的相加结果是“122”
console.log(1+ +"2"+"2");//由于一元运算符“+”的优先级更高,因此+“2”转换为数值2,然后1+2=3,最后数值和字符串相加,转换为字符串的拼接,结果“32”
console.log(1+ -"1"+"2");//先执行取反,变成1-1=0,然后0+“2”,结果“02”
console.log(+"1"+  "1"+"2");//先执行数值转换,相当于执行1+“1”+“2”,结果“112”
console.log("A"- "B"+"2");//先执行"A"- "B"返回NaN,再执行NaN+"2"=>"NaN2"
console.log("A"- "B"+2);//先执行"A"- "B"返回NaN+2,NaN执行加减法均返回NaN
1+{}//{}=>"[object Object]",执行数值和字符串的相加,结果"1[object Object]"
true+true//2,布尔值转换为数字后讲加
1+undefined//数值转换undefined=>NaN,结果NaN
1+null//数值转换null=>0,结果1
"1"+undefined//=>"1undefined"相当于执行字符串拼接 "1"+null//=>"1null"相当于执行字符串拼接
var lock=false,maxId=0;
function addMore(){
    if(!lock){
        lock=true;
        $.ajax({
            url: ‘www.xxx.com/test.php?maxId=‘+maxId,
            type: ‘GET‘,
            dataType: ‘json‘,
            success:function(data){
                var buffer=[],m=0;
                buffer[m++]=data.something1;
                buffer[m++]=data.something2;
                //otherthings....
                var temp=buffer.join("");
                $(temp).appendTo(‘div‘);
                maxId++;
            }
        })
        lock=false;
    }
}
$(window).scroll(function() {
  if (($(window).height() + $(window).scrollTop()) >= $(‘body‘).height()) {
    addMore();
  }
});
var singleton=(function(){
    //缓存实例
    var instance;
    var randomNum=Math.random();
    //单例初始化代码
    function init(){
        return randomNum;
    }
    //如果没有初始化,则初始化,否则返回已经执行的结果。
    if(!instance){
        instance=init();
    }
    return instance;
})()
console.log(singleton);
console.log(singleton);
原文:http://www.cnblogs.com/whf-Staring/p/4005349.html