【蓝桥杯Web】第十三届蓝桥杯（Web 应用开发）第二次线上模拟赛_【蓝桥杯web】第十三届蓝桥杯(web 应用开发)第二次线上模拟赛小兔子爬楼梯

前言

第十三届蓝桥杯全国软件和信息技术专业人才大赛(软件类)新开了Web应用开发比赛,已经组织了几次模拟赛和楼赛,这里主要记录模拟赛题目和设计的知识点,帮助参赛者更好的复习琐碎的知识点和代码,有写的不对的地方欢迎指教并讨论.

---

---

一、卡片化标签页

1. 题目要求:补充js代码，使用原生JS的方法实现选项卡的点击.

2. 题目分析:这是一道原生JS的题目,需要掌握的知识点有:①. 获取元素 ②. 添加点击事件 ③. 排他思想 ④. js操作类.
①. 获取元素

//获取class=tabs下的所有div标签
document.querySelectorAll('.tabs>div')
//获取id=content下的所有div标签
document.querySelectorAll('#content>div')
//根据类名获取元素
document.getElementsByClassName('')
//根据id获取元素
document.getElementById('')
//基本够用了........
1
2
3
4
5
6
7
8
9

②. 添加点击事件

element.onclick = function(){
   
//点击后要触发的事件
}
1
2
3
4

③. 排他思想:干掉别人,留下自己
一般都会使用一个循环,给所有元素都干掉,然后再单独给自己填上需要的功能.
④. js操作类:classList
classList 属性返回元素的类名，作为 DOMTokenList 对象。该属性用于在元素中添加，移除及切换 CSS 类。classList 属性是只读的，但你可以使用 add() 和 remove() 方法修改它。

//为 <div> 元素添加多个类(一个类就写一个)
document.getElementById("myDIV").classList.add("mystyle", "anotherClass", "thirdClass");
//为 <div> 元素移除多个类(一个类就写一个)
document.getElementById("myDIV").classList.remove("mystyle", "anotherClass", "thirdClass");
//为 <div> 元素切换类
document.getElementById("myDIV").classList.toggle("newClassName");
//获取 <div> 元素的类名
var x = document.getElementById("myDIV").classList;
//查看元素是否存在 "mystyle" 类
var x = document.getElementById("myDIV").classList.contains("mystyle");
//基本够用了........
1
2
3
4
5
6
7
8
9
10
11

3. 题目代码

//js/index.js中
function init() {
   
  // TODO 待补充代码
  var divs = document.querySelectorAll('.tabs>div');
  var imgs = document.querySelectorAll('#content>div');
  for(let i = 0;i<divs.length;i++)
  {
   
  //onclick报错,但是不影响代码跑通
    divs[i].onclick=function(){
   
     for(let a = 0;a<divs.length;a++)
     {
   
           divs[a].classList.remove('active');
           imgs[a].classList.remove('active');
     } 
            divs[i].classList.add('active');
            imgs[i].classList.add('active');
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

---

二、随机数生成器

1. 题目要求: 生成要求范围内的指定个不重复的随机数；
2. 题目分析: 这是一道JS语法题,主要考察的是是否熟悉JS中random()的使用.

//获取0-1.0之间的随机数
Math.random();
//随机获取0和1：使用round对0到1之间的数四舍五入，最终得到的是0或1
Math.round(Math,random())
//获取0-10之间的整数
Math.round(Math,random())*10
//获取5-10之间的整数
Math.round(Math,random())*5+5
//随机获取20-100之间的整数
Math.round(Math,random())*80+20
1
2
3
4
5
6
7
8
9
10

3. 题目代码

const getRandomNum = function (min, max, countNum) {
   
  var arr = [];
  // 在此处补全代码
  for (var i = 0; i < countNum; i++) {
    
    var newNum = Math.round(Math.random() *(max-min
1
2
3
4
5
6