-
Notifications
You must be signed in to change notification settings - Fork 0
/
编程题1.html
520 lines (466 loc) · 18.6 KB
/
编程题1.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>编程题</title>
<style>
html,
body {
overflow: hidden;
}
body,
div,
h2,
p {
margin: 0;
padding: 0;
}
body {
color: #000;
background: #fff;
font: 12px/2 Arial;
}
p {
padding: 0 10px;
margin-top: 10px;
}
#box {
position: absolute;
width: 300px;
height: 150px;
background: #333;
border: 2px solid #ccc;
top: 50%;
left: 50%;
margin: -75px 0 0 -150px;
}
#box h2 {
height: 25px;
cursor: move;
background: #222;
border-bottom: 2px solid #ccc;
text-align: right;
padding: 0 10px;
line-height: 25px;
}
#box h2 a {
color: #fff;
font: 12px/25px Arial;
text-decoration: none;
}
#tips {
width: 200px;
border: 1px solid #000;
}
.close {
padding: 0 12px;
font-size: 24px
}
</style>
</head>
<body>
<input type="text" id="id1">
<input type="checkbox" name="checkbox1">
<input type="checkbox" name="checkbox2">
<div id="div1"></div>
<ul id="test">
<li class="test test1">这是第一条</li>
<li class="test test1">这是第二条</li>
<li class="test test1">这是第三条</li>
</ul>
<div id="tips">
<h2>我知道了<span class="close">x</span></h2>
</div>
<script>
var log = console.log.bind(console)
// 如何判断某变量是否为数组数据类型？
var arr = []
Object.prototype.toString.call(arr) === '[Object Array]' // 最靠谱
arr instanceof Array
arr.constructor === Array
Array.prototype.isPrototypeOf(arr)
Object.getPrototypeOf(arr) === Array.prototype
Array.isArray(arr)
// 已知ID的Input输入框，希望获取这个输入框的输入值，怎么做？(不使用第三方框架)
var id1 = document.getElementById('id1')
id1.value = 'test'
// 希望获取到页面中所有的checkbox怎么做？(不使用第三方框架)
console.log(document.querySelectorAll('[type="checkbox"]'))
var input = document.getElementsByTagName('input')
var length = input.length,
result = [],
item
while (length--) {
item = input[length]
if (item.type === 'checkbox') result.push(item)
}
console.log(result)
// 设置一个已知ID的DIV的html内容为xxxx，字体颜色设置为黑色
var div1 = document.getElementById('div1')
div1.innerText = '我是innerText'
div1.innerHTML = 'i am innerHTML'
div1.style.color = '#ccc'
// 当一个DOM节点被点击时候，我们希望能够执行一个函数，应该怎么做？
var handler = function () {
alert('i am div1')
}
if (window.addEventListener) {
div1.addEventListener('click', handler, false)
} else if (window.attachEvent) {
div1.attachEvent('onclick', handler)
} else {
div1.onclick = handler
}
// 已知有字符串foo="get-element-by-id",写一个function将其转化成驼峰表示法"getElementById"。
function convert(msg) {
var arr = msg.split('-')
for (var i = 0, len = arr.length; i < len; i++) {
arr[i] = arr[i].charAt(0).toUpperCase() + arr[i].slice(1)
}
return arr.join('')
}
log(convert("get-element-by-id"))
// 13.var numberArray = [3,6,2,4,1,5]; （考察基础API）1) 实现对该数组的倒排，输出[5,1,4,2,6,3] 2) 实现对该数组的降序排列，输出[6,5,4,3,2,1]
var numberArray = [3, 6, 2, 4, 1, 5]
log(numberArray.reverse())
log(numberArray.sort(function (a, b) { return b - a }))
// 14.输出今天的日期，以YYYY-MM-DD的方式，比如今天是2014年9月26日，则输出2014-09-26
var date = new Date()
log(date)
var y = date.getFullYear()
var m = date.getMonth() + 1
m = m < 10 ? '0' + m : m
var d = date.getDate()
d = d < 10 ? '0' + d : d
log(y + '-' + m + '-' + d)
// 15.将字符串”<tr><td>{id}</td><td>{name}</td></tr>”中的{id}替换成10，{name}替换成Tony （使用正则表达式）
var str = '<tr><td>{id}</td><td>{$name}</td></tr>'
var newStr = str.replace(/{id}/g, '10').replace(/{\$name}/g, 'Tony')
log(newStr)
// 为了保证页面输出安全，我们经常需要对一些特殊的字符进行转义，请写一个函数escapeHtml，将<, >, &, “进行转义
var escapeMap = {
'<': '<',
'>': '>',
'&': '&',
'"': '"',
"'": ''',
'`': '`'
}
var escapeHtml = function (htmlStr) {
var source = '(?:' + Object.keys(escapeMap).join('|') + ')'
var reg = RegExp(source, 'g')
return htmlStr.replace(reg, function (match) {
return escapeMap[match]
})
}
log(escapeHtml('<html> inner: & \" \' \` </html>'))
// 19.用js实现随机选取10--100之间的10个数字，存入一个数组，并排序。
var random = function (min, max) {
return Math.floor(Math.random() * (max - min + 1) + min)
}
var ranArr = []
for (var i = 0; i < 10; i++) {
ranArr.push(random(10, 100))
}
log(ranArr.sort())
// 20.把两个数组合并，并删除第二个元素。
var arr1 = [1, 2, 3], arr2 = [4, 5, 6]
var arr3 = arr1.concat(arr2)
arr3.splice(1, 1)
log(arr3)
// 怎样添加、移除、移动、复制、创建和查找节点（原生JS，实在基础，没细写每一步）
// createDocumentFragment createTextNode
var div2 = document.createElement('div')
var div3 = document.createElement('div')
div2.innerHTML = 'div2'
div3.innerHTML = 'div3'
document.body.insertBefore(div2, div1)
// document.body.replaceChild(div3, div1)
// document.body.appendChild document.body.removeChild
// 23.正则表达式构造函数 var reg = new RegExp("xxx") 与正则表达字面量 var reg = /xxx/ 有什么不同？匹配邮箱的正则表达式？
var reg = /^[a-zA-Z1-9_-]+@[a-zA-Z1-9_-]+(?:\.[a-zA-Z]{2,4}){1,63}$/
log(reg.test('wangliang@163.com.cn'))
// 24.看下面代码，给出输出结果。
for (var i = 1; i <= 3; i++) {
log('sync');
(function (i) {
setTimeout(function () {
log(i + 10)
})
})(i)
setTimeout((function (i) {
log('sync')
log(i + 100)
})(i), 1000)
}
// 25.写一个function，清除字符串前后的空格。（兼容所有浏览器）
if (!String.prototype.trim) {
String.prototype.trim = function () {
return this.replace(/^\s+|\s+$/g, '')
}
}
var str = " \t\n test string \u2028".trim()
log(str)
// 26.Javascript中callee和caller的作用？如果一对兔子每月生一对兔子；一对新生兔，从第二个月起就开始生兔子；假定每对兔子都是一雌一雄，试问一对兔子，第n个月能繁殖成多少对兔子？
var cache = {}
var func = function (n) {
if (cache[n]) return cache[n]
return cache[n] = n <= 2 ? n : arguments.callee(n - 1) + arguments.callee(n - 2)
}
log(func(10))
// 1.实现一个函数clone，可以对JavaScript中的5种主要的数据类型（包括Number、String、Object、Array、Boolean）进行值复制
var clone = function (obj) {
var isObject = Object.prototype.toString.call(obj) === '[object Object]'
var isArray = Array.isArray(obj)
if (isObject) return Object.assign({}, obj)
if (isArray) return obj.slice()
return obj
}
var test = function () { log('cloned') }
log(clone(test))
// 3.小贤是一条可爱的小狗(Dog)，它的叫声很好听(wow)，每次看到主人的时候就会乖乖叫一声(yelp)。从这段描述可以得到以下对象：
var dog = {
name: '小贤',
wow: function () { alert('wow') },
yelp: function () { this.wow() }
}
// 小芒和小贤一样，原来也是一条可爱的小狗，可是突然有一天疯了(MadDog)，一看到人就会每隔半秒叫一声(wow)地不停叫唤(yelp)。请根据描述，按示例的形式用代码来实
var madDog = Object.create(dog)
madDog.name = '小芒'
madDog.yelp = function () {
var self = this
setInterval(function () {
self.wow
}, 500)
}
// madDog.yelp()
// 4.下面这个ul，如何点击每一列的时候alert其index?（闭包）
var ul = document.getElementById('test')
var li = ul.getElementsByTagName('li')
var handler2 = function (event) {
console.log(event)
var len = li.length
while (len >= 0) {
len--
if (event.target === li[len]) alert(len)
}
}
ul.addEventListener('click', handler2, false)
// 方法二
// for (var i = 0, len = li.length; i < len; i++) {
// li[i].onclick = (function (i) {
// return function () {
// alert(i)
// }
// })(i)
// }
// 5.编写一个JavaScript函数，输入指定类型的选择器(仅需支持id，class，tagName三种简单CSS选择器，无需兼容组合选择器)可以返回匹配的DOM节点，需考虑浏览器兼容性和性能。
var querySelector = document.querySelectorAll.bind(document) || function (selector) {
var s = selector.charAt(0)
switch (s) {
case '#':
return document.getElementById(selector.substr(1))
case '.':
selector = selector.substr(1)
return document.getElementsByClass(selector) || (function (selector) {
var eles = document.getElementsByTagName('*')
var result = []
for (var i = 0, l = eles.length; i < l; i++) {
if (eles[i].className.indexOf(selector) >= 0) result.push(eles[i])
}
return result
})()
default:
return document.getElementsByTagName(selector)
}
}
var $ = querySelector
log(querySelector('.test1'))
// 7.给String对象添加一个方法，传入一个string类型的参数，然后将string的每个字符间价格空格返回，例如：addSpace("hello world") // -> 'h e l l o w o r l d'
if (!String.prototype.addSpace) {
String.prototype.addSpace = function (str) {
return str.split('').join(' ')
}
}
log(String.prototype.addSpace('hello world'))
// 9.在Javascript中什么是伪数组？如何将伪数组转化为标准数组？
// arguments, NodeList, { lenght: 1 }
// 假设接第八题题干，我们要给每个log方法添加一个"(app)"前缀，比如'hello world!' ->'(app)hello world!'。方法如下：
// 方法一 var log2 = console.log.bind(console, '(app)')
// 方法二
var log2 = function () {
var args = Array.prototype.slice.call(arguments)
args.unshift('(app)')
return console.log.apply(console, args)
}
log2('hello world')
// 简易bind polyfill
Function.prototype.bind = Function.prototype.bind || function (context) {
var self = this
return function () {
return self.apply(context, arguments)
}
}
// 11.原生JS的 window.onload与Jquery的$(document).ready(function(){})有什么不同？如何用原生JS实现Jq的ready方法？
// onload只能一个， ready多个， onload所有资源加载完执行， ready dom加载完执行
var ready = (function () {
var funcs = []
var called = false
var handler = function (event) {
if (called) return
if (event.type === 'onreadystatechange' && document.readyState !== 'complete') return
for (var i = 0; i < funcs.length; i++) {
funcs[i].call(document)
}
called = true
funcs.length = 0
}
if (document.addEventListener) {
document.addEventListener('DOMContentLoaded', handler, false)
document.addEventListener('readystatechange', handler, false)
window.addEventListener('load', handler, false)
} else if (document.attachEvent) {
document.attachEvent('onreadystatechange', handler)
document.attachEvent('onload', handler)
}
return function (fn) {
if (ready) {
fn.call(document)
} else {
funcs.push(fn)
}
}
})()
ready(function () {
log('................... complete!')
})
ready(function () {
log('................... yessss!')
})
// 13关闭tips提示
function setCookie(name, value, days) { // 给cookie增加一个时间变量
var date = new Date()
date.setTime(date.getTime() + days * 24 * 60 * 60 * 1000); //设置过期时间为days天
document.cookie = name + "=" + decodeURIComponent(value) + ";expires=" + date.toGMTString();
}
function getCookie(name) {
var result = ''
var myCookie = '' + document.cookie + ";"
var searchName = '' + name + " = "
var startOfCookie = myCookie.indexOf(searchName)
var endOfCookie
if (startOfCookie != -1) {
startOfcookie += searchName.length
endOfCookie = myCookie.indexOf(";", startOfCookie)
result = (myCookie.substring(startOfCookie, endOfCookie))
}
return result
}
; (function () {
var tips = document.getElementById('tips')
var page = {
hideTip() {
tips.style.display = 'none'
setCookie('tipsHide', 'true', 365)
},
showTip() {
tips.style.display = 'block'
},
check() {
var tipsHide = getCookie('tipsShow')
return tipsHide === 'true'
},
init() {
if (!this.check()) {
this.showTip()
setCookie('tipsHide', 'true', 1)
}
var self = this
tips.onclick = function () {
self.hideTip()
}
}
}
page.init()
}());
// 以下函数的作用是?空白区域应该填写什么
// define
; (function (window) {
function fn(str) {
this.str = str
}
fn.prototype.format = function () {
var arg = Array.prototype.slice.call(arguments, 0)
return this.str.replace(/{\s*(\d+)\s*}/g, function (a, b) {
return arg[b] || ""
})
}
window.fn = fn
})(window)
// use
var t = new fn('<p><a href="{0}">{1}</a><span>{2}</span></p>')
console.log(t.format('http://www.alibaba.com', 'Alibaba', 'Welcome'))
// 4、图片预加载：实现预加载一张图片，加载完成后显示在网页中并设定其高度为50px，宽度为50px；
function addImg(el, src) {
var img = new Image()
// var img = document.createElement('image')
img.onload = function () {
// img.width = 350
// img.height = 150
img.style.width = '100px'
img.style.height = '100px'
el.appendChild(img)
}
img.src = src
}
addImg(document.body, './assets/img/tip-box.jpg')
// 6、模拟一个HashTable类，包含有add、remove、contains、length方法；
function HashTable() {
this.table = []
}
function keyFunc(key) {
var hash = 0
for (var i = 0; i < key.length; i++) {
hash += key.charCodeAt(i)
}
return hash % 37
}
HashTable.prototype.add = function (key, value) {
// this.table.push(item)
// Array.prototype.push.apply(this.table, arguments)
var position = keyFunc(key)
log(position + '-' + value)
this.table[position] = value
}
HashTable.prototype.remove = function (key) {
// this.table.splice(key, 1)
this.table[keyFunc(key)] = undefined
}
HashTable.prototype.contains = function (item) {
return this.table.indexOf(item) >= 0
}
HashTable.prototype.length = function () {
return this.table.length
}
HashTable.prototype.print = function () {
console.log(this.table)
}
var newHash = new HashTable()
newHash.add('apple', 'apple')
newHash.add('banana', 'banana')
newHash.add('桃子', '桃子')
newHash.remove('apple')
log(newHash.contains('banana'))
newHash.print()
// 重复字符串
String.prototype.repeatify = String.prototype.repeatify || function (times) {
var str = '';
for (var i = 0; i < times; i++) {
str += this;
}
return str;
}
log('hello'.repeatify(5))
</script>
</body>
</html>