第1题

业务场景：在公共JS文件里有可能有（是可能）一个对象Obj；该对象有一个getType返回数据类型的方法；
要求实现：// 和trim方法相似；没有的时候本地实现他
1).如果对象不存在；那么本地建这么一个对象Obj并实现getType方法；
2).如果传入的数据为null时返回null;

var Obj = Obj || function () { };

    if(!Obj.prototype.getType){
        Obj.prototype.getType = function (obj) {
            var class2type = {};    //用来保存js数据类型
            var customArr = "Boolean Number String Function Array Date RegExp Object Error".split(" ");
            customArr.forEach( function( name, index) {
                //构造class2type存储常用类型的映射关系，遍历基本类型并赋值，键值为 [object 类型]
                class2type[ "[object " + name + "]" ] = name.toLowerCase();
            });

            if ( obj == null ) {//首先如果是null则返回null字符串
                return obj + "";
            }
            //接着判断给定参数类型是否为object或者function，是的话在映射表中寻找 toString后的键值名称并返回，不是的话利用typeof就可以得到正确类型。
            return typeof obj === "object" || typeof obj === "function" ?
                class2type[ toString.call(obj) ] || "object" :
                typeof obj;
        }
    }

    // 方法检测：
    var myObj = new Obj();
    var result0 = myObj.getType('454'); // string
    var result1 = myObj.getType(454);   // number
    var result2 = myObj.getType(null);  // null

    console.log('result0', result0)
    console.log('result1', result1)
    console.log('result2', result2)

第2题

2.Cookie, LocalStorage 与 SessionStorage区别； // 口述题

1.存储大小：
存储大小 不超过4K，LocalStorage，SessionStorage可以达到5M

2.数据有效期不同
sessionStorage 仅在当前浏览器窗口关闭之前有效
localStorage：始终有效，窗口或浏览器关闭也一直保存，
cookie：只在设置的cookie过期时间之前有效

3.传递
cookie在浏览器和服务器间来回传递
localStorage，sessionStorage 不会自动把数据发送给服务器

4.作用域不同
sessionStorage不在不同的浏览器窗口中共享
localstorage在所有同源窗口中都是共享的；
cookie也是在所有同源窗口中都是共享的

第3题

3.业务场景：活动页面有秒杀模块也有团购模块，需要同步服务器时间来显示倒计时；写一个可供其他同事调用方法；// 同事调用该方法时得到的是已同步好后的时间
要求实现：
1) . 定义你所要求后端接口返回的数据格式；
2). 实现同步服务器时间的方法供其他同事调用;
3). 注意性能的优化

// 接口数据
{
     status:true, // 状态
     msg:'获取时间成功', //文字描述
     currentTime:'11:21:55', // 服务器时间
 }
     
// 方法 
function getTime(url,fn) {
    $.getAjax(url, function (data) {
        fn(data)
    })
}
// 调用
getTime('http://abc.com/getServerDate', function (value) {
    console.warn( 'value',value);
})

第4题

业务场景：如图有距离秒杀结束倒计时功能

要求实现：
1) . 写出你的html页面结构；
2) . 调用上面实现的方法实现倒计时功能；（本地时间随意定比服务器时间小就好）；
3).  当倒计时结束三个方框显示：00;

// html
<div class="timebox">
    <div class="timebox-content">
        <ul>
            <li>
                <p class="title">海抢货</p>
                <p class="desc">限时限量汇全网好货</p>
                <p id="time">00:00:10</p>
            </li>
            <li>
                <p class="title">有好货</p>
                <p class="desc">好品味从挑剔开始</p>
                <p class="blue">品质生活指南</p>
            </li>
        </ul>
    </div>
</div>

var tid = setInterval(function () {

    getTime('http://abc.com/getServerDate', function (syTime) {
        var totalSec = getLeaveSecond(syTime) - 1; // 获取剩余时间
        if (totalSec >= 0) {
            oTimebox.innerHTML = getNewSyTime(totalSec); // 显示时间
        } else {
            clearInterval(tid);
        }
    })
}, 1000);

    function getLeaveSecond () {}
    function getNewSyTime () {}
    

第5题

5.业务场景：下图为首屏的抽奖界面   //抽奖转动时会顺时针高亮显示产品
1) . 写出你的html页面结构；
2). 写出你css类结构不用具体实现;
3). 抛出你设计思路和性能优化方案

<!-- 代码 开始 -->
<div class="shanDeng" id="deng">
    <div id="luck">
        <!-- luck -->
        <table style="border-spacing:.08rem .03rem;">
            <tr>
                <td class="luck-unit luck-unit-0"><img src="./img/01.png"></td>
                <td class="luck-unit luck-unit-1"><img src="./img/02.png"></td>
                <td class="luck-unit luck-unit-2"><img src="./img/03.png"></td>
            </tr>
            <tr>
                <td class="luck-unit luck-unit-7"><img src="./img/05.png"></td>
                <td class="cjBtn" id="btn"></td>
                <td class="luck-unit luck-unit-3"><img src="./img/01.png"></td>
            </tr>
            <tr>
                <td class="luck-unit luck-unit-6"><img src="./img/02.png"></td>
                <td class="luck-unit luck-unit-5"><img src="./img/04.png"></td>
                <td class="luck-unit luck-unit-4"><img src="./img/03.png"></td>
            </tr>
        </table>
    </div>
</div>

<script>

    var luck={
        index: 0,   //当前转动到哪个位置，起点位置
        count: 0,   //总共有多少个位置
        timer: 0,   //setTimeout的ID，用clearTimeout清除
        speed: 20,  //初始转动速度
        times: 0,   //转动次数
        cycle: 50,  //转动基本次数：即至少需要转动多少次再进入抽奖环节
        prize: -1,  //中奖位置

        init:function(id){
            // 初始化
            if ($("#"+id).find(".luck-unit").length>0) {
                $luck = $("#"+id);
                $units = $luck.find(".luck-unit");
                this.obj = $luck;
                this.count = $units.length;
                $luck.find(".luck-unit-"+this.index).addClass("active");
            };
        },

        roll:function(){
            // 走动
            var index = this.index;
            var count = this.count;
            var luck = this.obj;
            $(luck).find(".luck-unit-"+index).removeClass("active");
            index += 1;
            if (index>count-1) {
                index = 0;
            };
            $(luck).find(".luck-unit-"+index).addClass("active");
            this.index=index;
            return false;
        },

        stop:function(index){
            this.prize=index;
            return false;
        }
    };


    function roll(){
        luck.times += 1;
        luck.roll();
        if (luck.times > luck.cycle+10 && luck.prize==luck.index) {
            // 出奖（到达中奖位置）
            clearTimeout(luck.timer);
            luck.prize=-1;
            luck.times=0;
            click=false;
        }else{
            if (luck.times<luck.cycle) {
                luck.speed -= 10; // 加速
            }else if(luck.times==luck.cycle) { // 锁定中奖位置
                /*var index = Math.random()*(luck.count)|0;
                if(index>5){
                    index = 7;
                }else {
                    index = 5;
                }
                luck.prize = index;//最终中奖位置*/
                luck.prize = RandomNumBoth(0,7);//最终中奖位置
            }else{
                if (luck.times > luck.cycle+10 && ((luck.prize==0 && luck.index==7) || luck.prize==luck.index+1)) {
                    // 下一个就是中奖位置时。延长时间再显示
                    luck.speed += 110;
                }else{
                    luck.speed += 20; // 越来越慢
                }
            }
            if (luck.speed<40) {
                luck.speed=40; // 匀速时间
            };
//          console.log('luck.speed ',luck.speed !=40 ? luck.speed : '40'+Math.random() )
            console.log('luck.speed ',luck.speed)
//            roll()
            luck.timer = setTimeout(roll,luck.speed);
        }
        return false;
    }


    var click=false;
    window.onload=function(){
        luck.init('luck');
        $("#btn").click(function(){
            //按下弹起效果
            $("#btn").addClass("cjBtnDom");
            setTimeout(function(){  
                $("#btn").removeClass("cjBtnDom");
            },200);

            if(click) {
                return false;
            }
            else{
                luck.speed=100;
                roll();
                click=true;
                return false;
            }

        });
    };

    console.log('1212')

    function RandomNumBoth(Min,Max){
        // 某个范围的随机数 min ≤ r ≤ max
        var Range = Max - Min;
        var Rand = Math.random();
        var num = Min + Math.round(Rand * Range); //四舍五入
        return num;
    }
    

</script>