题1：直角三角形
题解:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> </head> <body> <div class='triangle'></div> <script> var triangle = document.querySelector('.triangle'); // 补全代码 var str = '' for (var i = 1; i < 4; i++) { for (var j = 0; j < i; j++) { str += '*' } str += '<br />' } triangle.innerHTML = str </script> </body> </html>
题2：文件扩展名
题解：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> </head> <body> <script> const _getExFilename = (filename) => { let index = filename.lastIndexOf('.') return filename.slice(0, index) && index !== -1 ? filename.slice(index) : '' } </script> </body> </html>
题3：单向绑定
题解：
<!DOCTYPE html> <html> <head> <meta charset=utf-8> </head> <body> <input id="input" type="text" /> <span id="span"></span> <script type="text/javascript"> document.getElementById("input").onchange = function(){ // dom事件里的函数的this指向触发者，即input标签 // 注意：这里不能使用箭头函数，因为箭头函数没有this指针，箭头函数的this是根据执行上下文确定的，即这里的this指向window，会报错 document.getElementById("span").innerHTML = this.value } </script> </body> </html>
题4：创建数组
题解：
<!DOCTYPE html> <html> <head> <meta charset=utf-8> </head> <body> <script type="text/javascript"> const _createArray = (number) => { // 补全代码 return Array(number).fill(number) } </script> </body> </html>
题5：无重复数组
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> </head> <body> <script> const _getUniqueNums = (start, end, n) => { // set 去重 const con = new Set() // 生成 n 个不重复的随机数 while (con.size < n) { // Math.random 生成 [0, 1) 的数字，可以将 结果 * (end - start) + start 扩大区间， + 1 是为了取到 end con.add(Math.floor(Math.random() * (end - start + 1) + start)) } return [...con] } </script> </body> </html>
题6：数组排序
题解：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> </head> <body> <button class='up'>销量升序</button> <button class='down'>销量降序</button> <ul></ul> <script> var cups = [ { type: 1, price: 100, color: 'black', sales: 3000, name: '牛客logo马克杯' }, { type: 2, price: 40, color: 'blue', sales: 1000, name: '无盖星空杯' }, { type: 4, price: 60, color: 'green', sales: 200, name: '老式茶杯' }, { type: 3, price: 50, color: 'green', sales: 600, name: '欧式印花杯' } ] var ul = document.querySelector('ul'); var upbtn = document.querySelector('.up'); var downbtn = document.querySelector('.down'); // 补全代码 const _listRendering = arr => { var str = '' arr.forEach(element => { str += `<li>${element.name}</li>` }) ul.innerHTML = str } upbtn.onclick = function () { var upArr = cups.sort(function (a, b) { return a.sales - b.sales }) _listRendering(upArr) } downbtn.onclick = function () { var downArr = cups.sort(function (a, b) { return b.sales - a.sales }) _listRendering(downArr) } </script> </body> </html>
题7：分隔符
题解：直接在线编译运行结果，十分方便
