蓝桥题目集

最新推荐文章于 2025-06-13 20:56:05 发布

没有羊的王K

最新推荐文章于 2025-06-13 20:56:05 发布

阅读量934

点赞数 10

文章标签： javascript 前端 html

本文链接：https://blog.youkuaiyun.com/weixin_74314406/article/details/137091853

版权

1.关于你的欢迎语

这个题目要求修改bug

在未修改时是运行显示的是它的案例。

这里的想法采用模板字符串，将我们获取到的输入内容放入模板中进行替换。

首先就要通过id获取相关内容

再通过获取输出栏的id将我们用模板字符串拼接好的内容进行输出。

首先，我们通过ID subject、event1 和 event2 分别获取用户在输入框中输入的用户名、课程名和平台名。这是通过 document.getElementById 方法实现的，该方法根据指定的ID从DOM中获取元素，并返回该元素的引用。

接下来，我们使用模板字符串来拼接这些输入

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="./css/style.css" />
    <script src="./js/index.js"></script>
    <link rel="stylesheet" href="./css/bootstrap.min.css" />
    <script src="./js/bootstrap.bundle.min.js"></script>
  </head>

  <body onload="onload()">
    <div class="container">
      <h1>营销号生成器</h1>
      <div class="row">
        <div class="col-5">
          <form action="javascript:void(0);" autocomplete="off">
            <div class="form-group">
              <lable for="subject">用户：</lable>
              <input
                type="text"
                id="subject"
                class="form-control"
                placeholder="小蓝"
                required
              />
            </div>
            <div class="form-group">
              <lable for="event1">课程：</lable>
              <input
                type="text"
                id="event1"
                class="form-control"
                placeholder="Python"
                required
              />
            </div>
            <div class="form-group">
              <lable for="event2">平台：</lable>
              <input
                type="text"
                id="event2"
                class="form-control"
                placeholder="蓝桥云课"
                required
              />
            </div>
            <div class="form-group">
              <input
                type="submit"
                value="生成"
                class="btn btn-primary"
                onclick="generate()"
              />
            </div>
          </form>
        </div>
        <div class="col-7" style="margin-top: 35px">
          <textarea
            id="result"
            rows="8"
            placeholder="欢迎用户小蓝在蓝桥云课学习Python课程！"
          ></textarea>
        </div>
      </div>
    </div>
    <script>
      function generate(){
        const a = document.getElementById('subject').value;
        const b = document.getElementById('event1').value;
        const c = document.getElementById('event2').value;
        const resulet = `欢迎用户${a}在${c}学习${b}课程！`
        document.getElementById('result').value = resulet;
      }
    </script>
  </body>
</html>

内容。模板字符串允许我们在字符串中嵌入表达式，这些表达式会被求值并转换为字符串。在这个例子中，我们将用户名、课程名和平台名分别用 ${a}、${b} 和 ${c} 表示，这些变量分别对应前面通过ID获取到的输入值。

然后，我们需要将拼接好的字符串输出到文本区域中。这通过获取ID为 result 的 <textarea> 元素的引用，并设置其 value 属性来实现。value 属性用于获取或设置表单元素的值，对于 <textarea> 元素来说，它表示文本区域中的内容。

2.【功能实现】卡片化标签页

// 实现选项卡功能
function init() {
  const divs = document.querySelectorAll(".tabs>div");
  const imgs = document.querySelectorAll("#content>div");
  for(let i=0;i<divs.length;i++){
    
      divs[i].onclick=function(){
        for(let a = 0;a<imgs.length;a++){
          divs[a].classList.remove("active");
          imgs[a].classList.remove("active");

      }
      divs[i].classList.add('active');
      imgs[i].classList.add('active');
    }
  }

}
init();

这个函数名为 init，其主要目的是初始化一些交互行为，特别是与标签页（tabs）和对应的内容（content）的显示与隐藏。

选择元素:

const divs = document.querySelectorAll(".tabs>div");：这一行从文档中选择所有直接属于 .tabs 类的 div 元素，并将它们存储在 divs 数组中。
const imgs = document.querySelectorAll("#content>div");：这一行从文档中选择所有直接属于 #content ID 的 div 元素，并将它们存储在 imgs 数组中。

为每一个标签页添加点击事件:

使用一个 for 循环遍历 divs 数组中的每一个元素。
对于每一个 div，为其添加一个点击事件监听器。

点击事件的处理:

当用户点击一个标签页时，首先会遍历 imgs 数组中的所有元素，并移除它们的 active 类。这样做是为了确保在点击新的标签页之前，所有内容都是隐藏的。
同时，也会遍历 divs 数组中的所有元素，并移除它们的 active 类。这是为了确保在点击新的标签页之前，所有标签页都没有 active 状态。
接下来，给被点击的标签页（divs[i]）和对应的内容（imgs[i]）添加 active 类。这样，被点击的标签页会变为活动状态，对应的内容也会显示。

调用 init 函数:

最后，直接调用了 init 函数，以初始化上述的交互行为。

基于这个代码，我们可以推断页面上有两组 div 元素：一组是标签页（.tabs>div），另一组是对应的内容（#content>div）。当点击一个标签页时，该标签页及其对应的内容会被标记为 active，而其他标签页和内容则会被移除 active 类。

注意：为了使这个代码正常工作，你还需要确保 CSS 中定义了 .active 类，以控制标签页和内容的显示与隐藏。例如，.active 类可能包含 display: block; 以显示内容，而其他的元素可能因为没有 active 类而显示为 display: none;。