1.直角三角形
请补全JavaScript代码,要求在页面上渲染出一个直角三角形,三角形换行要求使用"br"实现。三角形如下:
*
**
***
<div class="triangle"></div>
<script>
var triangle = document.querySelector('.triangle');
var str = '';
for (var i = 0; i < 3; i++) {
for (var j = 0; j <= i; j++) {
str += "*"
}
str += '</br>'
}
triangle.innerHTML = str;
</script>
2.文件扩展名
请补全JavaScript代码,要求以字符串的形式返回文件名扩展名,文件名参数为"filename"。
<!-- 以字符串的形式返回文件名扩展名,文件名参数为filename -->
<script>
const _fetExFilename = (filename) => {
// 1. lastIndexOf获取最后一个“.”符号的位置;
// 2.然后通过slice截取index(包括)之后的字符串。
var index = filename.lastIndexOf('.');
return filename.slice(index);
}
</script>
slice与splice的区别?
slice(start,end):返回一个新数组,包含从start到end(不包含该元素)的数组元素。该方法不会改变原数组,而是返回一个子数组。
splice():该方法向或者从数组中添加或者删除项目,返回被删除的项目。该方法会改变原数组。
3.千分位
<script>
function _comma(number) {
if (number < 1000) {
return number.toString();
} else {
//递归拼接
return _comma(parseInt(number / 1000)) + ',' + _comma(number % 1000);
}
}
</script>
4.单向监听
请补全JavaScript代码,要求每当id为"input"的输入框值发生改变时触发id为"span"的标签内容同步改变。
注意:必须使用DOM0级标准事件(onchange)
<input id="input" type="text">
<span id="span"></span>
<script>
var input = document.getElementById('input');
var span = document.getElementById('span');
input.onchange = function () {
span.innerText = input.value;
}
</script>
5.创建数组
请补全JavaScript代码,要求返回一个长度为参数值并且每一项值都为参数值的数组。
注意:请勿直接使用for/while
const _createArray = (number) => {
var arr = new Array(number);
return arr.fill(number);
}
6.判断版本
请补全JavaScript代码,该函数接收两个参数分别为旧版本、新版本,当新版本高于旧版本时表明需要更新,返回true,否则返回false。
注意:
1. 版本号格式均为"X.X.X"
2. X∈[0,9]
3. 当两个版本号相同时,不需要更新
const _shouldUpdate = (oldVersion, newVersion) => {
var oldVersion = parseInt(oldVersion.split('.').join(''));
var newVersion = parseInt(newVersion.split('.').join(''));
return newVersion > oldVersion;
}
7.创建无重复数组
请补全JavaScript代码,实现一个函数,要求如下:
1. 根据输入的数字范围[start,end]和随机数个数"n"生成随机数
2. 生成的随机数存储到数组中,返回该数组
3. 返回的数组不能有相同元素
注意:不需要考虑"n"大于数字范围的情况
<script>
const _getUniqueNums = (start,end,n) => {
// 补全代码
var arr=[];
while(arr.length<n){
let val=Math.floor(Math.random()*(end-start+1)+start);
if(!arr.includes(val))
arr.push(val)
}
return arr;
}
</script>
8.数组排序
请补全JavaScript代码,根据预设代码中的数组,实现以下功能:
1. 列表只展示数组中的name属性
2. 实现点击"销量升序"按钮,列表内容按照销量升序重新渲染
3. 实现点击"销量降序"按钮,列表内容按照销量降序重新渲染
注意: 必须使用DOM0级标准事件(onclick)
<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');
// 补全代码
// 1. 对sales进行升序排列
let up = function() {
return cups.sort((a,b)=>{return a.sales - b.sales});
}
// 2. 对sales进行降序排列
let down = function() {
return cups.sort((a,b)=>{return b.sales - a.sales});
}
// 3. 遍历重新排序的cups数组,获取name属性值
let getName = function() {
var str = '';
for(var i = 0;i < cups.length; i++) {
str += '<li>' + cups[i].name + '</li>';
}
return str;
}
// 4.监听 销量升序按钮的点击事件
upbtn.onclick = function() {
up();
ul.innerHTML = getName();
}
// 5.监听 销量降序按钮的点击事件
downbtn.onclick = function() {
down();
ul.innerHTML = getName();
}
</script>
9.新数组
请补全JavaScript代码,该函数接受两个参数分别为数组、索引值,要求在不改变原数组的情况下返回删除了索引项的新数组。
<script type="text/javascript">
const _delete = (array,index) => {
// 补全代码
let newArr=[];
for(let i=0;i<array.length;i++){
if(array[i]!==array[index])
newArr.push(array[i])
}
return newArr;
}
</script>
10.计数器(闭包)
请补全JavaScript代码,要求每次调用函数"closure"时会返回一个新计数器。每当调用某个计数器时会返回一个数字且该数字会累加1。
注意:
1. 初次调用返回值为1
2. 每个计数器所统计的数字是独立的
<script type="text/javascript">
const closure = () => {
// 补全代码
var i=1;
return function(){
return i++;
}
}
</script>
11.列表动态渲染
请补全JavaScript代码,将预设代码中的"people"数组渲染在页面中。实现下面的列表:
- 牛油1号 20岁
- 牛油2号 21岁
- 牛油3号 19岁
<body>
<ul></ul>
<script>
var people = [
{ name: '牛油1号', id: 1, age: 20 },
{ name: '牛油2号', id: 2, age: 21 },
{ name: '牛油3号', id: 3, age: 19 },
]
var ul = document.querySelector('ul');
// 补全代码
var str='';
for(var i=0;i<people.length;i++){
str +='<li>'+people[i].name+people[i].age+'岁'+'</li></br>';
}
ul.innerHTML=str;
</script>
</body>
12.模板字符串
请补全JavaScript代码,实现以下功能:
1. 根据已有的person对象的注册时间求出距离当前时间的天数(天数向下取整)。
2. 将获得的天数和person数据拼接成字符串,作为h2标签的内容。
注意:使用模板字符串进行字符串拼接,字符串最终内容如:尊贵的牛客网2级用户小丽您好,您已经注册牛客网3天啦~
<body>
<h2></h2>
<script>
var person = {
level: '2',
name: '小丽',
registTime: '2021-11-01',
}
var h2 = document.querySelector('h2');
// 补全代码
var start=new Date(person.registTime).getTime();
var end=new Date().getTime();
var days=Math.floor((end-start)/(24*60*60*1000));
h2.innerHTML=`尊贵的牛客网${person.level}级用户${person.name}您好,您已经注册牛客网${days}天啦~`
</script>
</body>
13.类继承
请补全JavaScript代码,完成类的继承。要求如下:
1. "Chinese"类继承于"Human"类
2. "Human"类实现一个函数"getName",返回该实例的"name"属性
3. "Chinese"类构造函数有两个参数,分别为"name"、"age"
4. "Chinese"类实现一个函数"getAge",返回该实例的"age"属性
<body>
<script type="text/javascript">
class Human {
constructor(name) {
this.name = name
this.kingdom = 'animal'
this.color = ['yellow', 'white', 'brown', 'black']
}
// 补全代码
getName(){
return this.name;
}
}
// 补全代码
class Chinese extends Human{
constructor(name,age){
super(name);
this.age=age;
}
getAge(){
return this.age;
}
}
</script>
</body>