WebApi经典案例

最新推荐文章于 2023-04-05 22:10:04 发布
最新推荐文章于 2023-04-05 22:10:04 发布
阅读量307 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45754920/article/details/118963176
版权
这篇博客介绍了两个HTML和JavaScript实现的交互应用：一是通过按钮控制页面背景色开关，模拟开关灯效果；二是实现了一个简单的点餐系统，包括全选/全不选功能，用户可以通过复选框选择菜品。示例代码详细展示了如何使用JavaScript监听事件并处理用户操作，以实现页面动态更新。
摘要由CSDN通过智能技术生成

开关灯

<!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>Document</title>

</head>

<body>

    <button>关灯</button>

    <script>

        let flag = true

        document.querySelector('button').addEventListener('click', () => {

            if (flag == true) {

                document.body.style.backgroundColor = '#333'

                flag = false

            } else {

                document.body.style.backgroundColor = '#fff'

                flag = true

            }

        })

    </script>

</body>

</html>

点餐系统

<!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>Document</title>

    <style>

        * {

            margin: 0;

            padding: 0;

        }

        table {

            border-collapse: collapse;

            border: 1px solid #c0c0c0;

            width: 500px;

            margin: 100px auto;

            text-align: center;

        }

        th {

            background-color: #09c;

            font: bold 16px "微软雅黑";

            color: #fff;

            height: 24px;

        }

        td {

            border: 1px solid #d0d0d0;

            color: #404060;

            padding: 10px;

        }

    </style>

    <script>

        window.onload = function () {

            // 获取相关元素

            const checkAll = document.querySelector('#checkAll')

            const checks = document.querySelectorAll('.check')

            // console.log(checks)

            // 大复选框控制小复选框

            checkAll.addEventListener('click', () => {

                checks.forEach(item => {

                    if (checkAll) {

                        item.checked = checkAll.checked

                    }

                })

            })

            // 方案一：假设法

            // // 小复选框控制大复选框

            // checks.forEach(item => {

            //     item.addEventListener('click', () => {

            //         let flag = true

            //         checks.forEach(items => {

            //             if (!items.checked) {

            //                 flag = false

            //             }

            //         })

            //         checkAll.checked = flag

            //     })

            // })

            // 方案二：判断数组长度

            checks.forEach(item => {

                item.addEventListener('click', () => {

                    let index = 0

                    checks.forEach(items => {

                        if (items.checked) return index++

                    })

                    checkAll.checked = index == checks.length ? true : false

                })

            })

        }

    </script>

</head>

<body>

    <table>

        <tr>

            <th>

                <input type="checkbox" id="checkAll" />全选/全不选

            </th>

            <th>菜名</th>

            <th>商家</th>

            <th>价格</th>

        </tr>

        <tr>

            <td>

                <input type="checkbox" class="check" />

            </td>

            <td>红烧肉</td>

            <td>隆江猪脚饭</td>

            <td>￥200</td>

        </tr>

        <tr>

            <td>

                <input type="checkbox" class="check" />

            </td>

            <td>香酥排骨</td>

            <td>隆江猪脚饭</td>

            <td>￥998</td>

        </tr>

        <tr>

            <td>

                <input type="checkbox" class="check" />

            </td>

            <td>北京烤鸭</td>

            <td>隆江猪脚饭</td>

            <td>￥88</td>

        </tr>

    </table>

</body>

</html>

刘薄膜
关注
webAPI案例
04-20
一些自习学习过程中做的小案例，涉及到轮播的，常见的左右切换的、旋转木马一样的，手风琴状的轮播图，以及移动端的区域滑动，同时简单的使用了swiper和iscroll两个插件类库
WebAPI 实例
04-14
webAPI 示例，webAPI 增加 修改 删除
WebAPI（案例）
weixin_60007218的博客
04-05 383
WebAPI相关案例
webapi案例
09-19
简单webapi案例分享，对于初识webapi或者想学写webapi的程序员可以下载看看 此api采用mvc模式
Asp.net WebApi 项目示例（增删改查）
autumn20080101的专栏
09-24 3524
Asp.net WebApi 项目示例（增删改查） 2015-06-18 14:54 1.WebApi是什么     ASP.NET Web API 是一种框架，用于轻松构建可以由多种客户端（包括浏览器和移动设备）访问的 HTTP 服务。ASP.NET Web API 是一种用于在 .NET Framework 上构建 RESTful 应用程序的理想平台。     可以把W
js帮助文档整合有130个经典案例还有帮助文档
10-21
这份"js帮助文档整合有130个经典案例还有帮助文档"的资源集合，无疑为学习和进阶JavaScript提供了一套全面的学习材料。 首先，帮助文档是理解任何编程语言的基础。对于JS，它涵盖了语法基础、数据类型、变量、...
web开发经典案例源代码
05-31
在web开发领域，经典案例源代码是学习和提升技能的重要资源。这些源代码通常涵盖了多种技术和实践，能够帮助开发者深入理解网页应用的工作原理。在这个压缩包中，包含了多个章节的源代码，涉及到了Web开发的不同方面...
MLDN Java Web 开发实战经典案例篇全部代码2of1
03-30
《MLDN Java Web 开发实战经典案例篇》是一本针对Java Web开发的实践教程，它包含了大量的编程实例和习题解答，旨在帮助读者深入理解和掌握Java Web开发的关键技术。在这个压缩包中，我们找到了一系列与章节相关的源...
java web 经典的购物网站的案例
11-22
"java web 经典的购物网站的案例"就是一个典型的学习与实践项目，它涵盖了前端用户交互、后台数据处理以及完整的业务流程，对于学习者来说，是一个极好的实战训练。 【描述】深入解析： 1. **前端登录注册**：在...
20个JavaScript经典案例
最新发布
11-21
在本资源"20个JavaScript经典案例"中，我们将会探索一些常见的、实用的JavaScript编程技巧和应用场景，旨在帮助开发者提升技能并拓宽视野。下面，我们将详细探讨这些经典案例可能涵盖的知识点。 1. **DOM操作**：...
Web Api使用详解（全部实例讲解，可直接运行看效果）
08-24
本资源对Web Api中的常用的POST\DELETE\PUT\GET动作方法进行了实例演示。 示例代码中配备了详细和全面的讲解。让用户参照实例快速掌握Web Api在MVC中的使用。此外，对增删改部份还结合了三层和EF进行演示。 1.使用之前，需要更改主页入口链接的主机号及端口号为本机。 2.在config中更改字符连接串的主机名。
WebAPI编写案例
04-20
WebAPI编写案例，代码全面详细，易用性强，对于初学者很有帮助
学习.net web api开发的好例子
02-02
学习.net web api开发的好例子，采用的是.net环境下的web mvc开发简单的api，典型的MVC架构，适合初学者
WebApi-示例-简单版.rar
12-27
WebApi-示例-简单版
WebAPI编程资料WebAPI 案例 代码 素材 笔记 作业资料.zip
08-04
WebAPI编程资料WebAPI 案例 代码 素材 笔记 作业资料，学习资料，教程 Web APIs-day01 Web APIs-day02 Web APIs-day03 Web APIs-day04 Web APIs-day05 Web APIs-day06 Web APIs-day07 2-案例 3-素材 4-笔记 5-作业 day01_WebAPIs.ppt 随堂测试题 01-getElementById获取元素.html 02-getElementsByTagName获取某些元素.html 03-H5新增获取元素方式(1).html 04-获取特殊元素.html 05-事件三要素.html 06-执行事件步骤.html 07-操作元素之改变元素内容.html 08-innerText和innerHTML的区别.html 09-操作元素之修改元素属性.html 10-分时问候并显示不同图片案例.html 11-操作元素之表单属性设置.html 12-仿京东显示隐藏密码.html 13-操作元素之修改样式属性.html 14-关闭淘宝二维码案例.html 15-循环精灵图.html 16-显示隐藏文本框内容.html 17-通过className更改元素样式.html 18-仿新浪注册页面.html images 作业-开关灯案例.html
WebApi经典案例,常用编程思想
weixin_40630195的博客
12-25 795
经典案例,,小米搜索框,购物车加减,图片切换,排他思想,突出展示,开关思想,全选全不选及反选,心案例(tab栏切换)
c# 进阶之 WebAPI
weixin_30752377的博客
06-17 1387
REST是设计风格而不是标准。 webapi有自己的路由。 webservice和wcf的协议都是soap协议，数据的序列化和反序列化都是soap的格式。而webapi是Json的数据传递 webapi的优点有哪些？ (1)非常适合做http的请求，前端与webapi交互特别方便 (2)webapi更轻量因为使用的json数据来传递。 (3)webapi很多时候是给前端提供数...
[.net core] - webapi 简单例子 (一)
千里走单骑 的博客
12-02 1147
IDE: VS2017 一. 创建项目 [文件]->[新建项目] 选择 ASP.NET Core web 应用程序 选择API， 默认.net core 2.2 【为HTTPS配置】先去掉勾选。 这里就创建完项目了，直接运行，可以看到默认的API接口 二，简单自定义 1. 修改路由 打开Controllers ，可以看到默认的API接口定义 2个GET 1个post 1个PUT 1个Delete， 这里可以修改默认路由，原来是"api/[cont...
WebApi 调用例子
weixin_30468137的博客
06-01 152
以保存用户为例： api接口： [HttpPost] public JObject SaveUser([FromBody]T_Sys_User model) { TaskResult result = new UserManageBusiness().SaveUser(model); ...
Ajax经典案例大全：实战提升Web开发效率
《Ajax经典案例开发大全》是一本由王嘉编著的专业书籍，针对Ajax技术在Web开发中的广泛应用进行了深入研究和总结。该书特别适合Web网站开发人员、Ajax技术爱好者以及有一定经验的初、中级开发人员阅读，旨在帮助他们...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值