网络攻防作业2——js实现文档控制

已于 2023-08-02 18:07:48 修改
阅读量409 收藏
点赞数 1
分类专栏： 网络攻防 文章标签： 前端 javascript html5
于 2022-09-11 21:46:01 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_51246603/article/details/126809906
版权

作业要求：
准备一个 Html文档,文档中至少包含一个三行数据的表格,若干按钮。要求文档在浏览器中用JavaScript实现以下操作:
1、点击按钮1，在<body>标签下添加< p ><img><a>各一个。 
2、点击按钮2，修改<p>中文字内容。
3、点击按钮3，修改<img>中图片。
4、点击按钮4，修改<a>链接文字及链接地址。
5、点击按钮5，删除表格中第二行数据。
6、点击按钮6，在表格中第一行位置,插入一行新数据。
7、点击按钮7，修改<p>中文字颜色及字体大小。
8、鼠标进入图片上方时，显示图片切换为其他不同图片;鼠标离开图片上方时，显示图片切换为原图片。

代码参考：

<!DOCTYPE html>
<html>

<head>

    <meta charset="utf-8">
    <title>作业2</title>
</head>

<body>
    <h1>作业2</h1>
    <h4>个人信息</h4>
    <table border="1" id="table1">
        <tr id="one">
            <td>姓名</td>
            <td>李昊</td>

        </tr>
        <tr id="two">
            <td>专业</td>
            <td>大数据</td>
        </tr>
        <tr id="three">
            <td>学号</td>
            <td>28</td>
        </tr>
    </table>
    <p>
        <button onclick="function1()">按钮1</button>
        <button onclick="function2()">按钮2</button>
        <button onclick="function3()">按钮3</button>
        <button onclick="function4()">按钮4</button>
        <button onclick="function5()">按钮5</button>
        <button onclick="function6()">按钮6</button>
        <button onclick="function7()">按钮7</button>
    </p>

    <script>
        function function1() {
            if (document.getElementById('pl')) {
                alert("您已添加过标签！")
            }
            else {
                var pl = document.createElement("p")//添加一个p标签
                document.body.appendChild(pl)//设置为body的子元素
                pl.id = 'pl'
                pl.innerHTML = '这是一段文字'
                var imgl = document.createElement("img")//添加一个img标签
                document.body.appendChild(imgl)
                imgl.id = 'imgl'
                imgl.src = "https://img0.baidu.com/it/u=1426941644,3128016499&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=333"
                imgl.border = "0"
                imgl.alt = "照片"
                imgl.width = "300"
                imgl.height = "230"
                // imgl.setAttribute("src", "https://img0.baidu.com/it/u=1426941644,3128016499&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=333")
                // imgl.setAttribute("border", "0")
                // imgl.setAttribute("alt", "照片")
                // imgl.setAttribute("width", "300")
                // imgl.setAttribute("height", "230")
                imgl.onmouseover = function () {
                    this.src = "https://img2.baidu.com/it/u=4063171612,2005873499&fm=253&fmt=auto&app=138&f=JPEG?w=700&h=391"
                }
                imgl.onmouseout = function () {
                    this.src = "https://img0.baidu.com/it/u=1426941644,3128016499&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=333"
                }
                var al = document.createElement("a")//添加一个a标签
                document.body.appendChild(al)
                al.id = 'al'
                al.href = "https://www.baidu.com/"
                al.target = "blank"
                // al.setAttribute("href", "https://www.baidu.com/")
                // al.setAttribute("target","blank")//target="blank"新建页打开
                al.innerHTML = "百度一下，你就知道"
            }

        }
        function function2() {
            var target = document.getElementById('pl')//通过id得到标签
            target.innerHTML = '这是修改后的文字';//修改文字
            // target.id = 'modify'//标记为修改
        }
        function function3() {
            var target = document.getElementById('imgl');
            target.src = "https://img2.baidu.com/it/u=4063171612,2005873499&fm=253&fmt=auto&app=138&f=JPEG?w=700&h=391"
            target.border = "0"
            target.alt = "照片"
            target.width = "300"
            itarget.height = "230"
            // target.setAttribute("border", "0")//修改属性
            // target.setAttribute("src", "https://img2.baidu.com/it/u=4063171612,2005873499&fm=253&fmt=auto&app=138&f=JPEG?w=700&h=391")
            // target.setAttribute("alt", "照片")
            // target.setAttribute("width", "300")
            // target.setAttribute("height", "230")
            // target.id='modify'
        }
        function function4() {
            var t = document.getElementById('al')
            t.href = "https://www.sxu.edu.cn/"
            t.target = "blank"
            // target.setAttribute("href", "https://www.sxu.edu.cn/")
            // target.setAttribute("target","blank")
            t.innerHTML = "中西会通，求真至善，登崇俊良，自强报国"
            // target.id='modify'
        }
        function function5() {
            // var target = document.getElementById('two')
            // target.remove()
            var target = document.getElementById('table1').rows[1];//获得第二行
            if (!target) {
                alert("只有一行了！")
            }
            else {
                target.remove()//删除第二行
            }
            // target.id='modify'
        }
        function function6() {
            var target = document.getElementById("table1")
            var tr1 = target.insertRow(0)//添加一行
            var td1 = tr1.insertCell(0)//添加第一列
            var td2 = tr1.insertCell(1)//添加第二列
            td1.innerHTML = "学校"//设置第一列数据
            td2.innerHTML = "SXU"//设置第二列数据
            // target.id='modify'
        }
        function changeColor() {
            return "rgba(" + parseInt(Math.random() * 256) + "," + parseInt(Math.random() * 256) + "," + parseInt(Math.random() * 256) + ",1)"
        }
        function function7() {
            var target = document.getElementById('pl')
            target.style.color = changeColor()//随机修改颜色
            target.style.fontSize = Math.random() * 100 + 'px'//随机修改字号
            // var target = document.getElementsByName('p')
            // for(i=1;i<target.length;i++){
            //     target[i].style.color = changeColor()//随机修改颜色
            //     target[i].style.fontSize = Math.random() * 50 + 'px'//随机修改字号
            // } 
            // target.id='pl'
        }
    </script>
</body>

</html>

还可以优化：

<!DOCTYPE html>
<html>

<head>

    <meta charset="utf-8">
    <title>作业2</title>
</head>

<body>
    <h1>作业2</h1>
    <h4>个人信息</h4>
    <table border="1" id="table1">
        <tr id="one">
            <td>姓名</td>
            <td>李昊</td>

        </tr>
        <tr id="two">
            <td>专业</td>
            <td>大数据</td>
        </tr>
        <tr id="three">
            <td>学号</td>
            <td>28</td>
        </tr>
    </table>
    <p>
        <button onclick="function1()">按钮1</button>
        <button onclick="function2()">按钮2</button>
        <button onclick="function3()">按钮3</button>
        <button onclick="function4()">按钮4</button>
        <button onclick="function5()">按钮5</button>
        <button onclick="function6()">按钮6</button>
        <button onclick="function7()">按钮7</button>
    </p>

    <script>
        function function1() {
            if (document.getElementById('pl')) {
                alert("您已添加过标签！")
            }
            else {
                var pl = document.createElement("p")//添加一个p标签
                document.body.appendChild(pl)//设置为body的子元素
                pl.id = 'pl'
                pl.innerHTML = '这是一段文字'
                var imgl = document.createElement("img")//添加一个img标签
                document.body.appendChild(imgl)
                imgl.id = 'imgl'
                imgl.src = "https://img0.baidu.com/it/u=1426941644,3128016499&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=333"
                imgl.border = "0"
                imgl.alt = "照片"
                imgl.width = "300"
                imgl.height = "230"
                // imgl.setAttribute("src", "https://img0.baidu.com/it/u=1426941644,3128016499&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=333")
                // imgl.setAttribute("border", "0")
                // imgl.setAttribute("alt", "照片")
                // imgl.setAttribute("width", "300")
                // imgl.setAttribute("height", "230")
                imgl.onmouseover = function () {
                    this.src = "https://img2.baidu.com/it/u=4063171612,2005873499&fm=253&fmt=auto&app=138&f=JPEG?w=700&h=391"
                }
                imgl.onmouseout = function () {
                    this.src = "https://img0.baidu.com/it/u=1426941644,3128016499&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=333"
                }
                var al = document.createElement("a")//添加一个a标签
                document.body.appendChild(al)
                al.id = 'al'
                al.href = "https://www.baidu.com/"
                al.target = "blank"
                // al.setAttribute("href", "https://www.baidu.com/")
                // al.setAttribute("target","blank")//target="blank"新建页打开
                al.innerHTML = "百度一下，你就知道"
            }

        }
        function function2() {
            var target = document.getElementById('pl')//通过id得到标签
            if (!target) {
                alert("您还未添加标签！")
            }
            else {
                target.innerHTML = '这是修改后的文字';//修改文字
            }

            // target.id = 'modify'//标记为修改
        }
        function function3() {
            var target = document.getElementById('imgl');
            if (!target) {
                alert("您还未添加标签！")
            }
            else {
                target.src = "https://img2.baidu.com/it/u=4063171612,2005873499&fm=253&fmt=auto&app=138&f=JPEG?w=700&h=391"
                target.border = "0"
                target.alt = "照片"
                target.width = "300"
                itarget.height = "230"
                // target.setAttribute("border", "0")//修改属性
                // target.setAttribute("src", "https://img2.baidu.com/it/u=4063171612,2005873499&fm=253&fmt=auto&app=138&f=JPEG?w=700&h=391")
                // target.setAttribute("alt", "照片")
                // target.setAttribute("width", "300")
                // target.setAttribute("height", "230")
                // target.id='modify'
            }

        }
        function function4() {
            var t = document.getElementById('al')
            if (!t) {
                alert("您还未添加标签！")
            }
            else {
                t.href = "https://www.sxu.edu.cn/"
                t.target = "blank"
                // target.setAttribute("href", "https://www.sxu.edu.cn/")
                // target.setAttribute("target","blank")
                t.innerHTML = "中西会通，求真至善，登崇俊良，自强报国"
                // target.id='modify'
            }

        }
        function function5() {
            // var target = document.getElementById('two')
            // target.remove()
            var target = document.getElementById('table1').rows[1];//获得第二行


            if (!target) {
                alert("只有一行了！")
            }
            else {
                target.remove()//删除第二行
            }


            // target.id='modify'
        }
        function function6() {
            var target = document.getElementById("table1")
            var tr1 = target.insertRow(0)//添加一行
            var td1 = tr1.insertCell(0)//添加第一列
            var td2 = tr1.insertCell(1)//添加第二列
            td1.innerHTML = "学校"//设置第一列数据
            td2.innerHTML = "SXU"//设置第二列数据
            // target.id='modify'
        }
        function changeColor() {
            return "rgba(" + parseInt(Math.random() * 256) + "," + parseInt(Math.random() * 256) + "," + parseInt(Math.random() * 256) + ",1)"
        }
        function function7() {
            var target = document.getElementById('pl')
            if (!target) {
                alert("您还未添加标签！")
            }
            else {
                target.style.color = changeColor()//随机修改颜色
                target.style.fontSize = Math.random() * 100 + 'px'//随机修改字号
                // var target = document.getElementsByName('p')
                // for(i=1;i<target.length;i++){
                //     target[i].style.color = changeColor()//随机修改颜色
                //     target[i].style.fontSize = Math.random() * 50 + 'px'//随机修改字号
                // } 
            }

            // target.id='pl'
        }
    </script>
</body>

</html>

木子一个Lee
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
基于python的网络攻防平台（CTF）设计与实现
07-30
络攻防平台开放采用Flask框架来实现基于B/S模式的web程序，前端使用体系采用HTML、CSS和JavaScript等前端页面开放技术，为了渲染模板，flask使用jinja2的强大模板引擎，jinjia2可以结合HTML、CSS和JavaScript等技术...
js基本操作和流程控制
Augen_starn的博客
01-11 90
写法上，当if 流程语句中只有一个判断条件的时候语句体的{}可以省略不写，switch语句中只有一个case条件语句体的{}也不能省略，当switch语句有多个case时，每个case后面的break关键字不能省略。浏览器自带的弹窗，有确认按钮，页面上显示的內容，也就是写在小括号里面的內容，有阻断代码的效果。弹窗，有输入框，有确认取消按钮，页面上显示的內容就是写在小括号里面的內容，也有阻断效果。H5新增的两种方式是静态获取，id、class、标签名 这三种是动态获取。
如何在JavaScript中对文件进行处理
忧郁的蛋的专栏
02-16 1917
生成压缩文件：使用 JSZip 对象的 generateAsync() 方法生成压缩文件，可以指定压缩格式，例如：zip.generateAsync({type:"blob"}).then(function (content) {…添加文件：使用 JSZip 对象的 file() 方法添加需要压缩的文件，例如：zip.file("file1.txt", "content1")。总之，不同的文件类型有不同的处理方法，JavaScript 提供了丰富的文件处理能力，可以读取、解析、显示各种类型的文件。
js控制本地文件及目录的方法
weixin_34000916的博客
08-06 776
javascript是网页制作中离不开的脚本语言，依靠它，一个网页的内容才生动活泼、富有朝气。但也许你还没有发现并应用它的一些更高级的功能吧？比如，对文件和文件夹进行读、写和删除，就象在VB、VC等高级语言中经常做的工作一样。怎么样，你是否需要了解这方面的知识？那就请跟我来，本文将详细描述如何使用Javascript语言进行文件操作。 一、功能实现核心：FileSystemObject 对象 其实...
js控制文件上传
qq_46220649的博客
04-22 292
js控制文件上传数量
js上传文件控制
dy91211310的专栏
12-31 1439
上传文件UpLoadFileCheck=function(){     this.AllowExt=".jpg .jpeg .gif .bmp";//允许上传的文件类型 0为无限制每个扩展名后边要加一个"." 小写字母表示    this.AllowImgFileSize=200;//允许上传文件的大小 0为无限制 单位：KB    this.AllowImgWidth=0;//允许上传的
SXU-网络攻防第7次作业-文件上传
12-27
山西大学网络攻防第7次作业——文件上传 自己试一下今天上课讲的五种文件上传方式，文件截断绕过攻击可以不做，把步骤截图保存到文档 1. 文件上传 2. JS检测绕过攻击 3. 文件后缀绕过攻击 4. 文件类型绕过攻击 5. 图...
CIS 2020 网络安全创新大会——攻防论坛.rar
08-17
网络攻防靶场的技术经验分享 钓鱼演练：基于攻防模式的人为因素风险教育 Red Teaming for Cloud：云上攻防 基于业务安全情报的攻防实践议题分享 甲方视角下的攻防演练部署 Attack in a Service Mesh
SXU-网络攻防第六次作业-sql注入进阶
12-27
本篇将详细讲解在“SXU-网络攻防第六次作业”中涉及的四种SQL注入类型：报错注入、时间注入、堆叠注入和宽字节注入，并给出相应的实践步骤。 首先，我们来看报错注入。报错注入是通过触发数据库错误来揭示敏感信息...
网络攻防期末考试精选简答题.pdf
07-24
网络防护则通过各种技术手段（如加密、访问控制、检测等）保护网络和数据不受侵犯。网络攻防是一个动态的过程，攻击手段往往领先于防御技术。 【对称密钥密码系统】 对称密钥密码系统如DES，其优点在于加密解密...
JavaScript FSO属性大全
Lyon & Carol
12-10 405
FSO属性大全 什么是FSO？ FSO 即 File System Object 文件系统对象，是一种列表 Windows 磁盘目录和文件，对目录和文件进行删除、新建、复制、剪切、移动等操作的技术。使用 FSO 网站的好处：直接读取目录下的文件和子目录，方便维护，如需要添加任何内容，将文件放在相应的目录下即可；FSO 网站类似 Windows 操作界面，易于使用，会使用 Windows ...
如何创建一个JS文件以及调用JS文件
热门推荐
qq_43227967的博客
09-24 8万+
一、电脑端 建立一个txt文件更改后缀名为js，建立完成... 二、JAVA编辑器 1.首先在的WebContent或者任何一个资源文件夹下建立一个JS文件夹。 步骤：点击WebContent，按Ctrl + N，搜索文件夹，创建一个名为js文件夹。 2.然后创建一个JS文件 步骤：点击创建的JS文件夹，按Ctrl + N，搜索文件(File类型,指定后缀为.js即可)，创建一个名称（...
vue3前端开发-小兔鲜项目-人气推荐栏目的前端渲染
最新发布
yrldjsbk的博客
07-18 350
除了必要的import导入之外，剩余的就是直接调用了，赋值了。经历过上一次的，新鲜好物的栏目渲染之后，我们已经熟练了，vue3的接口调用，数据渲染到页面中的整体流程。如图，我们已经做好了，列表的渲染赋值。里面可以看见，顶部是脚本，中间是模板，底部是样式。在首页面，内容里面，会看见很多内容，上期内容我们已经完成了新鲜好物的渲染操作。1：打开接口文档，查询：人气推荐栏目的接口地址信息和参数，返回值对象信息等。以上内容就是，已经写好的，HomeHot的模板代码了。如图，地址信息和调用的方式已经清楚了。
Web前端-Web开发CSS基础6-弹性盒子
a15735748145a的博客
07-16 1296
10. stretch，这意味着弹性盒子在布局的时候，不论是一行一行地布局，还是一列一列地布局，垂直方向上的各元素都将会自动扩展，以填满父元素的高度。11. stretch，这意味着弹性盒子在布局的时候，不论是一行一行地布局，还是一列一列地布局，垂直方向上的各元素都将会自动扩展，以填满父元素的高度。12. stretch，这意味着弹性盒子在布局的时候，不论是一行一行地布局，还是一列一列地布局，垂直方向上的各元素都将会自动扩展，以填满父元素的高度。
【前端】JavaScript入门及实战6-10
weixin_45980065的博客
07-17 569
如果使用Number表示的数字超过了最大值，则会返回一个Infinity，表示正无穷，typeof是number。NaN是一个特殊的数字，不是数字：not a number，是一个字面量，typeof是number。但是注意，null和undefined这两个值没有toString()方法，如果调用会报错。它会将null直接转换为"null"，将undefined直接转换为"undefined"当声明一个变量，但是并不给变量赋值时，它的值就算undefined。该方法不会影响原变量，它会将转换的结果返回。
【Vue】 style中的scoped
DX390609的博客
07-15 168
在vue文件中的style标签上，有一个特殊的属性：scoped。当一个style标签拥有scoped属性时，它的CSS样式就只能作用于当前的组件，通过该属性，可以使得组件之间的样式不互相污染。
cookies,sessionStorage和localStorage都有什么区别
qq_51856496的博客
07-17 302
cookies,sessionStorage和localStorage都有什么区别 cookies在请求数据传输的时候会携带至后台，sessionStorage,localStorage是纯客户端缓存 cookies有过期机制,sessionStorage是会话级缓存，窗口关闭后会销毁，localStorage是本地持久缓存手动才会清除 cookies只能存储4KB并且不推荐前端用js直接操作，sessionStorage,localStorage存储有5MB
ReactRouter v6升级的步骤
feixin369的博客
07-14 430
React Router v6 引入了一个 Routes组件，它有点像Switch，但功能要强大得多。与Switch相比，RoutesReact.lazy。
(三)js前端开发中设计模式之工厂模式
峰会路转的博客
07-17 255
工厂模式是一种创建型设计模式，它可以帮助我们根据需求创建对象。
"山西大学网络攻防第六次作业：SQL注入进阶实战练习
山西大学网络攻防第六次作业——sql注入进阶 在本次网络攻防作业中，学生们将进行sql注入的进阶练习，包括报错注入、时间注入、堆叠注入以及宽字节注入。这四种注入技术将在test靶场的http://localhost/test/sql/...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值