【JavaScript】实战训练小项目-WebAPI-阿里云开发者社区

JavaScript实战训练小项目 & WebAPI

1. JS操作DOM树

在上一篇文章中，其实我们并没有学JS和HTML的互动，而是各干各的

现在，我们就要用JS让HTML更有活力~

文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展置标语言的标准编程接口。它是一种与平台和语言无关的应用程序接口(API),它可以动态地访问程序和脚本,更新其内容、结构和www文档的风格(HTML和XML文档是通过说明部分定义的)。文档可以进一步被处理，处理的结果可以加入到当前的页面。DOM是一种基于树的API文档，它要求在处理过程中整个文档都表示在存储器中。另外一种简单的API是基于事件的SAX，它可以用于处理很大的XML文档，由于大，所以不适合全部放在存储器中处理。

你可以简单的理解为，jS操作DOM树就是在获得HTML的标签元素并有一些动作

而这个过程，就需要用到一些WebAPI

1.1 获得HTML控件/元素标签

根据id来获取对象

document就是本文件对应的对象！

可以通过name…等等去获取

但是最常用的是id，因为id是有唯一性的

document.getElementById("标签的id名");

1.2 操纵控件

1.2.1 获取属性值

获取到的对象，就有对应的属性

document.getElementById("id").value;

1.2.1 修改属性值

例子：

我以替换背景图片为例

不加js代码的html代码：

效果：

加了之后的代码：

效果：

解释：

点击按钮，调用js函数触发背景替换

1.3 实现一个猜数字的功能

js中任何产生随机数呢？

可以去查一查mdn文档

生成一个1到10的随机数

一共十个值，乘以十取整

初始是1，取整后加一

注意：js中有一些是默认的内置函数，比如select…，所以如果发现运行不了，可能是因为你的函数与内置函数重名了~

<div>
    <h3>猜数字游戏</h3>
    玩家请输入一个 1 - 10 的数字： 
    <input type="text" id="input_number"><br>
    <input type="button" value="查看结果" onclick="select1()">
    <div id="result">
    </div>
    <script>
        function select1() {
            //产生随机数
            var number = parseInt(Math.random() * 10) + 1;
            var inputNumber = document.getElementById("input_number").value;
            var msg;
            if(number == parseInt(inputNumber)) {
                msg = "<h4>恭喜你，猜对了</h4>";
            }else {
                msg = "<h4>猜错了，正确的数字是" + number + "</h4>";
            }
            document.getElementById("result").innerHTML = msg;
        }
    </script>
</div>

获取到div对象，可以向里面添加html代码或者文本

innerHTML，添加html代码块，并被浏览器编译

innerText，添加文本，不被浏览器编译

调用前会清空之前此对象的inner影响的效果

innerHTML效果：

innerText效果：

document.getElementById("result").innerText = msg;

2. JQuery

jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（框架）于2006年1月由[John Resig](https://baike.baidu.com/item/John Resig/6336344?fromModule=lemma_inlink)发布。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。

jQuery的核心特性可以总结为：具有独特的链式语法和短小清晰的多功能接口；具有高效灵活的CSS选择器，并且可对CSS选择器进行扩展；拥有便捷的插件扩展机制和丰富的插件。jQuery兼容各种主流浏览器，如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等。

简而言之，它就是一个工具js，是一个很好的外部资源，它提供了很多简洁高效的API

怎么引入呢？

下载jquery的js文件

马HTML/jquery.min.js · 游离态/马拉圈2023年5月 - 码云 - 开源中国 (gitee.com)

使用jquery的网络地址访问

https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js

然后用script标签引入外部资源就行了

写在head里，保证后续的js代码都能够使用jquery的API

上面的猜数字游戏是原生的js代码，现在是使用jquery的代码：

这些API需要通过jQuery这个对象去调用，有一个别名“$”，但是不建议使用，因为其他的一些js框架，也会使用到这个别名，所以会冲突~

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>WebAPI Test</title>
        <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
    </head>
    <body id="body">
        <div>
            <h3>猜数字游戏</h3>
            玩家请输入一个 1 - 10 的数字： 
            <input type="text" id="input_number"><br>
            <input type="button" value="查看结果" onclick="selectByJQuery()">
            <div id="result">
            </div>
            <script>
                function selectByJQuery() {
                    var number = parseInt(Math.random() * 10) + 1;
                    var inputNUmber = jQuery("#input_number").val();
                    var msg;
                    if(number == parseInt(inputNumber)) {
                        msg = "<h4>恭喜你，猜对了</h4>";
                    }else {
                        msg = "<h4>猜错了，正确的数字是" + number + "</h4>";
                    }
                    jQuery("#result").html(msg);
                }
            </script>
        </div>
    </body>
</html>

效果更刚才一致，不做展示

你可能会觉得，这也简约不到哪里去啊

这是因为我们的代码很简单，代码一多或者一些场景就会很简约~

前提是你熟悉那些API，不过，不会的查一下就行了呗~

前面的更换背景的代码可更改为：

jQuery获取标签对象可以参考CSS的标签选择器~

function change() {
    jQuery("body").css("background-image",                      "url(https://img0.baidu.com/it/u=3007501660,4148393477&fm=253&fmt=auto&app=138&f=JPEG?w=563&h=500)");
}

jQuery的赋值不是等号赋值，而是传值给对应的函数

效果一致

val方法既可以获取值，也可以修改值

不传参，返回对应值

传参，value修改成对应的值，返回修改前的值

其他标签属性的方法类似

function selectByJQuery() {
    var number = parseInt(Math.random() * 10) + 1;
    jQuery("#input_number").val(number);
    var inputNumber = jQuery("#input_number").val();
    var msg;
    if(number == parseInt(inputNumber)) {
        msg = "<h4>恭喜你，猜对了</h4>";
    }else {
        msg = "<h4>猜错了，正确的数字是" + number + "</h4>";
    }
    jQuery("#result").html(msg);
}

更改成这样的话，效果如下所示：

接下来，我们将用js和jquery去实现几个小项目：

计算器

聚合搜索

表白墙

3. 简单计算器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>简单计算器</title>
    <link rel="stylesheet" href="cal.css">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
</head>
<body>
</body>
</html>

body中的一些页面元素：

<div class="calculator">
    <div class="cal">
        <form action="#">
            <h2>简单计算器</h2>
            <div class="row">
                数字一：<input type="text" id="c1">
            </div>                
            <div class="row">
                数字二：<input type="text" id="c2">
            </div>
            <div class="option">
                <input type="button" value="相加" onclick="add()" id="a">
                <!-- id不能与函数重复，否则会误判 -->
                <input type="button" value="相减" onclick="sub()" id="s">
                <input type="button" value="相乘" onclick="mul()" id="m">
                <input type="button" value="相除" onclick="div()" id="d">
            </div>
            <div class="clear">
                <div class="reset">
                    <input type="reset" value="清空" id="up" onclick="update()">
                </div>
            </div>
        </form>
    </div>
</div>

js代码：

<script>
    function add() {
        var numb1 = jQuery("#c1").val();
        var numb2 = jQuery("#c2").val();
        var sum = parseInt(numb1) + parseInt(numb2);
        jQuery("#a").val(sum);
    }
    function sub() {
        var numb1 = jQuery("#c1").val();
        var numb2 = jQuery("#c2").val();
        var sum = parseInt(numb1) - parseInt(numb2);
        jQuery("#s").val(sum);
    }
    function mul() {
        var numb1 = jQuery("#c1").val();
        var numb2 = jQuery("#c2").val();
        var sum = parseInt(numb1) * parseInt(numb2);
        jQuery("#m").val(sum);
    }
    function div() {
        var numb1 = jQuery("#c1").val();
        var numb2 = jQuery("#c2").val();
        var sum = parseFloat(numb1) / parseInt(numb2);
        jQuery("#d").val(sum);
    }
    function update() {
        jQuery("#a").val("相加");
        jQuery("#s").val("相减");
        jQuery("#m").val("相乘");
        jQuery("#d").val("相除");
    }
</script>

css文件：

有时间可以研究一下,这里只是为了美观~

html {
    width: 100%;
    height: 100%;
}
body {
    width: 100%;
    height: 100%;
    background-image: url("海.jpg");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}
.calculator {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.cal {
    width: 600px;
    height: 400px;
    background-color: rgba(255, 255, 255, 0.5);
    border-radius: 20px;
}
.cal h2 {
    font-size: 24px;
    text-align: center;
    margin-top: 60px;
    margin-bottom: 40px;
}
.cal .row {
    height: 50px;
    width: 100%;
    display: flex;
    justify-content: space-around;/*设置flex的原因就是要用这个*/
    align-items: center;
    font-size: 25px;
    font-weight: 900;
    margin: 10px;
}
#c1 {
    width: 400px;
    height: 45px;
    font-size: 23px;
    text-indent: 10px;
    border-radius: 10px;
}
#c2 {
    width: 400px;
    height: 45px;
    font-size: 23px;
    text-indent: 10px;
    border-radius: 10px;
}
.option input {
    display: block;
    font-weight: 900;
    font-size: 20px;
    width: 100px;
    height: 70px;
    color: rgba(255, 255, 255, 0.618);
    border-radius: 20px;
    background-color: rgba(251,114,153, 0.7);
}
.option {
    margin-top: 20px;
    display: flex;
    justify-content: space-around;
}
.clear {
    display: flex;
    justify-content: center;
    align-items: center;
}
.reset #up {
    width: 200px;
    height: 30px;
    background-color:rgba(0, 0, 0, 0.4);
    color: white;
    font-weight: 900;
    line-height: 30px;
    text-align: center;
    border-radius: 2010px;
    border:none;
    margin-top: 20px;
    transition: all 0.618s;
}
#up:hover{
    background-color: rgba(251,114,153, 0.7);
}

效果：

4. 聚合搜索

聚合搜索就是一个页面，上面有一栏按钮，按一下就跳转到对应的网址，栏下的页面转换为对应的网址，但是选择栏还在

主要是为了提高体验感~

html：

嵌入页面用iframe标签

我们只需要点击按钮的时候，改变iframe的src属性即可

用到attr方法，左边为属性名，右边为替换后的值

b站有这个复制嵌入代码的功能：

牛好的歌！

设置这个可以让视频可以放大至全屏！

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="AS.css" />
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
    <title>聚合搜索</title>
  </head>
  <body>
    <!-- 这里是我比较常用的网站，可以实际更换 -->
    <!-- 值得一提的是，有些网址不支持“嵌套” -->
    <div id="option">
      <input type="button" value="b站" onclick="toBilibili()" />
      <input type="button" value="CSDN" onclick="toCSDN()" />
      <input type="button" value="码云" onclick="toGit()" />
    </div>
    <hr />
    <!-- 嵌入网页的框架iframe标签 -->
    <!-- 给一个初始页面 -->
    <div class="ifm">
        <iframe src="#" id="frame"></iframe>
    </div>
    <script>
      function toBilibili() {
        jQuery("#frame").attr("src", "https://www.bilibili.com/");
      }
      function toCSDN() {
        jQuery("#frame").attr(
          "src",
          "https://blog.csdn.net/?spm=1000.2115.3001.4477"
        );
      }
      function toGit() {
        jQuery("#frame").attr("src", "https://gitee.com/carefree-state");
      }
    </script>
  </body>
</html>

CSS修饰：

感兴趣的可以看看~

html {
    width: 100%;
    height: 100%;
}
body {
    width: 100%;
    height: 100%;
    background-image: url("海.jpg");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}
#option {
    width: 100%;
    height: 30px;
    display: flex;
    justify-content: space-around;
}
#option input {
    display: block;
    font-weight: 900;
    font-size: 15px;
    color: rgba(255, 255, 255, 0.618);
    border-radius: 9px;
    background-color: rgba(251,114,153, 0.7);
}
.ifm {
    height: calc(100% - 30px);
    display: flex;
    justify-content: center;
    align-items: center;
}
iframe {
    width: 1200px;
    height: 600px;
}

效果：

一开始出现了“套娃”现象，其实#号代表就是当前的页面了，所以它将页面套了进去

不会出现无限套娃的现象，内部限制了

可能会有一些网站拒绝被嵌入的

5. 表白墙

这是个简陋的表白墙

输入发起者，输入接收者，输入表白话语，然后显示在表白墙上

想法：

左上角是输入框，为”表白“

右边为表白详细，为”墙“

script行为：

获取三个信息

进行非空校验

通过trim去掉空格后，看看是不是空字符串

用alert提醒

用focus聚焦到对应的文本框

发送成功情况数据

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link rel="stylesheet" href="pursue.css">
        <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
        <title>表白墙</title>
    </head>
    <body>
        <div class="container">
            <div class="container-left">
                <div class="card">
                    <form action="#">
                        <h1>表白</h1>
                        <div class="row">
                            谁：&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="text" id="c1">
                        </div>    
                        <div class="row">
                            想对谁：<input type="text" id="c2">
                        </div>            
                        <div class="row">
                            说：&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="text" id="c3">
                        </div>
                        <div class="print">
                            <div class="s">
                                <input type="button" value="发送" id="go" onclick="send()">
                            </div>
                        </div>
                    </form>
                </div>
            </div>
            <div class="container-right">
                <div class="article" id="a">
                    <h1 style="font-size: 50px;">墙</h1>
                </div>
            </div>   
        </div>
        <script> 
            function send() {
                var text1 = jQuery("#c1");
                var text2 = jQuery("#c2");
                var text3 = jQuery("#c3");
                if(text1.val().trim() == "") {
                    alert("请输入是谁！");
                    text1.focus();
                    return;
                }
                if(text2.val().trim() == "") {
                    alert("请输入想对谁说！");
                    text2.focus();
                    return;
                }
                if(text3.val().trim() == "") {
                    alert("请输入想说什么！");
                    text3.focus();
                    return;
                }
                var loveWords =  "<br><h2>" + text1.val() + " 想对 " + text2.val() + " 说 " + text3.val() + "！</h2>";
                jQuery("#a").append(loveWords);
                text1.val("");
                text2.val("");
                text3.val("");
            }
        </script>
    </body>
</html>

css修饰：

感兴趣可以看看~

* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}
html {
    height: 100%;
}
body {
    background-image: url(海.jpg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    height: 100%;
}
.container {
    /* 固定宽度 */
    width: 1000px;
    margin: 0 auto;
    height: 100%;
    display: flex;
    justify-content: space-between;
}
/* 增加可读性 */
.container .container-left {
    height: 100%;
    width: 25%;
}
.container .container-right {
    height: 100%;
    width: 74%;
}
.card {
    margin-top: 10px;
    height: 245px;
    width: 100%;
    background-color: rgba(255, 255, 255, 0.8);
    border-radius: 25px;
}
.article {
    margin-top: 10px;
    height: calc(100% - 10px);
    width: 100%;
    background-color: rgba(255, 255, 255, 0.8);
    border-radius: 15px;
    padding: 5px 20px;
    overflow: auto;
    /* 内容溢出，滚动条放入这里 */
}
.article h2 {
    color: rgba(251, 114, 153, 0.8);
}
.card h1 {
    font-size: 50px;
    text-align: center;
    margin-top: 15px;
    margin-bottom: 15px;
}
.row {
    height: 30px;
    width: 100%;
    display: flex;
    justify-content: space-around; /*设置flex的原因就是要用这个*/
    align-items: center;
    font-size: 15px;
    margin: 5px;
    font-weight: 900;
}
#c1 {
    width: 120px;
    height: 19px;
    font-size: 12px;
    text-indent: 4px;
    border-radius: 4px;
    font-weight: 900;
    color: rgba(251, 114, 153, 0.7);
}
#c2 {
    width: 120px;
    height: 19px;
    font-size: 12px;
    text-indent: 4px;
    border-radius: 4px;
    font-weight: 900;
    color: rgba(251, 114, 153, 0.7);
}
#c3 {
    width: 120px;
    height: 19px;
    font-size: 12px;
    text-indent: 4px;
    font-weight: 900;
    border-radius: 4px;
    font-weight: 900;
    color: rgba(251, 114, 153, 0.7);
}
.print {
    display: flex;
    justify-content: center;
    align-items: center;
}
.s #go {
    width: 150px;
    height: 25px;
    background-color: rgba(0, 0, 0, 0.4);
    color: white;
    font-weight: 900;
    line-height: 25px;
    text-align: center;
    border-radius: 10px;
    border: none;
    margin-top: 10px;
    transition: all 0.618s;
}
#go:hover {
    background-color: rgba(251, 114, 153, 0.7);
}

效果：

非空校验：

【JavaScript】实战训练小项目-WebAPI

1. JS操作DOM树

1.1 获得HTML控件/元素标签

1.2 操纵控件

1.3 实现一个猜数字的功能

2. JQuery

表白墙

3. 简单计算器

4. 聚合搜索

5. 表白墙

热门文章

最新文章

相关课程

相关电子书

相关实验场景

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

【JavaScript】实战训练小项目-WebAPI

1. JS操作DOM树

1.1 获得HTML控件/元素标签

1.2 操纵控件

1.3 实现一个猜数字的功能

2. JQuery

表白墙

3. 简单计算器

4. 聚合搜索

5. 表白墙

热门文章

最新文章

相关课程

相关电子书

相关实验场景