kellogg项目总结

1.题目的去随机值去重

（当时做的是每次点击取出一个随机数，并删除数组中位置，后来改成获取10个随机数组成的数组，二者略有差距，修改颇长时间）

function getArr(num){
    totalArr = [];
    for(var i = 0; i < num; i++){
        totalArr.push(i);
    }
}

function getRam(){
    var ram =  Math.floor(0 + (totalArr.length - 0) * Math.random());
    return Number(totalArr.splice(ram,1));
}


function getRamTen(index,num){ //index 从多少开始；num 去几个随机数
    getArr(25);  //重复调用，在getRam时会发生变化，所以每次执行要再次填满25个
    var exam = [];
    for(var i = 0 ; i < num ; i ++){
        var ram = 'q'+(getRam()+index)+'.html';
        exam.push(ram);
    }
    console.log("2 " , exam.sort() , exam.length);
}

getRamTen(0,10);

2.无缝滚动

（如果是后台获取数据，还需做一些优化处理，因为可能数据开始获取不到）

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
.bar {
 100%;
height: 45px;
line-height: 45px;
background-color: #fe0000;
clear: both;
position: relative;
overflow: hidden;
}

.bar ul {
position: absolute;
left: 0;
top: 0;
}

.bar li {
float: left;
color: #fff;
list-style: none;
margin-right: 20px;
}

</style>
<script type="text/javascript">
function $$(id){return document.getElementById(id);}
window.onload=function(){
    var oDiv = $$("bar");
    var oUl = oDiv.getElementsByTagName("ul")[0];
    var oLi = oUl.getElementsByTagName("li");
    
    var timer = null;
    var iSpeed=-2;
    
    oUl.style.width=(oLi[0].offsetWidth+30)*oLi.length+"px";
    oUl.style.left= oDiv.offsetWidth+"px";

    timer=setInterval(function(){
        oUl.style.left= oUl.offsetLeft + iSpeed +"px";

        if(oUl.offsetLeft<-oUl.offsetWidth){
            oUl.style.left= oDiv.offsetWidth+"px";
        }
    },30);
};
</script>
</head>
<body bgcolor="#FFFFFF">
<div class="bar" id="bar">
    <ul>
        <li>陈1 刚刚送出一份早餐</li>
        <li>陈一 刚刚送出一份早餐</li>
        <li>陈一 刚刚送出一份早餐</li>
        <li>陈一 刚刚送出一份早餐</li>
        <li>陈一 刚刚送出一份早餐</li>
        <li>陈一 刚刚送出一份早餐</li>
        <li>陈7 刚刚送出一份早餐</li>
    </ul>
</div>


</body>
</html>

3.判断手机型号

（windows phone貌似判断的不是很准确，且里面css会很混乱，js可能更加会有坑，总之水很深。）

var isMobile = {
    Android: function() {
        return navigator.userAgent.match(/Android/i) ? true : false;
    },
    BlackBerry: function() {
        return navigator.userAgent.match(/BlackBerry/i) ? true : false;
    },
    iOS: function() {
        return navigator.userAgent.match(/iPhone|iPad|iPod/i) ? true : false;
    },
    Windows: function() {
        return navigator.userAgent.match(/IEMobile/i) ? true : false;
    },
    Windows2: function() {
        return navigator.userAgent.match(/Windows Phone/i) ? true : false;
    },
    
    any: function() {
        return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Windows() || isMobile.Windows2());
    }
};

if( isMobile.any() ){
　　//todo
}

4.js加载需要用到的js，或者css文件

function loadjscssfile(filename, filetype){
    if (filetype=="js"){ //判定文件类型
        var fileref=document.createElement('script')//创建标签
        fileref.setAttribute("type","text/javascript")//定义属性type的值为text/javascript
        fileref.setAttribute("src", filename)//文件的地址
    }
    else if (filetype=="css"){ //判定文件类型
        var fileref=document.createElement("link")
        fileref.setAttribute("rel", "stylesheet")
        fileref.setAttribute("type", "text/css")
        fileref.setAttribute("href", filename)
    }
    if (typeof fileref!="undefined")
    document.getElementsByTagName("head")[0].appendChild(fileref)
}

5. iframe 不仅仅有跨域的问题，还会有加载慢的问题，这次只用了onload来加载，还有可以用preload来预加载。放在dropbox里面了；iframe里面的页面访问父级window.parent