4.6-蓝桥杯-实现选项卡动态切换功能-实现卡号绑定功能-开学礼物大放送页面搭建-传送门-分一分-小兔子找胡萝卜

4.6-蓝桥杯-实现选项卡动态切换功能-实现卡号绑定功能-开学礼物大放送页面搭建-传送门-分一分-小兔子找胡萝卜

一.学习内容

1.1实现选项卡动态切换功能

方法一：利用for循环的方法。

该方法利用的循环嵌套，外层循环，用于绑定点击事件，内部循环，是为了先移除所有的active。此后在点击什么对其加active。

for循环嵌套是外部循环一次，内部循环完后，再进行外部的第二次循环。

方法二：利用forEach方法进行遍历。

该方法运用了三次forEach,

1.遍历获取所有的选项卡,绑定点击事件。

2.再次利用forEach进行遍历，先移除所有的选项卡active，在点击是那个就添加active。

3.对所有选项卡的内容的遍历，同样也是先移除移除所有active，在对应的选项卡给予对应的选项内容添加active

// 实现选项卡功能
function init() {
  // TODO 待补充代码
    //获取所有的选项卡
  let tabs = document.querySelectorAll('.tabs div')
  //获取所有选项卡的内容
  let content = document.querySelectorAll('#content div')
  //利用forEach遍历获取所有的选项卡/获取所有选项卡的内容
  tabs.forEach((item,index,arr)=>{
      //绑定点击事件
    item.onclick = function(){
        //再次利用forEach进行遍历，由于上方遍历的是所有的选项卡，所以需要先移除所有的选项卡active
      arr.forEach((item)=>{
        item.classList.remove('active')
      })
    item.classList.add('active')
        //再次进行所有选项卡的内容的遍历
    content.forEach((item)=>{
        //移除所有active
        item.classList.remove('active')
        //在对应的选项卡给予对应的选项内容
        content[index].classList.add('active')
    })
    }
  })
}
init();

1.2实现卡号绑定功能

思路：实现需要通过$.get获取所有的数据,通过用户输入的密码和账号与获取的的数据进行对比，获取需要显示成功或者失败的标签，对其进行显示和隐藏即可。 在显示成功标签时，要将失败的标签隐藏，反之同理。

function bind(cardno, password) {
    //Todo:补充代码
    $.get("js/cardnolist.json",(res)=>{
        // console.log(res)
        let data=res.cardnolist
        for(var i=0;i<data.length;i++){
            //用输入的密码和账号与获取的的数据库的数据进行对比
            if(data[i].cardno==cardno &&data[i].password==password){
                //$("#tip1")=document.getElementById("tip1")；
                //$("#tip1")标签选择器
                $("#tip1").removeClass("fade").addClass("show");
                $("#tip2").removeClass("show").addClass("fade");
                //一旦检测成功就跳出循环，节约时间
                break;
            }else{
                $("#tip2").removeClass("fade").addClass("show");
                $("#tip1").removeClass("show").addClass("fade");
            }
        }
    })
}

1.3 开学礼物大放送页面搭建

1.4 传送门

知识点：Window scrollTo(x,y) ，scrollY，scrollX，:nth-of-type(n)选择器，:nth-child(n)` 选择器

1.Window scrollTo(x,y) 方法,滚动到文档中的某个坐标。

2.scrollY：获取文档在垂直方向已滚动的像素值。

scrollX：获取文档/页面水平方向滚动的像素值。

3.:nth-of-type(n)选择器：选择器匹配属于父元素的特定类型的第 N 个子元素的每个元素.

<div class='box'>
<a>111</a>
<a>111</a>//a:nth-of-type(2)
<img/>
<a>111</a>
<img/>
</div>

a:nth-of-type(2)
{
background:#ff0000;
}

4.:nth-child(n) 选择器:选择器匹配属于其父元素的第 N 个子元素，不论元素的类型。

这里p:nth-child(1)为h1元素,p:nth-child(2)才为p元素

$(window).scroll(function () {
  // 页面滚动到指定范围，对应的侧边按钮字体变色
  // TODO：请补充代码实现功能
  let top=scrollY
  //获取到所有的a标签后，先将使用的高量移除，在通过当前滚轮的高度去加高量
  $("#lift a").removeClass("active-color");
  if(top>=0 &&top<960){
    $("#lift a:nth-of-type(1)").addClass('active-color')
  }else if(top>=960&&top<=1920){
    $("#lift a:nth-of-type(2)").addClass('active-color')
  }else{
    $("#lift a:nth-of-type(3)").addClass('active-color')
  }
});

/**
 * @param {Object} scrollTopVal：到达指定位置需要滚动的高度
 * 点击按钮，滚动到指定位置
 */
function toFunction(scrollTopVal) {
  // TODO：请补充代码实现功能
  window.scrollTo(0,scrollTopVal)
}

1.5 分一分

知识点：slice方法

slice方法：返回数组中被选中的元素，不改变原的数组，返回新的数组。

slice(start ,end) 选择从给定的 start 参数开始的元素，并在给定的 end 参数处结束，但不包括其开始结束的参数。

var f = ["a","b","c","d","e"];
var c = f.slice(1, 3);
console.log(c)//["b","c"];

题目应用：

思路：创建两个数组，1.Arr由于存储升序排列的数组，2.newArr：由于存储用户需要分割成几个小数组的新数组。将一个数组中分隔小数组，遍升序数组，利用silce方法依次进行分隔存储到newArr数组中，返回即可

难点：在遍历数组中注意i的增加，不是加1了，而加的是用户希望分成的小数组的长度num。因为在slice(1,3)方法中选取索引值范围内的元素，例如：需要子数组长度num=2,i=0第一次选取silce(0-2), num=2,i+=num,i=2第二次选取slice(2-4), 确保每次选取的个数相同。如果数组的长度在最后分有剩余，slice方法可以直接将其分为一组中。

const splitArray = (oldArr, num) => {
  // TODO：请补充代码实现功能
  //sort()方法进行升序排列
  let Arr=oldArr.sort((a,b)=>{
    return a-b
  })
  //用于存储每个小数组
  let newArr=[]
  //通过循环遍历数组长度，要注意i的增加，是加num,因为在slice(1,3)方法中选取索引值范围内的元素
  //例如：需要子数组num=2,i=0第一次选取silce(0-2),num=2,i+=num,i=2第二次选取slice(2-4),每次选取的个数相同。
  //如果数组的长度是在分的时不均有剩余，slice方法可以直接将其分为一组中
  for(let i=0;i<oldArr.length;i+=num){
    newArr.push(Arr.slice(i,num+i))
  }
  return newArr
};
module.exports = splitArray; // 检测需要，请勿删除

1.6小兔子找胡萝卜

知识点：jQuery 遍历-eq()方法

eq(index) 方法：获取当前匹配的多个元素中指定index上的一个， index 参数标示多个元素集合中元素的位置。

<ul>
  <li>list item 1</li>
  <li>list item 2</li>
  <li>list item 3</li>//选定的元素$('li').eq(2)
  <li>list item 4</li>
  <li>list item 5</li>
</ul>

$('li').eq(2).css('background-color', 'red');

题目应用：

解题步骤：

1.首先需要创建一个sum由于表示兔子需要移动的位置，接着获取输入框中用户需要兔子移动的步数，这时兔子每一移动一次sum+=兔子移动的步数。

：获取input框的value值是字符串类型，需要转化为number类型，不然不能进行累加，不能准确获取兔子的位置。

2.接着判断用户输入的步数只能等于1或者2.观察得知兔子是给标签加active显示的。所以获取所有的格子，通过eq(兔子移动的位置)，加上active，还需要移除它兄弟标签的active。

3.查看炸弹的位置和胡萝卜的位置，当移动到12格是炸弹，游戏结束，移除移动按钮，显示重置按钮，并获取提示结构${(}^{\prime }.resul{t}^{\prime }).text()进行失败提示。当移动到23格，游戏获胜也是移除移动按钮，显示重置按钮，并获取提示结构$(‘.result’).text()进行成功提示。

4.重置按钮就是回到最初始的状态，让小兔子的位置回归为零，兔子显示在第一个格子，移除其他位置的兔子。结果提示置空，用户输入框置空，显示开始按钮。

function start() {
    //开始隐藏开始按钮
    $('#start').hide()
    //显示移动按钮
    $('#move').show()
}
// TODO：重置游戏
function reset() { 
    sum = 0
    $('.lawn').eq(sum).addClass('active').siblings().removeClass('active')
    $('.result').text('')
    $('input')[0].value = ''
    $('#start').show()
    $('#reset').hide()
}
// TODO：移动
let sum = 0
function move() {
    //注意这里获取的value值是字符串，需要转化为number类型
    let baseNum = Number($('input').val())
    sum += baseNum
    if (baseNum == 1 || baseNum == 2) {
        $('.lawn').eq(sum).addClass('active').siblings().removeClass('active')
        if (sum == 12) {
            $('#move').hide()
            $('#reset').show()
            $('.result').text('哎呀！兔子踩到炸弹了，游戏结束！')
        }
        else if(sum == 23){
            $('#move').hide()
            $('#reset').show()
            $('.result').text('小兔子吃到胡萝卜啦，游戏获胜！')
        }
    }
    else {
        $('.result').text('输入的步数不正确，请重新输入。')
    }
}

二.学习总结

今天做了蓝桥杯，实现选项卡动态切换功能，实现卡号绑定功能，开学礼物大放送页面搭建，传送门，分一分，小兔子找胡萝卜。知识点：1.Window scrollTo(x,y) 方法滚动到文档中的某个坐标。2.:nth-of-type(n)选择器和:nth-child(n)选择器，两者都是匹配属于其父元素的第 N 个子元素。但是:nth-of-type(n)区分子袁术类型，:nth-child(n)不区分子元素的类型。3.slice()方法由于分割数组，获取数组中指定范围的元素，不改变原数组。4.eq()方法，获取当前匹配的多个元素中指定index上的一个。难点：1.分一分题目，如何利用silce将其分为长度相等的小数组？首先需要创建一个新数组，通过for循环遍历数组，首先划分范围，每个小数组的长度。指定数组长度为n例如：第一个数组0-n，第二个，n-2n。可以得出每次加需要加n,也就是for循环，i=0;i+=n;,每循环一次得到一个数组存储到新数组中。遇到的问题：在做小兔子找胡萝卜时，获取到兔子的每次移动的步数，在对兔子位置相加，移动兔子发现一直停留在移动，最后发现获取的步数是string类型不能进行数字的累加，解决：转化成number类型即可。总的来说今天的学习内容中等难度，有些题比较简单，有些比较难，但都基本掌握，上午状态好些，下午由于没有午睡比较犯困。