@作者 : SYFStrive
@博客首页 : 点击跳转HomePage
📜： 初编程之每天10题 👉 从质变到量变💪
🔥：给大家推荐一款的刷题神器（有很多值得学习的编程题目😘）
🔥：🏆🏆🏆 点击跳转至刷题神器（一起刷起来吧( ఠൠఠ )ﾉ）
📌：个人社区（欢迎大佬们加入） 👉：社区链接🔗
💃：学累了可以先看看由jieke给大家带来的舞蹈，欢迎大家观看
🔗：
①：👉
JS入门到精通（🔥待更）
②：👉
刷题日常计~JS（🔥待更）
题目目录
提示：以下是本篇文章正文内容
题目难度：☆☆☆
①直角三角形
题目描述：
请补全JavaScript代码，要求在页面上渲染出一个直角三角形，三角形换行要求使用"br"实现。
📰代码演示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
<div class='triangle'></div>
<script>
//通过类名获取盒子
var triangle = document.querySelector('.triangle');
// 补全代码
//定义空串接收*
let nullValue = ''
for (let i = 0; i < 3; i++) {
for (let j = 0; j <= i; j++) {
nullValue += '*'
}
nullValue += '</br>'
}
triangle.innerHTML = nullValue
</script>
</body>
</html>
效果如下：
②文件扩展名
描述
请补全JavaScript代码，要求以字符串的形式返回文件名扩展名，文件名参数为"filename"。
📰代码演示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
<script>
const _getExFilename = (filename) => {
// 补全代码
//使用split将其分为一个数组 然后取数组长度减一即可
const arr = filename.split(".")
console.log('.' + arr[arr.length - 1])
return filename.slice(index);
}
</script>
</body>
</html>
③分隔符
描述
请补全JavaScript代码，要求返回参数数字的千分位分隔符字符串。
📰代码演示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
<div class='triangle'></div>
<script>
function _comma(number) {
if (number < 1000) {
return number.toString();
} else {
//递归拼接
// 获取12 .6 🔗 600
return _comma(parseInt(number / 1000)) + ',' + _comma(number % 1000);
}
}
console.log(_comma(12600))
</script>
</body>
</html>
④单向绑定
描述
请补全JavaScript代码，要求每当id为"input"的输入框值发生改变时触发id为"span"的标签内容同步改变。
注意⚠：必须使用DOM0级标准事件（onchange）
📰代码演示：
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
</head>
<body>
<input id="input" type="text" />
<span id="span"></span>
<script type="text/javascript">
// 补全代码
// 获取输入框 与 span
var input = document.getElementById('input');
var span = document.getElementById('span');
// 使用onchange监听
input.onchange = function() {
span.innerText = input.value;
}
</script>
</body>
</html>
⑤创建数组
描述
请补全JavaScript代码，要求返回一个长度为参数值并且每一项值都为参数值的数组。
注意⚠：请勿直接使用for/while
📰代码演示：
<script>
const _getExFilename = (filename) => {
// 补全代码
var arr = new Array(number);
//使用固定值填充数组
return arr.fill(number)
}
</script>
⑥判断版本
描述
请补全JavaScript代码，该函数接收两个参数分别为旧版本、新版本，当新版本高于旧版本时表明需要更新，返回true，否则返回false。
注意⚠：
1、版本号格式均为"X.X.X"
2、X∈[0,9]
3、当两个版本号相同时，不需要更新
📰代码演示：
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
</head>
<body>
<script type="text/javascript">
const _shouldUpdate = (oldVersion, newVersion) => {
// 补全代码
//把数组中的所有元素转换为一个字符串：
var oldVersion = parseInt(oldVersion.split('.').join(''));
var newVersion = parseInt(newVersion.split('.').join(''));
console.log(oldVersion) //旧版本
console.log(newVersion) //新版本
return newVersion > oldVersion;
}
console.log(_shouldUpdate('2022.2','2022.4'))
</script>
</body>
</html>
⑦无重复数组
描述
请补全JavaScript代码，实现一个函数，要求如下：
- 根据输入的数字范围[start,end]和随机数个数"n"生成随机数
- 生成的随机数存储到数组中，返回该数组
- 返回的数组不能有相同元素 注意：
- 不需要考虑"n"大于数字范围的情况
📰代码演示：
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
</head>
<body>
<script type="text/javascript">
const _getUniqueNums = (start, end, n) => {
// 补全代码
//空的数组
var array = [];
while (array.length < n) {
//Math.floor() 方法返回小于等于x的最大整数。
//Math.random返回介于 0（包含） ~ 1（不包含） 之间的一个随机数：
let value = Math.floor(Math.random() * (end - start + 1) + start);
// array.includes查找字符串是否包含 "value":
if (!array.includes(value))
// 添加到末尾
array.push(value)
}
return array;
}
console.log(_getUniqueNums(1, 5, 2))
</script>
</body>
</html>
⑧数组排序
描述
请补全JavaScript代码，根据预设代码中的数组，实现以下功能：
- 列表只展示数组中的name属性
- 实现点击"销量升序"按钮，列表内容按照销量升序重新渲染
- 实现点击"销量降序"按钮，列表内容按照销量降序重新渲染 注意：
- 必须使用DOM0级标准事件（onclick）
📰代码演示：
<!DOCTYPE html>
<html>
<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');
// 补全代码
// 1. 升序
let up = () => {
// 前减后为升序（简单记）
return cups.sort((a, b) => {
return a.sales - b.sales
});
}
// 2. 降序
let down = () => {
// 后减前为降序（简单记）
return cups.sort((a, b) => {
return b.sales - a.sales
});
}
// 3.重写遍历
let getName = () => {
let strValue = '';
for (let i = 0; i < cups.length; i++) {
strValue += '<li>' + cups[i].name + '</li>';
}
return strValue;
}
// 4. 执行升序事件
upbtn.onclick = () => {
up();
ul.innerHTML = getName();
}
// 5.执行降序事件
downbtn.onclick = () => {
down();
ul.innerHTML = getName();
}
</script>
</body>
</html>
⑨新数组
描述
请补全JavaScript代码，该函数接受两个参数分别为数组、索引值，要求在不改变原数组的情况下返回删除了索引项的新数组。
📰代码演示：
方法一：
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
</head>
<body>
<script>
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;
}
console.log(_delete([1, 5, 8, 9, 999, 8, 7, 888], 4))
</script>
</script>
</body>
</html>
方法二：
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
</head>
<body>
<script>
const _delete = (array, index) => {
// 补全代码
// 使用过滤器
return array.filter(function (a,b){
return array[b] != array[index];
});
}
console.log(_delete([1, 5,5,4,588888,8,4,5], 0))
</script>
</script>
</body>
</html>
⑩计算器（使用闭包）
描述
请补全JavaScript代码，要求每次调用函数"closure"时会返回一个新计数器。每当调用某个计数器时会返回一个数字且该数字会累加1。
注意：
- 初次调用返回值为1
- 每个计数器所统计的数字是独立的
📰代码演示：
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
</head>
<body>
<script>
//使用闭包：当一个嵌套的内部(子)函数引用了嵌套的外部(父)函数的变量(函数)时, 就产生了闭包
const closure = () => {
// 补全代码
let i = 1;
return function() {
return i++;
}
}
console.log(closure()())
</script>
</body>
</html>
最后
1、码农日刷题 👉 通过刷题认识到自己的不足，增加对该编程语法的熟练度（可以很大程度提升自己的编程水平(ง •_•)ง）
2、感谢大佬们的支持，你们的支持是我们更新的最大动力，希望这篇文章能帮到大家
3、最后，在这里分享一款刷题神器（里面还有很多值得学习的题目）点击跳转至刷题神器（一起刷起来吧( ఠൠఠ )💪），
下篇文章再见ヾ(￣▽￣)ByeBye
本文转载自: https://blog.csdn.net/m0_61490399/article/details/126364580
版权归原作者 SYFStrive 所有， 如有侵权，请联系我们删除。
版权归原作者 SYFStrive 所有， 如有侵权，请联系我们删除。