HTML+JavaScript-05

最新推荐文章于 2025-05-17 15:18:37 发布
最新推荐文章于 2025-05-17 15:18:37 发布
阅读量1.2k 收藏 22
点赞数 18
分类专栏： JavaWeb 文章标签： html javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_59621600/article/details/135879655
版权

DOM

什么是 DOM？

DOM 是一项 W3C (World Wide Web Consortium) 标准。

DOM 定义了访问文档的标准：

“W3C 文档对象模型（DOM）是中立于平台和语言的接口，它允许程序和脚本动态地访问、更新文档的内容、结构和样式。”

W3C DOM 标准被分为 3 个不同的部分：

  • Core DOM - 所有文档类型的标准模型
  • XML DOM - XML 文档的标准模型
  • HTML DOM - HTML 文档的标准模型

HTML DOM（文档对象模型）

当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。

HTML DOM 模型被结构化为对象树：

对象的 HTML DOM 树

image-20240122095453995

通过这个对象模型，JavaScript 获得创建动态 HTML 的所有力量：

  • JavaScript 能改变页面中的所有 HTML 元素
  • JavaScript 能改变页面中的所有 HTML 属性
  • JavaScript 能改变页面中的所有 CSS 样式
  • JavaScript 能删除已有的 HTML 元素和属性
  • JavaScript 能添加新的 HTML 元素和属性
  • JavaScript 能对页面中所有已有的 HTML 事件作出反应
  • JavaScript 能在页面中创建新的 HTML 事件

查找 HTML 元素

方法描述
document.getElementById(id)通过元素 id 来查找元素
document.getElementsByTagName(name)通过标签名来查找元素
document.getElementsByClassName(name)通过类名来查找元素

通过元素 id 来查找元素

<html>
    <head>
        
    </head>
    <body>
        <div id = "a"></div>
        <script>
            const div = document.getElementById("a");
            console.log(div);
        </script>
    </body>
</html>

image-20240122100558648

通过标签名来查找元素

<html>
    <head>
        
    </head>
    <body>
        <div></div>
        <script>
            const div = document.getElementsByTagName("div");
            console.log(div);
        </script>
    </body>
</html>

image-20240122101127835

通过类名来查找元素

<html>
    <head>
        
    </head>
    <body>
        <div class = "b"></div>
        <script>
            const div = document.getElementsByClassName("b");
            console.log(div);
        </script>
    </body>
</html>

image-20240122101218240

通过name属性获取 表单常用

<html>
    <head>
        
    </head>
    <body>
    <input type="text" name="xuehao">
    <input type="password" name="xuehao">
        <script>
            //通过name属性获取 表单常用
            const inp = document.getElementsByName("xuehao");
            console.log(inp);
        </script>
    </body>
</html>

image-20240122102216038

通过多种方式进行获取

querySelector获取页面里面第一次出现的元素 只获取一个

<html>
    <head>
        
    </head>
    <body>
        <div id="a"></div>
        <div></div>
        <div class="b"></div>
        <script>
            const div = document.querySelector("div");
            console.log(div);
        </script>
    </body>
</html>

image-20240122102408096

通过类名获取

<html>
    <head>
        
    </head>
    <body>
        <div id="a"></div>
        <div></div>
        <div class="b"></div>
        <script>
            //通过类名获取
            const div = document.querySelector(".b");
            console.log(div);
        </script>
    </body>
</html>

image-20240122102702482

通过id名获取

<html>
    <head>
        
    </head>
    <body>
        <div id="a"></div>
        <div></div>
        <div class="b"></div>
        <script>
            //通过id名获取
            const div = document.querySelector("#a");
            console.log(div);
        </script>
    </body>
</html>

image-20240122102930107

通过属性获取

<html>
    <head>
        
    </head>
    <body>
        <input type="text" name="xuehao">
        <input type="password" name="xuehao">
        <script>
            //通过属性获取
            const inp = document.querySelector("[type=password]");
            console.log(inp);
        </script>
    </body>
</html>

image-20240122103305883

querySelectorAll获取所有

注意：当使用querySelectorAll时，可以根据下标来指定html元素，例如console.log(div[0])在下面例子中控制台只输出第一个div元素

<html>
    <head>
        
    </head>
    <body>
        <div id="a"></div>
        <div></div>
        <div class="b"></div>
        <script>
            //querySelectorAll获取所有
            const div = document.querySelectorAll("div");
            console.log(div);
        </script>
    </body>
</html>

image-20240122103542030

支持复合选择器

<html>
    <head>
        
    </head>
    <body>
        <ol class="bbb">
            <li>有序数列</li>
            <li>有序数列</li>
            <li>有序数列</li>
        </ol>
        <ul>
            <li>无序数列</li>
            <li>无序数列</li>
            <li>无序数列</li>
        </ul>
        <ol>
            <li>有序数列</li>
            <li>有序数列</li>
            <li>有序数列</li>
        </ol>
        <script>
            //支持复合选择器
            const uls = document.querySelectorAll("ul>li");//获取ul下面的li标签
            console.log(uls);
            const ol = document.querySelectorAll("ul+ol");//+渲染下一个(ul相邻的下一个ol)
            console.log(ol);
        </script>
    </body>
</html>

image-20240122111919872

事件

事件三要素

1、事件源（哪个元素触发了事件）

2、事件类型（通过点击触发、悬浮触发、移动触发、获取焦点触发等）

3、事件处理函数（触发事件要做什么）

示例

<html>
    <head>
        
    </head>
    <body>
        <button>秋名山车神</button>
        <script>
            //获取事件源
            const but = document.querySelector("button");
            //绑定事件
            but.onclick = function(){
                alert("五菱宏光");
            }
        </script>
    </body>
</html>

案例-046

innerHTML和innerText

innerHTML可以识别html标签

innerText不能识别html标签

示例

<html>
    <head>
        
    </head>
    <body>
        <div id="a" style="height: 200px; width: 400px; background-color: paleturquoise;"></div>
        <script>
            
            const div = document.querySelector("div");
            console.dir(div);//console.dir()打印元素对象的完整格式

            div.onclick = function () {
                // div.innerHTML = "<strong>JavaScript</strong>";//<strong>字体加粗标签
                div.innerText = "<strong>JavaScript</strong>";
            }
        </script>
    </body>
</html>

案例-047

练习-1-获取当前时间

示例

案例-052

可以使用封装的函数toLocaleString()，也可以自定义函数。

代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>获取当前时间</title>
</head>

<body>
    <button>点击获取时间</button>
    <div></div>
    <script>
        var btn = document.querySelector("button");
        var div = document.querySelector("div");
        btn.onclick = function () {
            // div.innerHTML = getDate();
            const date = new Date();
            div.innerHTML = date.toLocaleString();
        }
        function getDate() {
            var date = new Date;
            console.log(date);
            var b = date.getHours();
            var c = date.getMinutes();
            var d = date.getSeconds();
            return b + ":" + c + ":" + d;
        }
    </script>
</body>

</html>

练习-2-修改表单内元素

示例

案例-053

代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>js修改表单内的元素</title>
</head>

<body>
    <button>修改</button>
    <input type="text" placeholder="请输入值">
    <script>
        var btn = document.querySelector("button");
        var inp = document.querySelector("input");
        btn.onclick = function () {
            inp.value = "甲柒";
            btn.disabled = true;
        }
    </script>
</body>

</html>

练习-3-操做元素修改样式属性

示例

案例-054

代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>操做元素修改样式属性</title>
    <style>
        #aaa {
            width: 200px;
            height: 120px;
            background-color: pink;
        }
    </style>
</head>

<body>
    <div id="aaa">甲柒</div>
    <script>
        var a = document.querySelector("div");
        a.onclick = function () {
            a.style.backgroundColor = "yellowgreen";
            // this.style.backgroundColor = "skyblue";
            this.style.fontSize = "40px";
        }
    </script>
</body>

</html>

练习-4-src属性

示例

案例-055

代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            text-align: center;
        }

        img {
            width: 400px;
            height: 400px;
        }

        button {
            font-size: 17px;
            border-radius: 15px;
        }
    </style>
</head>

<body>
    <div>
        <button>上一页</button>
        <img src="./avatar/0001.jpg">
        <button>下一页</button>
    </div>

    <script>
        //拿到img
        const img = document.querySelector("img");

        // 拿到 button
        const buts = document.querySelectorAll("button");

        //数组路径
        const srcs = ["./avatar/0001.jpg", "./avatar/0002.jpg", "./avatar/0003.jpg", "./avatar/0004.jpg", "./avatar/0005.jpg", "./avatar/0006.jpg"]
        let index = 0;
        buts[0].disabled = true;
        buts[0].onclick = function () {
            buts[1].disabled = false;
            index--;
            if (index == 0) {
                this.disabled = true;
                img.src = srcs[index];
            } else {
                img.src = srcs[index];
            }
        }
        buts[1].onclick = function () {
            buts[0].disabled = false;
            index++;
            if (index == 5) {
                this.disabled = true;
                img.src = srcs[index];
            } else {
                img.src = srcs[index];
            }
        }
    </script>
</body>

</html>

练习-5-模拟关闭广告

示例

案例-056

代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div class="max">
        <div class="min">*</div>
        <img src="../甲柒/avatar/0003.jpg" class="img" style="width: 80px;height: 200px;">
    </div>
    <script>
        var min = document.querySelector(".min");
        var img = document.querySelector(".img");
        min.onclick = function () {
            img.style.display = 'none';
        }
    </script>
</body>

</html>

Bootstrap

image-20240124173318995

Bootstrap文档

https://v5.bootcss.com/docs/getting-started/download/

Bootstrap的使用

示例-轮播图

案例-057

  • 下载Bootstrap的生产文件

  • 解压到项目的静态资源中

  • 引用css和js文件

<link rel="stylesheet" href="./bootstrap-5.3.0-alpha1-dist/css/bootstrap.min.css">
<script src="./bootstrap-5.3.0-alpha1-dist/js/bootstrap.min.js"></script>

  • 复制你所需要的代码

  • 将代码稍作修改

代码

<!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="./bootstrap-5.3.0-alpha1-dist/css/bootstrap.min.css">
    <script src="./bootstrap-5.3.0-alpha1-dist/js/bootstrap.min.js"></script>
    <style>

        .carousel{
            width: 400px;
            height: 400px;
            margin: 0 auto;
        }
    </style>
</head>

<body>
    <div id="carouselExampleInterval" class="carousel slide" data-bs-ride="carousel">
        <div class="carousel-inner">
            <div class="carousel-item active" data-bs-interval="10000">
                <img src="../甲柒/avatar/0001.jpg" class="d-block w-100" alt="...">
            </div>
            <div class="carousel-item" data-bs-interval="2000">
                <img src="../甲柒/avatar/0002.jpg" class="d-block w-100" alt="...">
            </div>
            <div class="carousel-item">
                <img src="../甲柒/avatar/0003.jpg" class="d-block w-100" alt="...">
            </div>
        </div>
        <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleInterval"
            data-bs-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="visually-hidden">Previous</span>
        </button>
        <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleInterval"
            data-bs-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="visually-hidden">Next</span>
        </button>
    </div>
</body>

</html>

练习-6-密码长度验证

示例

案例-058

代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .red {
            color: red;
        }

        .green {
            color: green;
        }
    </style>
</head>

<body>
    <input type="password"><span></span>
    <script>
        //获取元素
        var inp = document.querySelector("input");
        var span = document.querySelector("span");
        //失去焦点时检查账号的字符长度是否在6-10
        inp.onblur = function () {
            if (this.value.length >= 6 && this.value.length <= 10) {
                span.style.color = "green";
                span.innerHTML = "✔";
            } else {
                span.style.color = "red";
                span.innerHTML = "✘";
            }
        }
        inp.onfocus = function () {
            span.innerHTML = "";
        }

    </script>
</body>

</html>

onblur 事件发生在对象失去焦点时。

onfocus 事件在元素获得焦点时发生。

练习-7-排他思想

示例

案例-059

代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <button>按钮1</button>
    <button>按钮2</button>
    <button>按钮3</button>
    <button>按钮4</button>
    <script>
        // 获取所有button
        var btn = document.querySelectorAll("button");
        for (let i = 0; i < btn.length; i++) {
            btn[i].onclick = function () {
                for (let j = 0; j < btn.length; j++) {
                    btn[j].style.backgroundColor = "";//先设置所有按钮的背景颜色为空字符串
                }
                btn[i].style.backgroundColor = "skyblue";//设置点击中的按钮的背景颜色
            }
        }
    </script>
</body>

</html>

练习-8-切换皮肤

示例

案例-060

代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>切换皮肤</title>
    <style>
        .max {
            width: 1200px;
            height: 800px;
            margin: 0 auto;
            background-image: url(./image/1.jpg);
            background-size: 1200px 800px;
            position: relative;
            transition: all 0.7s;
        }

        img {
            width: 120px;
            height: 80px;
            margin-left: 4px;
        }

        .min {
            width: 520px;
            height: 80px;
            position: absolute;
            /* border: 2px solid yellowgreen; */
            bottom: 50px;
            right: 50px;
        }

        .big {
            transform: scale(1.1);
            transition: all 0.4s;
        }
    </style>
</head>

<body>
    <div class="max">
        <div class="min">
            <img src="./image/1.jpg" alt="" class="big">
            <img src="./image/2.jpg" alt="">
            <img src="./image/3.jpg" alt="">
            <img src="./image/4.jpg" alt="">
        </div>
    </div>
    <script>
        var imgs = document.querySelectorAll("img");
        var max = document.querySelector(".max");
        for (let i = 0; i < imgs.length; i++) {
            imgs[i].onclick = function () {
                max.style.backgroundImage = "url(" + this.src + ")";
                //清除class
                for (let j = 0; j < imgs.length; j++) {
                    imgs[j].className = "";
                }
                this.className = "big";
            }
        }
    </script>
</body>

</html>

练习-9-随机生成颜色

示例

案例-061

代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .max {
            width: 400px;
            height: 400px;
            border: 4px solid skyblue;
            transition: all 0.7s;
        }
    </style>
</head>

<body>
    <div class="max"></div>
    <script>
        var col = document.querySelector(".max");
        col.onclick = function () {
            var r = Math.floor(Math.random() * 256);
            var g = Math.floor(Math.random() * 256);
            var b = Math.floor(Math.random() * 256);
            var rgb = "rgb(" + r + "," + g + "," + b + ")";
            this.style.backgroundColor = rgb;
        }
    </script>
</body>

</html>
2025“钉耙编程”中国大学生算法设计春季联赛（2）
Aurora_Deer的博客
03-15 254
然后从头往后遍历，遇到0就更改idx的值，否则就进行另一个判断，看看是不是第一次出现，如果是的话，就给first_idx存储下标，这个的作用是为了防止0 1 1 这样的序列也计算进去了，其他的都挺简单啦。那么到这里应该就发现规律了，一直加到n即可，那么第二个就是从1开始了，第一个垂直的是1+k/2 ,第二个是1+k/2+k，第三个是1+k/2+k+k.....其次我们对于0来说，第一个垂直的是0+k/2 ,第二个是0+k/2+k，第三个是0+k/2+k+k.....an-1​，问有多少个。
2025“钉耙编程”春季联赛（1）补题1007分配宝藏
m0_60253149的博客
03-08 422
四个船员时，前3个船员同上一种情况分配的最少，此时若4船员×，那么3：2，船长会被杀死，所以需要4船员√，1个金币即可，因为如果1金币也投×，那么船长被杀死，变成上一种情况，自己就会获得0金币。三个船员时，一开始想的分配情况时012，1船员和2船员同上一种情况一样，此时船长√，1船员×，2船员√，发现无论3船员√×，船长都不会被杀死，所以分配给3船员0金币（虽然3船员×）。两个船员时，01，1船员否决，2船员同意，因为如果否决就会杀死船长，1船员成为新船长，那么就是上面第一种情况自己就会变成0金币。
2025“钉耙编程”中国大学生算法设计春季联赛 - 热身赛
2302_79372568的博客
03-02 966
思路：时间为8s,所以可以考虑暴力做法，我们会发现这三种操作不涉及进位也就是说我们可以先预处理出前面的n-1位在这三种操作下的所得结果，再加上这一位，例如yu[i][j]=yu[i/a][j/a]*a+min(i%a,j%a),表示i和j进行与运算所得结果，i，j的范围为0~1023，超过的部分用递归进行求解，然后我们定义bool dp[i][j]为第i次操作能得到j,所以我们只需用第i-1次操作得到的每个数与ai进行三次运算即可，最后遍历dp[n][i]求和，即得到最终结果。补题1006和1009。
2025“钉耙编程”中国大学生算法设计春季联赛（2）题解
zeisenphael的博客
03-17 1176
未来一段时间会在这个专栏下持续更新的相关题解，鉴于本人只是一个青名蒟蒻，很多题目可能都不会，但我会尽我所能的去理解。
2025“钉耙编程”中国大学生算法设计春季联赛（3）题解
zeisenphael的博客
03-25 1200
这场题出的真的好抽象…
【杭电多校比赛记录】2025“钉耙编程”中国大学生算法设计春季联赛（1）
weixin_41217071的博客
03-08 249
比赛链接 博客园原文链接（防盗） 开题情况 还是很吃教训的一场比赛，被博弈论硬控两小时（很好的一个博弈论题），dijkstra被卡map，最终三题。 自己不会的东西还是太多了，还得多多练习多多长见识。 1001 - 签到 题如其名，签到题，问给出的字符串第一次出现的位置。 点击查看代码 void solve() { int n;cin >> n; string s...
2025“钉耙编程”中国大学生算法设计春季联赛（2）1003
dulcet_23的博客
03-15 287
最后看题解发现，这是一道枚举题目，（霍，这也是我的软肋之一，肥肠好）学长之前和我说过，这个枚举和暴力很重要，有的时候一个题目做不做的出来就是看对这个题目的理解（枚举和暴力就有这个想法在里面）。一开始看这个题目，一眼定义为dp算法，但是后面一看过的人挺多的，有点不对劲。因为在比赛的时候我一直想着怎么dp，想来想去没有想出来。题目的意思其实很好理解，就是不断的去数组里面找到符合标准的个数。很好的一道题目，也是一个有很浓厚枚举思想的一道题目。欸，其实枚举我感觉就是变相的找规律。
2025“钉耙编程”中国大学生算法设计春季联赛（1）题解（会做的做完了）
2301_80045122的博客
03-30 173
个数用哈希表存比较好（但是map过了）
2025“钉耙编程”中国大学生算法设计春季联赛（4）题解
zeisenphael的博客
03-29 472
纯模拟，用一个heap和set去记录剩下的怪物中的攻击力最高的和还没有收到超过k次伤害的。
2023“钉耙编程”中国大学生算法设计超级联赛（6）.zip
08-04
首先，我们来看"2023“钉耙编程”中国大学生算法设计超级联赛（6）- 题解.pdf"。这份文件很可能是对比赛题目的一种官方解答或解析，涵盖了各个问题的解决方案和思路。它可能包括了算法的设计、时间复杂度和空间...
2024“钉耙编程”中国大学生算法设计超级联赛（4）-资料包.zip
08-12
2024“钉耙编程”中国大学生算法设计超级联赛（4）-资料包
2024“钉耙编程”中国大学生算法设计超级联赛（5）-资料包.zip
08-12
2024“钉耙编程”中国大学生算法设计超级联赛（5）-资料包
2024“钉耙编程”中国大学生算法设计超级联赛（2）-资料包.zip
08-12
2024“钉耙编程”中国大学生算法设计超级联赛（2）-资料包.zip
sizeof 和strlen的对比
最新发布
我爱我想但不嫉妒 我哭我笑但不抱怨 我羞我愧但不悲叹 我怒我恨但不自弃
05-17 588
sizeof 和strlen的对比及数组和指针笔试题解析
算法练习：19.JZ29 顺时针打印矩阵
qq_34348690的博客
05-16 240
【代码】算法练习：19.JZ29 顺时针打印矩阵。
C/C++实践(十)C语言冒泡排序深度解析：发展历史、技术方法与应用场景
致力于硬件设计、人工智能知识及技术的分享，不断鞭策自己成长，共同进步！
05-17 769
冒泡排序在嵌入式系统、小规模数据排序及与其他算法结合使用中仍有应用。未来，冒泡排序的并行化改造、机器学习结合及量子计算适配等研究方向或为其带来新的发展机遇。
dance links算法 解决数独问题 python实现
m0_65604669的博客
05-15 622
11。
可视化图解算法38：重建二叉树
weixin_42117918的博客
05-13 986
对于二叉树的相关算法，我们总结了一套【可视化+图解】方法，依据此方法来解决相关问题，算法变得易于理解，写出来的代码可读性高也不容易出错。
AtCoder 第405场初级竞赛 A~E题解
m0_69389639的博客
05-15 885
AtCoder 第405场初级竞赛 A~E题解：A Is it rated?、B Not All、C Sum of Product、D Escape Route、E Fruit Lineup 本文介绍了五个编程题目及其解析，涵盖了嵌套判断、枚举、数组计数法、前缀和、广度优先搜索（BFS）以及组合数学等考点。每个题目都提供了详细的解析和代码参考，帮助理解如何通过编程解决实际问题。题目难度从GESP一级到八级不等，适合不同水平的编程学习者。通过阅读本文，读者可以学习到如何在不同情境下应用这些算法和数据结构。
2025钉耙编程4
03-31
### 关于2025钉耙编程的背景与相关内容 #### 一、赛事概述 “2025钉耙编程”是中国大学生算法设计春季联赛的一部分，旨在通过一系列具有挑战性的算法问题来提升参赛者的逻辑思维能力和程序设计能力[^1]。该系列竞赛通常分为多个阶段或场次，每一场都会围绕特定的主题展开，并提供多道不同难度级别的题目供选手解答。 在引用材料中提到，“2025‘钉杷编程’中国大学生算法设计春季联赛（2）”涉及了一类关于数列子序列匹配的问题。这类问题不仅考察了学生对于动态规划的理解程度，还测试他们处理大规模数据集的能力以及优化空间复杂度的方法。 另外，在另一份资料里也提到了有关内存分配失误的情况：“比赛结束后发现数组定义存在问题……当遇到像`1*1e5`或者`1e5*1`这样极端情况时如果仍然按照传统二维方式声明大小为 `[1e5][1e5]` 的数组，则显然不可行。” 这一点反映了实际编码过程中需要注意资源管理的重要性[^2]。 #### 二、学习路径建议 为了更好地准备类似 “2025 钉杷编程”的活动并提高自己的竞争力，可以遵循以下几个方面来进行训练： ##### （1）掌握基础理论知识 深入理解计算机科学中的核心概念，比如时间/空间复杂度分析方法论；熟悉常见数据结构及其应用场景，例如链表、栈队列、哈希映射等；熟练运用经典算法模型解决现实世界里的难题——包括但不限于贪心法、分治策略、回溯搜索技术等等[^3]。 ##### （2）实践项目积累经验 除了单纯依赖书本上的案例之外还需要积极参与开源贡献或者其他形式的实际工程项目开发工作当中去锻炼自己解决问题的真实水平。同时也可以尝试模仿真实工业环境下的需求规格说明书编写过程从而进一步增强文档撰写技巧方面的软实力[^4]。 ##### （3）模拟赛前热身练习 定期参加各类在线评测平台所举办的周赛月赛等活动保持手感的同时不断调整个人状态迎接即将到来的大规模正式较量时刻到来之前做好充分的心理建设准备工作至关重要[^5]。 以下是实现上述某项功能的一个简单 Python 实现例子： ```python def count_subsequences(a_list, p_value, q_value): n = len(a_list) dp = [[0]*(q_value+1) for _ in range(n)] # 初始化边界条件 for i in range(n): if a_list[i]==p_value: dp[i][0]=1 # 动态转移方程计算其余位置的状态值 for j in range(1,q_value+1): prev_sum=0 for i in range(n): if a_list[i]==j and (i>0 or j==1): temp_dp_i_j_minus_one=(dp[i-1][j-1])if(i>=1)else(0) dp[i][j]+=temp_dp_i_j_minus_one prev_sum+=dp[i][j-1] result=sum([row[-1]for row in dp]) return result ``` 此函数用于统计满足给定模式 `p,0,p,q` 出现在输入列表内的所有可能组合数目。它采用了二维动态规划的思想构建解决方案框架并通过逐步填充表格完成最终目标求解任务[^6]。 --- ###
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

甲柒

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值