JavaScript面试题91-100
每日坚持学10道题
91. 原生 js 实现div 可拖拽
[问答题]
请使用原生 js 实现一个 div 可拖拽，需要考虑浏览器兼容性。
来自：阿里巴巴
参考：
var drag1 = document.getElementById('drag1');
drag1.onmousedown = function (ev) {
var x = ev.clientX - drag1.offsetLeft;
var y = ev.clientY - drag1.offsetTop;
drag1.onmousemove = function (ev) {
drag1.style.left = ev.clientX - x + 'px';
drag1.style.top = ev.clientY - y + 'px';
}
drag1.onmouseup = function (ev) {
drag1.onmousemove = drag1.onmouseup = null;
}
}
92. 按从小到大的顺序显示参数
[问答题]
请填充代码，使 mySort()能使传入的参数按照从小到大的顺序显示出来。
function mySort() {
var tags = new Array();//使用数组作为参数存储容器
请补充你的代码
return tags;//返回已经排序的数组
}
var result = mySort(50, 11, 16, 32, 24, 99, 57, 100); //传入参数个数不确定
console.info(result);//显示结果
来自：腾讯春招 web 前端开发练习卷
参考
function mySort() {
var tags = new Array();//使用数组作为参数存储容器
tags = Array.prototype.slice.call(arguments)
tags.sort(function (pre, next) {
return pre - next;
})
return tags;//返回已经排序的数组
}
93. NodeJS
[单选题]
下面哪些是 NodeJS 官方模块？
A.Querystring
B.Request
C.Async
D.Dns
来自：阿里巴巴前端
答案：D
94. 算法题：实现回文数
[问答题]
使用 Javascript 打印出 1-10000 之间的所有对称数（例如 121 1331 等）。
来自：百度
参考：
function findSymmetryNum(s, o) {
var arr = [];
for (var i = s; i <= o; i++) {
var str = '' + i, sl = str.length, middle = 0, flag = true;
if (sl % 2 === 0) {
middle = sl / 2;
} else {
middle = (sl - 1) / 2;
}
for (var m = 0; m < middle; m++) {
if (str.substr(0 + m, 1) !== str.substr(-1 - m, 1)) {
flag = false;
}
}
flag && arr.push(i);
}
console.log(arr);
return arr;
}
findSymmetryNum(1, 10000);
95. 原生js操作元素
[问答题]
使用 javascript 实现，将文档中 className 有“test”的 li 标签背景色设为黄色。
来自：百度
参考：
window.onload = function () {
var list = document.getElementsByTagName("li");
console.log(list.length);
for (var i = 0; i < list.length; i++) {
if (list[i].className == 'test') {
list[i].style.backgroundColor = "yellow";
}
}
}
96. 实现千分位的格式
[问答题]
用 js 实现：给定的数字转化成千分位的格式，如把“10000”转化成“10,000”，并考虑到性能方面的因素
来自：百度
参考：
var a="150355660";
var re=/(?=(?!\b)(\d{3})+$)/g
alert(a.replace(re,','));
97. js 实现函数 once
[问答题]
请通过 js 来实现一个函数 once，这个函数在整个应用运行的时候只被访问一次。如果再次访问就会访问上次的执行结果。
来自：百度
参考：
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);
98. 自加载卡片
[问答题]
如果要把在手机百度的搜索结果做成一个可以无限向上滑动的卡片列表（图就不展示了，就是一行是一块内容这种形式），请你设计这个可以无限滑动的卡片列表方案，注意不能造成浏览器奔溃。
来自：百度
参考： 可以用瀑布流布局来实现
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();
}
});
99. 跨域通信
[问答题]
如何解决跨域通信的问题，简述有哪些方法？
来自：百度
参考：
（1）、document.domain+iframe 的设置
（2）、动态创建 script，要就是 jsonp
（3）、利用 iframe 和 location.hash
（4）、window.name 实现的跨域数据传输
（5）、使用 HTML5 postMessage
（6）、利用 flash
100. 监听事件 callback 的实现
[问答题]
实现一个监听 load 事件的接口 window.load(callback):多次调用时保证执行顺序，先绑定的回调先执行：如果 load 事件已触发，调用时会直接执行该回调。
来自：美团
参考：
window.load = (function () {
var loaded = false,
func = new Array();
window.onload = function () {
loaded = true;
for (var i = 0; i < func.length; i++) {
func[i]();
}
}
return function (callback) {
if (typeof callback != "function") return;
if (loaded) {
callback();
} else {
func.push(callback)
}
}
}())
今天的基础题完成