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

作业要求：
准备一个 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>

网络攻防作业2——js实现文档控制相关推荐

java毕业设计网络招聘系统源码+lw文档+mybatis+系统+mysql数据库+调试
java毕业设计网络招聘系统源码+lw文档+mybatis+系统+mysql数据库+调试 java毕业设计网络招聘系统源码+lw文档+mybatis+系统+mysql数据库+调试本源码技术栈: 项目 ...
java毕业设计网络学习平台源码+lw文档+mybatis+系统+mysql数据库+调试
java毕业设计网络学习平台源码+lw文档+mybatis+系统+mysql数据库+调试 java毕业设计网络学习平台源码+lw文档+mybatis+系统+mysql数据库+调试本源码技术栈: 项目 ...
Grunt-jsdoc生成JS API文档
Grunt-jsdoc生成JS API文档具体的请看官网 https://github.com/krampstudio/grunt-jsdoc 一:首先确保本机电脑上是否已经安装了nodejs和np ...
从转载阿里开源项目 Egg.js 技术文档引发的“版权纠纷”，看宽松的 MIT 许可该如何用？
作者 | 苏宓.彭慧中出品 | CSDN(ID:CSDNnews) 开源迅速发展的这两年,很多内部问题逐渐凸显出来,如安全.版权.协议使用等. 近日,来自V2EX社区中一位开发者 @an168ban ...
【板栗糖GIS】怎么将网络上只能在线预览文档另存为pdf（插件篇）
怎么将网络上只能在线预览文档另存为pdf(插件篇) 目录 1.使用插件,这里推荐FireShot,好用免费 2.安装该插件的方式 3.打开在线预览文档的网址 4.点击插件-截取整个页面并且-另存为pd ...
Excel文档加密网络授权管理方案 - 加密Excel文档并通过服务器端授权管理
Excel文档加密网络授权管理方案 - 加密Excel文档并通过服务器端授权管理加密excel文档,支持*.xls;*.csv;*.xlsx等, 保护文档分发,防止编辑.防止复制.防止打印 : 加 ...
智能文档控制——文档的智能归档、捕获、索引、访问和协作
Smart Document Control 一.杜绝成堆的文件和文件混乱,保证业务连续性,创建企业新阶段清晰有条理和即时可用的信息是成功的业务流程的关键.随时随地安全管理业务文档,快速查找并智能使 ...
DocuWare 智能文档控制——杜绝成堆的文件和文件混乱，保证业务连续性，创建企业新阶段
一.智能文档控制--杜绝成堆的文件和文件混乱,保证业务连续性,创建企业新阶段清晰有条理和即时可用的信息是成功的业务流程的关键,随时随地安全管理业务文档,快速查找并智能使用它们. 1.安全存储使用安 ...
JSDoc --JS API文档生成器
JSDoc 是一个JavaScript的API文档生成器. 他可以让开发者在开发的过程中, 将编写的注释通过JSDoc工具生成一个api文档, 妈妈再也不用担心我不会写接口文档了. 这里是原作者Git ...

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

网络攻防作业2——js实现文档控制相关推荐

最新文章

热门文章