当前位置： 首页 > news >正文

html+CSS+js部分基础运用20

news 2025/9/14 17:04:38
  • 根据下方页面效果如图1所示，编写程序，代码放入图片下方表格内

    

图1.效果图

<!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>

    <script src="vue.js"></script>

</head>

<body>

    <div id="app1">

        <div>

            <button type="button" v-on:click="a1()">{{num}}文字</button>

            <p v-if="flag">考试时沉着冷静认真，易得高分</p>

           

        </div>

       

    </div>

    <script>

        new Vue({

            el:'#app1',

            data:{

                flag:true,

                num:"隐藏"

            },

            methods:{

                a1() {  

                    if(this.flag)this.num="显示"

                    else this.num="隐藏"          

                    this.flag = (this.flag) ? false : true

             

                }

               

            }

        })

    </script>

</body>

</html>

  • 根据下方页面效果图2所示，编写程序，代码放入图片下方表格内

图2.页面效果图

<!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>

    <script src="vue.js"></script>

</head>

<body>

    <div id="app1">

        <div>

            <button type="button" v-on:click="a1()">a+1</button>

            <button type="button" v-on:click="a2()">b+1</button>

            <p >number+a={{number+a}}</p>

            <p >number+b={{number+b}}</p>

           

        </div>

       

    </div>

    <script>

        new Vue({

            el:'#app1',

            data:{

                a:28,

                b:28,

                number:2,

            },

            methods:{

                a1() {  

                    this.a=this.a+1

                },

                a2() {  

                    this.b=this.b+1

                }

            }

        })

    </script>

</body>

</html>

三、循环输出没有报道的学生名字。其中，四名学生小明、小红、小华、小思，仅小华已报道。输出效果如图3所示。

图3.效果图

代码填写在下方表格内。

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>学生</title>

<style>

    .item{

        text-align: center;

}

</style>

    <script src="vue.js"></script>

</head>

<body>

<div id="app1">

    <div class="item">

        <h3><span>没有报道的学生名单:</span></h3>

          <div class="item" v-for="student in students">

              <li><span  v-if= student.active>{{student.name}}</span></li>

          </div>

    </div>

</div>

<script type="text/javascript">

var vm = new Vue({

    el:'#app1',

    data:{

        students : [{

            name : '小明',

            active : true

        },{

            name : '小红',

            active : true

        },{

            name : '小思',

            active : true

        },{

            name : '小华',

            active : false

        }]

    }

})

</script>

</body>

</html>



 

四、设计一个动态表格，可以手动增加、删除数据。效果如图4所示。

实现要求（不需要考虑样式）：

（1）数据的添加使用双向数据绑定，点击新增可以把相关数据添加到信息表格末尾；

（2）点击删除可以删掉该行发布信息；

（3）序号根据数组索引处理获得；

图4-1 页面初始效果

图4-2 点击新增按钮发表格中添加新填入的信息

图4-3 点击4-1中序号1的删除之后页面效果

<!-- vue-4-1.html -->

<!DOCTYPE html>

<html lang="en">

    <head>

        <meta charset="UTF-8">

        <title>嘻嘻嘻</title>

        <style type="text/css">

            .div1 {

                margin: 0 auto;

                width: 950px;

                border: 1px dashed #55ed89;

            }

            table {

                border: 1px solid #b96c42;

                text-align: center;

                width: 950px;

                border-collapse: collapse;

            }

            h5 {

                text-align: center;

                color: #00ccc5;

                padding: 15px;

                background: #AFAFAF;

                font-size: 28px;

                height:58px;

            }

            input {

                border-radius: 8px;

                width: 140px;

                height: 35px;

                border:1px dashed #001a80;

            }

        </style>

        <script type="text/javascript" src="vue.js"></script>

    </head>

    <body>

        <div id="vue41">

            <div class="div1">

                <p>

                    <label> <input type="text" placeholder="发布内容" v-model="name"> </label>

                    <label> <input type="text" placeholder="发布人" v-model="author"> </label>

                    <label><input type="text" placeholder="发布时间" v-model="press"> </label>

                    <button @click="add">新增</button><br>

                </p>

                <table border="1">

                    <thead>

                        <tr>

                            <th>序号</th>

                            <th>标题</th>

                            <th>发布人</th>

                            <th>发布时间</th>

                            <th>操作</th>

                        </tr>

                    </thead>

                    <tbody>

                        <tr v-for="(newList,index) in newLists" v-bind:key="newList.id">

                            <td>{{index+1}}</td>

                            <td>{{newList.name}}</td>

                            <td>{{newList.author}}</td>

                            <td>{{newList.press}}</td>

                            <td width="15%">

                            <span @click="deletel(newList.id,index)">删除</span></td>

                        </tr>

                    </tbody>                

                </table>

            </div>

        </div>

        <script>

            var vm = new Vue({

                el: '#vue41',

                data: {

                    id: '',

                    name: '',

                    press:'',

                    author:'',

                    newLists: [{

                            id: 11,

                            name: '招聘前端工程师',

                            author: '关羽',

                            press: '2020-08-10',

                        },

                        {

                            id: 12,

                            name: '招聘PHP工程师',

                            author: '张飞',

                            press: '2020-08-15',

                        },

                    ]

                },

                methods: {

                    add() {

                            this.newLists.push({

                            id:this.id,

                            name:this.name,

                            press:this.press,

                            author:this.author,

                        })  

                    },

                    deletel : function(id,i) {

                            this.newLists.splice(i,1);

                        },

                }

            })

        </script>

    </body>

</html>

相关文章：

html+CSS+js部分基础运用20

根据下方页面效果如图1所示&#xff0c;编写程序&#xff0c;代码放入图片下方表格内 图1.效果图 <!DOCTYPE html> <html lang"en"> <head> <meta charset"UTF-8"> <meta http-equiv"X-UA-Compatible" conte…...

编程日记 2024/6/11 10:20:14

ISO 19115-2:2019 附录C XML 模式实现

C.1 XML 模式 本文件中定义的 UML 模型的 XML 模式在 ISO/TS 19115-3 中定义的适当 XML 命名空间中提供。新增内容包括&#xff1a; 命名空间前缀模式文件名Metadata for ACquisition (mac)acquisitionInformationImagery.xsdMetadata for Resource Content (mrc)contentInfo…...

编程日记 2024/6/11 10:19:12

DevOps的原理及应用详解（一）

本系列文章简介&#xff1a; 在当今快速变化的商业环境中&#xff0c;企业对于软件交付的速度、质量和安全性要求日益提高。传统的软件开发和运维模式已经难以满足这些需求&#xff0c;因此&#xff0c;DevOps&#xff08;Development和Operations的组合&#xff09;应运而生&a…...

编程日记 2024/6/11 10:14:06

【冲刺秋招，许愿offer】第 三 天（水一天）

【冲刺秋招&#xff0c;许愿offer】第 二 天&#xff08;水一天&#xff09; 知识点牛客emo 知识点 今天端午&#xff0c;上午去摘杏下午理发&#xff0c;一天没咋看电脑。晚上刷刷LeetCode看看八股。 牛客 spring事务失效的情况 捕获到异常&#xff0c;自己手动处理 方法修…...

编程日记 2024/6/11 10:13:05

使用 C# 学习面向对象编程：第 6 部分

继承 亲爱的读者&#xff0c;继承意味着从源头继承一些东西。例如&#xff0c;儿子可以继承父亲的习惯。同样的概念也用于面向对象编程&#xff1b;它是 OOP 的第二大支柱。 继承允许创建一个新类&#xff0c;该新类继承另一个类或基类的属性&#xff0c;继承这些成员的类称为…...

编程日记 2024/6/11 10:12:03

分布式训练基础入门

1.单节点训练 单节点训练也会转换为等价的并行训练&#xff0c;如在GPU内同一wrap内的32个Thread执行同一指令&#xff0c;但处理不同的数据。 训练程序往往实现了一个多层神经网络的执行过程。该神经网络的执行由一个计算图&#xff08;Computational Graph&#xff09;表示。…...

编程日记 2024/6/11 10:11:02

AWS S3存储桶中如何下载文件

AWS S3存储桶中如何下载文件 1.单个下载 AWS S3 控制台提供了下载单个文件的功能&#xff0c;但是不支持直接在控制台中进行批量下载文件。您可以通过以下步骤在 AWS S3 控制台上下载单个文件&#xff1a; 　　1.1登录 AWS 管理控制台。 　　1.2转到 S3 服务页面。 　　1.3单击…...

编程日记 2024/6/11 10:10:01

「网络原理」三次握手四次挥手

&#x1f387;个人主页&#xff1a;Ice_Sugar_7 &#x1f387;所属专栏&#xff1a;计网 &#x1f387;欢迎点赞收藏加关注哦&#xff01; 三次握手&四次挥手 &#x1f349;连接管理&#x1f34c;三次握手&#x1f34c;意义&#x1f34c;四次挥手&#x1f34c;TCP 状态转换…...

编程日记 2024/6/11 10:09:00

第二十四章 SOAP 错误处理 - 发生故障时添加 WS-Addressing 标头元素

文章目录 第二十四章 SOAP 错误处理 - 发生故障时添加 WS-Addressing 标头元素%SOAP.Fault12.Code 属性SubcodeValue %SOAP.Fault12.Text 属性Textlang 发生故障时添加 WS-Addressing 标头元素 第二十四章 SOAP 错误处理 - 发生故障时添加 WS-Addressing 标头元素 %SOAP.Fault…...

编程日记 2024/6/11 10:07:58

CSS真题合集（一）

CSS真题合集&#xff08;一&#xff09; 1. 盒子模型1.1 盒子模型的基本组成1.2 盒子模型的实际大小1.3 盒子模型的两种类型1.4 设置盒子模型1.5 弹性盒子模型 2. BFC2.1 主要用途2.2 触发BFC的方法2.2 解决外边距的塌陷问题&#xff08;垂直塌陷&#xff09; 3. 响应式布局3.1…...

编程日记 2024/6/11 10:06:57

Golang | Leetcode Golang题解之第144题二叉树的前序遍历

题目&#xff1a; 题解&#xff1a; func preorderTraversal(root *TreeNode) (vals []int) {var p1, p2 *TreeNode root, nilfor p1 ! nil {p2 p1.Leftif p2 ! nil {for p2.Right ! nil && p2.Right ! p1 {p2 p2.Right}if p2.Right nil {vals append(vals, p1.V…...

编程日记 2024/6/11 10:05:56

离奇问题：java通过poi读取excel单元格的小数时会出错

问题 java通过poi读取excel单元格的小数时会出错&#xff0c;分析后发现是因为会损失精度。 处理的代码 /*** DataFormatter 直接new就行&#xff1a;DataFormatter df new DataFormatter();*/ private String getNumericCellValue(Cell cell, DataFormatter df) {String val…...

编程日记 2024/6/11 10:02:51

前端框架是什么

前端框架是预先编写好的JavaScript代码集合&#xff0c;旨在帮助开发者快速搭建Web应用程序的界面和交互逻辑。以下是一些常见的前端框架&#xff0c;按照字母顺序排列&#xff0c;并简要介绍其特点&#xff1a; Angular 由Google开发&#xff0c;原名AngularJS&#xff0c;后…...

编程日记 2024/6/11 10:01:50

Feign的动态代理如何配置

Feign 本身已经内置了动态代理的功能&#xff0c;它允许你声明一个接口&#xff0c;并通过这个接口来发送 HTTP 请求&#xff0c;而不需要你手动编写发送 HTTP 请求的代码。Feign 会为你创建这个接口的代理实现&#xff0c;并在运行时拦截对这些方法的调用&#xff0c;将它们转…...

编程日记 2024/6/11 9:59:48

ReactRouter——路由配置、路由跳转、带参跳转、新route配置项

目录 写在前面 (一)初步使用router 1.安装react-router-dom 2.创建router结构 3.嵌套路由 4.配置not found页面 (1)确切路由报错页面 (2)未配置路由报错页面 5.重定向 (二)路由跳转 1.组件跳转 2.NavLink 3.js跳转 (三)传递参数 1.searchParams(query)参数 2…...

编程日记 2024/6/11 9:55:43

异步处理耗时逻辑

在 Spring Boot 中实现 RESTful 接口的快速响应&#xff0c;同时在后台继续处理耗时逻辑&#xff0c;可以使用异步处理技术。以下是一个详细的示例&#xff0c;展示如何使用 Async 注解和 CompletableFuture 来实现这一需求。 使用 Async 注解 步骤 1&#xff1a;启用异步支持…...

编程日记 2024/6/11 9:54:41

Switch 之 配置SNMP

Description SNMP&#xff08;Simple Network Management Protocol&#xff0c;简单网络管理协议&#xff09;是一种用于网络管理的协议&#xff0c;它用于在网络中对设备进行监控和管理。 SNMP定义了一种管理框架&#xff0c;其中包括管理站、代理和管理信息库&#xff08;M…...

编程日记 2024/6/11 9:53:40

微软如何打造数字零售力航母系列科普13 - Prime Focus Technologies在NAB 2024上推出CLEAR®对话人工智能联合试点

Prime Focus Technologies在NAB 2024上推出CLEAR对话人工智能联合试点 彻底改变您与内容的互动方式&#xff0c;从内容的创建到分发 洛杉矶&#xff0c;2024年4月9日/PRNewswire/-媒体和娱乐&#xff08;M&E&#xff09;行业人工智能技术解决方案的先驱Prime Focus Techn…...

编程日记 2024/6/11 9:51:38

Nginx之正向代理配置示例和说明

一、NGINX正向代理功能简介 Nginx的正向代理功能允许局域网中的客户端通过代理服务器访问Internet资源。具体来说&#xff0c;Nginx作为一种流行的Web服务器和反向代理服务器&#xff0c;在正向代理方面的应用也相当实用。以下是其正向代理功能的几个关键点&#xff1a; 访问外…...

编程日记 2024/6/11 9:49:35

Linux文件与目录管理

#Linux系统基础 文件与目录管理 一、常用命令 文件、目录操作命令说明cd(cd …/ cd ~/ cd/ cd path)切换目录 cd ~等于 cd /rootls显示目录文件ls -l 或者 ll以详细信息的方式显示目录文件pwd查看当前工作目录cp &#xff08;-i -r&#xff09;复制文件或目录mkdir创建目录,…...

编程日记 2024/6/11 9:46:31

IDEA运行Tomcat出现乱码问题解决汇总

最近正值期末周&#xff0c;有很多同学在写期末Java web作业时&#xff0c;运行tomcat出现乱码问题&#xff0c;经过多次解决与研究&#xff0c;我做了如下整理&#xff1a; 原因&#xff1a; IDEA本身编码与tomcat的编码与Windows编码不同导致&#xff0c;Windows 系统控制台…...

编程新知 2025/9/14 9:18:09

地震勘探——干扰波识别、井中地震时距曲线特点

目录 干扰波识别反射波地震勘探的干扰波 井中地震时距曲线特点 干扰波识别 有效波&#xff1a;可以用来解决所提出的地质任务的波&#xff1b;干扰波&#xff1a;所有妨碍辨认、追踪有效波的其他波。 地震勘探中&#xff0c;有效波和干扰波是相对的。例如&#xff0c;在反射波…...

编程新知 2025/9/4 3:02:33

【Linux】shell脚本忽略错误继续执行

在 shell 脚本中&#xff0c;可以使用 set -e 命令来设置脚本在遇到错误时退出执行。如果你希望脚本忽略错误并继续执行&#xff0c;可以在脚本开头添加 set e 命令来取消该设置。 举例1 #!/bin/bash# 取消 set -e 的设置 set e# 执行命令&#xff0c;并忽略错误 rm somefile…...

编程新知 2025/9/11 15:27:32

【Oracle APEX开发小技巧12】

有如下需求&#xff1a; 有一个问题反馈页面&#xff0c;要实现在apex页面展示能直观看到反馈时间超过7天未处理的数据&#xff0c;方便管理员及时处理反馈。 我的方法&#xff1a;直接将逻辑写在SQL中&#xff0c;这样可以直接在页面展示 完整代码&#xff1a; SELECTSF.FE…...

编程新知 2025/9/13 15:30:49

PHP和Node.js哪个更爽?

先说结论&#xff0c;rust完胜。 php&#xff1a;laravel&#xff0c;swoole&#xff0c;webman&#xff0c;最开始在苏宁的时候写了几年php&#xff0c;当时觉得php真的是世界上最好的语言&#xff0c;因为当初活在舒适圈里&#xff0c;不愿意跳出来&#xff0c;就好比当初活在…...

编程新知 2025/9/14 7:59:52

CentOS下的分布式内存计算Spark环境部署

一、Spark 核心架构与应用场景 1.1 分布式计算引擎的核心优势 Spark 是基于内存的分布式计算框架&#xff0c;相比 MapReduce 具有以下核心优势&#xff1a; 内存计算&#xff1a;数据可常驻内存&#xff0c;迭代计算性能提升 10-100 倍&#xff08;文档段落&#xff1a;3-79…...

编程新知 2025/9/11 22:41:35

鸿蒙DevEco Studio HarmonyOS 5跑酷小游戏实现指南

1. 项目概述 本跑酷小游戏基于鸿蒙HarmonyOS 5开发&#xff0c;使用DevEco Studio作为开发工具&#xff0c;采用Java语言实现&#xff0c;包含角色控制、障碍物生成和分数计算系统。 2. 项目结构 /src/main/java/com/example/runner/├── MainAbilitySlice.java // 主界…...

编程新知 2025/8/19 13:48:59

USB Over IP专用硬件的5个特点

USB over IP技术通过将USB协议数据封装在标准TCP/IP网络数据包中&#xff0c;从根本上改变了USB连接。这允许客户端通过局域网或广域网远程访问和控制物理连接到服务器的USB设备&#xff08;如专用硬件设备&#xff09;&#xff0c;从而消除了直接物理连接的需要。USB over IP的…...

编程新知 2025/9/13 17:42:33

Angular微前端架构：Module Federation + ngx-build-plus (Webpack)

以下是一个完整的 Angular 微前端示例&#xff0c;其中使用的是 Module Federation 和 npx-build-plus 实现了主应用&#xff08;Shell&#xff09;与子应用&#xff08;Remote&#xff09;的集成。 &#x1f6e0;️ 项目结构 angular-mf/ ├── shell-app/ # 主应用&…...

编程新知 2025/6/15 10:41:11

【生成模型】视频生成论文调研

工作清单 上游应用方向&#xff1a;控制、速度、时长、高动态、多主体驱动 类型工作基础模型WAN / WAN-VACE / HunyuanVideo控制条件轨迹控制ATI~镜头控制ReCamMaster~多主体驱动Phantom~音频驱动Let Them Talk: Audio-Driven Multi-Person Conversational Video Generation速…...

编程新知 2025/9/9 8:40:47