第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>
网友评论