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

Web程序设计-实验05 DOM与BOM编程

题目

【实验主题】

影视网站后台影视记录管理页设计

【实验任务】

1、浏览并分析多个网站后台的列表页面、编辑页面(详见参考资源,建议自行搜索更多后台页面)的主要元素构成和版面设计,借鉴并构思预期效果。

2、新建 index.html文件,合理运用HTML标记编写2个单元:[影视记录列表]、[记录编辑表单]。

1)[影视记录列表]建议用表格<table>系列标记组织,字段至少包含海报(显示缩略图)、影视名称、影视类别等,其余字段自行设计;同时包含 [操作]列,此列需有 [编辑]、[删除]2个超链接或者按钮。

2)[记录编辑表单]除了包含列表中的字段,还可添加剧情介绍等字段,同时包含 [保存]按钮。

3)在页面的恰当位置添加1个 [添加]超链接或者按钮。

4)页面初始打开时,列表应已经有至少 3条记录。

5)合理编写CSS样式,对列表、表单美化排版。

3、新建 .js文件,实现影视记录的增删改功能。

1)单击 [影视记录列表]某记录的 [删除],将显示确认对话框,得到确认后删除表中对应记录。

2)单击 [影视记录列表]某记录的 [编辑],表中对应记录的各字段值将填写到 [记录编辑表单]相应表单域;单击 [保存]按钮后将首先做字段非空等数据合规性校验,校验不通过则提示更正,通过则更新表中对应记录。

3)单击 [添加],清空 [记录编辑表单]各表单域;单击 [保存]按钮后将首先做字段非空等数据合规性校验,校验不通过则提示更正,通过则添加至列表。

4、(选做)与后端服务器数据同步。

1)在页面的恰当位置添加 [同步]和 [刷新]超链接或者按钮。

2)单击 [同步],以Ajax方式将列表全部记录同步至后端服务器。

提示1:Ajax工具集见下面的【实验提示】说明。

提示2:除了appKey参数,其余自定义参数建议尝试 post方式提交。

3)单击 [刷新],将刷新(重新加载)页面;编写页面初始化事件处理函数,以Ajax方式从后端获取数据,并呈现至 [影视记录列表]。

window.οnlοad=function(){

  //todo: 以Ajax方式从后端获取数据,初始化 [影视记录列表]

};

效果图展示

文件内容

index.html文件

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>后台影视记录管理</title><link rel="stylesheet" href="style.css" /><script src="script.js"></script></head><body><div class="recordlist"><h1>影视记录列表</h1><table id="myTable"><tr><th>海报</th><th>影视名称</th><th>影视类型</th><th>影视主演</th><th>简介</th><th>操作</th></tr><tr><td><img class="poster" src="1.png" alt="星际穿越" /></td><td>星际穿越</td><td>剧情/科幻/冒险</td><td>马修·麦康纳 / 安妮·海瑟薇 / 杰西卡·查斯坦 / 麦肯吉·弗依 / 卡西·阿弗莱克 / 迈克尔·凯恩 / 马特·达蒙 / 提莫西·查拉梅 / 艾伦·伯斯汀</td><td><textarea name="description" cols="25" rows="15">近未来的地球黄沙遍野,小麦、秋葵等基础农作物相继因枯萎病灭绝,人类不再像从前那样仰望星空,放纵想象力和灵感的迸发,而是每日在沙尘暴的肆虐下倒数着所剩不多的光景。在家务农的前NASA宇航员库珀(马修·麦康纳 Matthew McConaughey 饰)接连在女儿墨菲(麦肯吉·弗依 Mackenzie Foy 饰)的书房发现奇怪的重力场现象,随即得知在某个未知区域内前NASA成员仍秘密进行一个拯救人类的计划。多年以前土星附近出现神秘虫洞,NASA借机将数名宇航员派遣到遥远的星系寻找适合居住的星球。在布兰德教授(迈克尔·凯恩 Michael Caine 饰)的劝说下,库珀忍痛告别了女儿,和其他三名专家教授女儿艾米莉亚·布兰德(安妮·海瑟薇 Anne Hathaway 饰)、罗米利(大卫·吉雅西 David Gyasi 饰)、多伊尔(韦斯·本特利 Wes Bentley 饰)搭乘宇宙飞船前往目前已知的最有希望的三颗星球考察。他们穿越遥远的星系银河,感受了一小时七年光阴的沧海桑田,窥见了未知星球和黑洞的壮伟与神秘。在浩瀚宇宙的绝望而孤独角落,总有一份超越了时空的笃定情怀将他们紧紧相连……</textarea></td><td><a href="#" class="edit-btn" onclick="editRow(this)">编辑</a><a href="#" onclick="deleteRow(this)">删除</a></td></tr><tr><td><img class="poster" src="2.png" alt="这个杀手不太冷" /></td><td>这个杀手不太冷</td><td>剧情/动作/ 犯罪</td><td>让·雷诺 / 娜塔莉·波特曼 / 加里·奥德曼 / 丹尼·爱罗 / 彼得·阿佩尔 / 迈克尔·巴达鲁科 / 艾伦·格里尼 / 伊丽莎白·瑞根 / 卡尔·马图斯维奇 / 弗兰克·赛格 / 麦温</td><td><textarea name="description" cols="25" rows="15">里昂(让·雷诺饰)是名孤独的职业杀手,受人雇佣。一天,邻居家小姑娘马蒂尔达(纳塔丽·波特曼饰)敲开他的房门,要求在他那里暂避杀身之祸。原来邻居家的主人是警方缉毒组的眼线,只因贪污了一小包毒品而遭恶警(加里·奥德曼饰)杀害全家的惩罚。马蒂尔达得到里昂的留救,幸免于难,并留在里昂那里。里昂教小女孩使枪,她教里昂法文,两人关系日趋亲密,相处融洽。女孩想着去报仇,反倒被抓,里昂及时赶到,将女孩救回。混杂着哀怨情仇的正邪之战渐次升级,更大的冲突在所难免……</textarea></td><td><a href="#" class="edit-btn" onclick="editRow(this)">编辑</a><a href="#" onclick="deleteRow(this)">删除</a></td></tr><tr><td><img class="poster" src="3.png" alt="美丽人生" /></td><td>美丽人生</td><td>剧情/喜剧/爱情/战争</td><td>罗伯托·贝尼尼 / 尼可莱塔·布拉斯基 / 乔治·坎塔里尼 / 朱斯蒂诺·杜拉诺 / 赛尔乔·比尼·布斯特里克 / 玛丽萨·帕雷德斯 / 霍斯特·布赫霍尔茨 / 利迪娅·阿方西 /</td><td><textarea name="description" cols="25" rows="15">犹太青年圭多(罗伯托·贝尼尼)邂逅美丽的女教师多拉(尼可莱塔·布拉斯基),他彬彬有礼的向多拉鞠躬:“早安!公主!”。历经诸多令人啼笑皆非的周折后,天遂人愿,两人幸福美满的生活在一起。然而好景不长,法西斯政权下,圭多和儿子被强行送往犹太人集中营。多拉虽没有犹太血统,毅然同行,与丈夫儿子分开关押在一个集中营里。聪明乐天的圭多哄骗儿子这只是一场游戏,奖品就是一辆大坦克,儿子快乐、天真的生活在纳粹的阴霾之中。尽管集中营的生活艰苦寂寞,圭多仍然带给他人很多快乐,他还趁机在纳粹的广播里问候妻子:“早安!公主!”法西斯政权即将倾覆,纳粹的集中营很快就要接受最后的清理,圭多编给儿子的游戏该怎么结束?他们一家能否平安的度过这黑暗的年代呢?</textarea></td><td><a href="#" class="edit-btn" onclick="editRow(this)">编辑</a><a href="#" onclick="deleteRow(this)">删除</a></td></tr></table></div><div class="editlist"><h1>记录编辑表单(缩小页面更方便)</h1><div class="form">海报:<select name="poster"><option value="1.png" style="width: 100px;">星际穿越</option><option value="2.png" style="width: 100px;">这个杀手不太冷</option><option value="3.png" style="width: 100px;">美丽人生</option><option value="4.png" style="width: 100px;">绿皮书</option><option value="5.png" style="width: 100px;">让子弹飞</option><option value="6.png" style="width: 100px;">重庆谈判</option><option value="7.png" style="width: 100px;">海棠依旧</option><option value="8.png" style="width: 100px;">古田军号</option></select> <br />影视名称:<input type="text" name="filmname"> <br />影视类型:<input type="text" name="category"> <br />影视主演:<input type="text" name="actors"> <br />简介:<textarea name="description111" cols="40" rows="20"></textarea> <br /><button id="alter" onclick="saveChanges()">保存</button><button id="add">添加</button><button id="clearforM" onclick="clearForm()">清空</button></div></div><script>//添加记录document.getElementById("add").addEventListener("click", function() {var poster = document.getElementsByName("poster")[0].value;var filmname = document.getElementsByName("filmname")[0].value;var category = document.getElementsByName("category")[0].value;var actors = document.getElementsByName("actors")[0].value;var description = document.getElementsByName("description111")[0].value;if (!poster || !filmname.trim() || !category.trim() || !actors.trim() || !description.trim()) {alert("请填写完整内容!");return;}var table = document.getElementById("myTable");var newRow = table.insertRow(-1);var cell1 = newRow.insertCell(0);var cell2 = newRow.insertCell(1);var cell3 = newRow.insertCell(2);var cell4 = newRow.insertCell(3);var cell5 = newRow.insertCell(4);var cell6 = newRow.insertCell(5);cell1.innerHTML = '<img class="poster" src="' + poster + '" alt="' + filmname + '" />';cell2.textContent = filmname;cell3.textContent = category;cell4.textContent = actors;cell5.innerHTML = '<textarea name="description" cols="25" rows="15">' + description + '</textarea>';cell6.innerHTML ='<a href="#" class="edit-btn" onclick="editRow(this)">编辑</a> <a href="#" onclick="deleteRow(this)">删除</a>';alert("成功添加记录!");});</script></body>
</html>

style.css文件

* {margin: 0;padding: 0;/* 清除用户代理样式 */
}.recordlist {float: left;/* 浮动,缩小页面能够方便操作 */margin: 20px;font-size: 20px;
}.editlist {margin: 20px;float: left;/* 浮动,缩小页面能够方便操作 */
}h1 {text-align: center;margin-top: 10px;margin-bottom: 20px;
}table {margin: 0 auto;font-family: Arial, Helvetica, sans-serif;border-collapse: collapse;
}td,
th {width: 200px;text-align: center;border: 1px lightpink solid;z'z' z'z' z'z' z'zpadding: 10px;
}img {width: 180px;margin: 0 auto;display: block;
}.form {text-align: center;margin-bottom: 30px;font-size: 30px;
}.form select {font-size: 30px;margin-bottom: 30px;
}.form input {margin-right: 10px;margin-bottom: 30px;font-size: 30px;
}.form button {margin-top: 30px;font-size: 30px;
}

script.js文件

function deleteRow(btnDelete) {const confirmDelete = confirm("你确定要删除这条记录?");if (confirmDelete) {//获得被单击按钮所在行的索引var currentIndex = btnDelete.parentNode.parentNode.rowIndex;var myTable = document.getElementById("myTable");myTable.deleteRow(currentIndex);}
}function editRow(editButton) {var row = editButton.parentNode.parentNode;var tableCells = row.getElementsByTagName("td");document.getElementsByName("poster")[0].value = tableCells[0].getElementsByTagName("img")[0].src.match(/(\d\.png)$/)[0];document.getElementsByName("filmname")[0].value = tableCells[1].textContent;document.getElementsByName("category")[0].value = tableCells[2].textContent;document.getElementsByName("actors")[0].value = tableCells[3].textContent;document.getElementsByName("description111")[0].value = tableCells[4].getElementsByTagName("textarea")[0].value;document.getElementById("alter").setAttribute("data-current-index", row.rowIndex);
}function saveChanges() {var poster = document.getElementsByName("poster")[0].value;var filmname = document.getElementsByName("filmname")[0].value;var category = document.getElementsByName("category")[0].value;var actors = document.getElementsByName("actors")[0].value;var description = document.getElementsByName("description111")[0].value;if (!poster || !filmname.trim() || !category.trim() || !actors.trim() || !description.trim()) {alert("请填写完整内容!");return;}var index = document.getElementById("alter").getAttribute("data-current-index");if (index) {var myTable = document.getElementById("myTable");var row = myTable.rows[index];row.cells[0].getElementsByTagName("img")[0].src = poster;row.cells[1].textContent = filmname;row.cells[2].textContent = category;row.cells[3].textContent = actors;row.cells[4].getElementsByTagName("textarea")[0].value = description;}document.getElementById("alter").removeAttribute("data-current-index");alert("确定要更新记录吗?");
}function clearForm() {var formElements = document.querySelectorAll('.form input[type="text"], .form textarea, .form select');formElements.forEach(function(element) {element.value = '';});
}

图片文件

1.png

2.png

3.png

4.png

5.png

6.png

7.png

8.png

相关文章:

Web程序设计-实验05 DOM与BOM编程

题目 【实验主题】 影视网站后台影视记录管理页设计 【实验任务】 1、浏览并分析多个网站后台的列表页面、编辑页面&#xff08;详见参考资源&#xff0c;建议自行搜索更多后台页面&#xff09;的主要元素构成和版面设计&#xff0c;借鉴并构思预期效果。 2、新建 index.h…...

Window系统安装Docker

因为docker只适合在liunx系统上运行&#xff0c;如果在window上安装的话&#xff0c;就需要开启window的虚拟化&#xff0c;打开控制面板&#xff0c;点击程序&#xff0c;在程序和功能中可以看到启动和关闭window功能&#xff0c;点开后&#xff0c;找到Hyper-V&#xff0c;Wi…...

RabbitMQ不完整的笔记

同步的不足 1、拓展性差&#xff0c;当要添加功能时&#xff0c;需要在原来的功能代码上做修改&#xff0c;高耦合。 2、性能下降&#xff0c;调用者需要等待服务提供者执行完返回结果后&#xff0c;才能继续向下执行 3、级联失败&#xff0c;由于我们是基于OpenFeign调用交易…...

微软Edge浏览器深度解析:功能、同步、隐私与安全

微软Edge浏览器是微软公司开发的一款网页浏览器,它基于Chromium内核,提供了快速、安全和兼容性良好的网页浏览体验。以下是关于微软Edge浏览器的详细信息和使用指南: 微软Edge浏览器的主要特点: 1. 基于Chromium内核: 渲染引擎:Chromium内核是基于开源项目Blink的,它…...

网络性能测试工具:iperf3介绍

文章目录 前言一、iperf3 的安装和使用下载和安装参数说明 二、iperf3 测试服务端启动客户端启动服务端输出反向测试客户端服务端 前言 新接触的网络环境如何评估网络带宽和吞吐量呢&#xff0c;有的项目没有对业务流量进行合理规划&#xff0c;服务或者中间件出口带宽经常有被…...

scp:Linux系统本地与远程文件传输命令

scp 是Linux系统中用于在本地主机和远程主机之间进行文件传输的命令。 详细说明&#xff1a; scp 命令用于安全地将文件从一个主机传输到另一个主机&#xff0c;所有传输数据都是加密的。语法&#xff1a; scp [参数] [源文件路径] [目标主机:目标路径] 参数说明&#xff1a…...

python基础(习题、资料)

免费提取资料&#xff1a; 练习、资料免费提取。持续更新迅雷云盘https://pan.xunlei.com/s/VNz6kH1EXQtK8j-wwwz_c0k8A1?pwdrj2x# 本文为Python的进阶知识合辑&#xff0c;包括列表&#xff08;List&#xff09;、元组&#xff08;Tuple&#xff09;、字典&#xff08;Dic…...

shell脚本免交互

shell脚本的编写一方面为了减少我们命令的输入&#xff0c;另一方面也可以进行简单的自动化运行&#xff0c;其中为了实现自动化过程&#xff0c;一个很重要的点就是免交互&#xff0c;本篇文章跟大家简单分享两个常用的免交互的方法。 Here Document Here document 通过内联重…...

WPF学习笔记:给文字添加线性渐变效果

<TextBox Text"XXX信息管理系统" VerticalAlignment"Center" Background"Transparent" HorizontalAlignment"Center" FontSize"35" FontWeight"Normal"> <TextBox.Effect> <…...

Fully Convolutional Networks for Semantic Segmentation--论文笔记

论文笔记 资料 1.代码地址 2.论文地址 https://arxiv.org/abs/1411.4038 3.数据集地址 论文摘要的翻译 卷积网络是强大的视觉模型&#xff0c;可以产生特征层次结构。我们表明&#xff0c;卷积网络本身&#xff0c;经过端到端&#xff0c;像素对像素的训练&#xff0c;在…...

Camworks编程怎么样:深度解析其四大特点、五大应用领域、六大优势与七大挑战

Camworks编程怎么样&#xff1a;深度解析其四大特点、五大应用领域、六大优势与七大挑战 Camworks编程&#xff0c;作为计算机辅助制造&#xff08;CAM&#xff09;领域的一款重要软件&#xff0c;近年来在制造业中得到了广泛的应用。那么&#xff0c;Camworks编程究竟怎么样呢…...

【Linux】操作系统之冯诺依曼体系

&#x1f389;博主首页&#xff1a; 有趣的中国人 &#x1f389;专栏首页&#xff1a; Linux &#x1f389;其它专栏&#xff1a; C初阶 | C进阶 | 初阶数据结构 小伙伴们大家好&#xff0c;本片文章将会讲解 操作系统中 冯诺依曼体系 的相关内容。 如果看到最后您觉得这篇文…...

c++ QT 实现QMediaPlayer播放音频显示音频级别指示器

文章目录 效果图概述代码总结 效果图 概述 QMediaPlayer就不介绍了&#xff0c;就提供了一个用于播放音频和视频的媒体播放器 QAudioProbe 它提供了一个探针&#xff0c;用于监控音频流。当音频流被捕获或播放时&#xff0c;QAudioProbe 可以接收到音频数据。这个类在需要访问…...

失之毫厘差之千里之load和loads

起源 最近在读pandas库的一些文档的时候&#xff0c;顺便也会将文档上的一些demo在编辑器中进行运行测试&#xff0c;其中在读到pandas处理Json数据这一节的时候&#xff0c;我还是像往常一样&#xff0c;将文档提供的demo写一遍&#xff0c;结果在运行的时候&#xff0c;直接…...

element ui在移动端的适配问题

element ui在移动端的适配问题 问题1&#xff1a; 给el-table表头添加背景色&#xff0c;使用以下代码 :header-row-style“{ background: ‘linear-gradient(90deg, #0079FA 0%, #00C7DD 100%)’ }” 在安卓手机上显示正常&#xff0c;在ios手机上显示背景色添加到每一个th中…...

堆排序详细理解

目录 一、前备知识 二、建堆 2.2.1 向上调整算法建堆 2.2.2 向下调整算法建堆 三、排序 3.1 常见问题 3.2 思路 3.3 源码 一、前备知识 详细图解请点击&#xff1a;二叉树的顺序实现-堆-CSDN博客 本文只附上向上/向下调整算法的源码 //交换 void Swap(int* p, int* …...

RK3588+FPGA+AI高性能边缘计算盒子,应用于视频分析、图像视觉等

搭载RK3588&#xff08;四核 A76四核 A55&#xff09;&#xff0c;CPU主频高达 2.4GHz &#xff0c;提供1MB L2 Cache 和 3MB L3 &#xff0c;Cache提供更强的 CPU运算能力&#xff0c;具备6T AI算力&#xff0c;可扩展至38T算力。 产品规格 系统主控CPURK3588&#xff0c;四核…...

07-操作元素(键盘和鼠标事件)

在前面的文章中重点介绍了一些元素的定位方法&#xff0c;定位到元素后&#xff0c;就需要操作元素了。本篇总结了web页面常用的一些操作元素方法&#xff0c;可以统称为行为事件。 一、简单操作 点击按钮&#xff08;鼠标左键&#xff09;&#xff1a;click()清空输入框&…...

3389,为了保障3389端口的安全,我们可以采取的措施

3389端口&#xff0c;作为远程桌面协议&#xff08;RDP&#xff09;的默认端口&#xff0c;广泛应用于Windows操作系统中&#xff0c;以实现远程管理和控制功能。然而&#xff0c;正因为其广泛使用&#xff0c;3389端口也成为许多潜在安全威胁的入口。因此&#xff0c;确保3389…...

Java集合【超详细】2 -- Map、可变参数、Collections类

文章目录 一、Map集合1.1 Map集合概述和特点【理解】1.2 Map集合的基本功能【应用】1.3 Map集合的获取功能【应用】1.4 Map集合的两种遍历方式 二、HashMap集合2.1 HashMap集合概述和特点【理解】2.2 HashMap的组成、构造函数2.3 put、查找方法2.4 HashMap集合应用案例【应用】…...

最佳 Mac 数据恢复:恢复 Mac 上已删除的文件

尝试过许多 Mac 数据恢复工具&#xff0c;但发现没有一款能达到宣传的效果&#xff1f;我们重点介绍最好的 Mac 数据恢复软件 没有 Mac 用户愿意担心数据丢失&#xff0c;但您永远不知道什么时候会发生这种情况。无论是意外删除 Mac 上的重要文件、不小心弄湿了 Mac、感染病毒…...

芋道系统,springboot+vue3+mysql实现地址的存储与显示

1.效果图 2.前端实现&#xff1a; <el-form-item label"地址" prop"entrepriseAddress"><el-cascaderv-model"formData.entrepriseAddress"size"large":options"region"/></el-form-item> //导入组件 im…...

【C++】C++11新特性:列表初始化、声明、新容器、右值引用、万能引用和完美转发

目录 一、列表初始化 1.1 { } 初始化 1.2 std::initializer_list 二、声明 2.1 auto 2.2 decltype 2.3 nullptr 三、新容器 四、右值引用和移动语义 4.1 左值和左值引用 4.2 右值和右值引用 4.3 左值引用与右值引用比较 4.4 右值引用使用场景和意义&#xff1a;移…...

【IB Protocal Serial--WQE】

IB Protocal Serial--WQE 1 Intro1.1 What1.2 IBA WQE 本系列文章介绍RDMA技术的具体实现–InfiniBand Protocal&#xff1b; Introduce the features, capalities,components, and elements of IBA. the principles of operation. 1 Intro 1.1 What 理解IB协议下面这三句话对…...

C++ 混合运算的类型转换

一 混合运算和隐式转换 257 整型2 浮点5 行吗&#xff1f;成吗&#xff1f;中不中&#xff1f; C 中允许相关的数据类型进行混合运算。 相关类型。 尽管在程序中的数据类型不同&#xff0c;但逻辑上进行这种运算是合理的相关类型在混合运算时会自动进行类型转换&#xff0c;再…...

线性时间选择

给定线性序集中n个元素和一个整数k&#xff0c;1≤k≤n&#xff0c;要求找出这n个元素中第k小的元素 #include<iostream> #include<cstdlib> #include<time.h> using namespace std; int a[100]; int Random(int left,int right) {srand(time(NULL));return …...

【对算法期中卷子的解析和反思】

一、程序阅读并回答问题&#xff08;共30分&#xff09; #include<cstdio>#include<cstring>#include<iostream>using namespace std;char chess[10][10];int sign[10];int n, k, ans;void dfs(int x, int k) { if (k 0){ans;return; } if (xk-1 >…...

sudo apt update sudo: apt: command not found

CentOS或RHEL&#xff08;Red Hat Enterprise Linux&#xff09;系统上&#xff0c;包管理器是yum或dnf&#xff0c;而不是apt。您可以使用yum或dnf来安装软件包。以下是如何在CentOS或RHEL上安装Git的详细步骤&#xff1a; 1. 使用yum安装Git 首先&#xff0c;更新软件包列表&…...

ios:文本框默认的copy、past改成中文复制粘贴

问题 ios 开发&#xff0c;对于输入框的一些默认文案展示&#xff0c;如复制粘贴是英文的&#xff0c;那么如何改为中文的呢 解决 按照路径找到这个文件 ios/项目/Info.plist&#xff0c;增加 <key>CFBundleAllowMixedLocalizations</key> <true/> <…...

Qt moc系统的黑魔法?

Qt的元对象系统&#xff08;Meta-Object System&#xff09;是Qt框架的核心功能之一&#xff0c;为C语言增加了一些动态特性&#xff0c;借助元对象系统Qt可以实现以下功能 信号与槽机制&#xff08;Signals and Slots&#xff09;运行时类型信息&#xff08;Run-Time Type In…...