web实验一
实验项目名称：实验一 客户端脚本编程
一、实验目的
通过设计一个个人主页网站，学习常用的HTML标记，学习使用CSS对页面进行美化，掌握JavaScript的语法和常用的浏览器对象，初步学会使用Eclipse创建网站和编辑网页的方法。
二、实验内容和要求
1) 自己设计网页内容，做一张展示自己网页。要求展示的主要内容有：基本资料、学习经历、所得奖励、最新动态等。
2) 在网页的合适位置加入一些JavaScript特效，例如显示当前时间、图片定时切换、文本自动滚屏等。
3) 将网页源代码和浏览器截图写入实验报告并提交。
实验代码
<!DOCTYPE html> <html> <head> <title>wed个人主页</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <style type="text/css"> * { margin: 0; padding: 0; } * { box-sizing: border-box; } /* body 样式 */ body { font-family: Arial; margin: 0; } /* 标题 */ .header { padding: 80px; text-align: center; background:url(https://images.cnblogs.com/cnblogs_com/blogs/690905/galleries/2128405/o_220320050614_%E5%A4%A7%E6%B5%B7.jpg); background-size:cover; color: white; } /* 标题字体加大 */ .header h1 { font-size: 40px; } /*设置超链接样式*/ table { border-collapse: collapse; border-spacing: 0; } a { color: #5086a5; text-decoration: none; font-size: 12px; } a:hover { color: #5086a5; text-decoration: underline; font-size: 12px; } a:visited { color: #5086a5; font-size: 12px; } /*整个tab层居中，宽度为600px*/ #tabDiv { width: 600px; margin: 1em auto; padding-bottom: 10px; border-right: #b2c9d3 1px solid; border-top: #b2c9d3 1px solid; border-left: #b2c9d3 1px solid; border-bottom: #b2c9d3 1px solid; background: #ffffff; } /*tab头的样式*/ #tabsHead { padding-left: 0px; height: 26px; background-color: #e8f7fc; font-size: 1em; margin: 1px 0px 0px; color: #5086a5; line-height: 26px; } /*已选tab头（超链接）的样式*/ .curtab { padding-top: 0px; padding-right: 10px; padding-bottom: 0px; padding-left: 10px; border-right: #b2c9d3 1px solid; font-weight: bold; float: left; cursor: pointer; background: #ffffff; } /*未选tab头（超链接）的样式*/ .tabs { border-right: #c1d8e0 1px solid; padding-top: 0px; padding-right: 10px; padding-bottom: 0px; padding-left: 10px; font-weight: normal; float: left; cursor: pointer; } .zuo{ width: 1000px; height: 1000px; border-radius:30px; border:10px solid #d2dcf9; background:url(http://m.qpic.cn/psc?/V52pSEnc1nHZlg4bnzwx2xNfqy3VivBN/45NBuzDIW489QBoVep5mcRO3Ia6v8znic.ss1waQuwG*SNRQDpF.g.czayc8TQUo0xLvC2hCuEcT1KNbghjz2h35nsX*4FsNtjEmc250leQ!/b&bo=VAY4BAAAAAABF14!&rf=viewer_4); background-size:cover; display: inline-block; float: left; position: relative; color: white; font:24px "华文彩云"; } p { font-size: 12pt; text-indent: 2em; font:24px "华文行楷"; } li { border-bottom-style: solid; border-bottom-color: #EEE; border-bottom-width: thin; height: 25px; font-family: "宋体"; font-size: 12pt; } </style> <script type="text/jscript"> //显示tab（tabHeadId：tab头中当前的超链接；tabContentId要显示的层ID） function showTab(tabHeadId,tabContentId) { //tab层 var tabDiv = document.getElementById("tabDiv"); //将tab层中所有的内容层设为不可见 //遍历tab层下的所有子节点 var taContents = tabDiv.childNodes; for(i=0; i<taContents.length; i++) { //将所有内容层都设为不可见 if(taContents[i].id!=null && taContents[i].id != 'tabsHead') { taContents[i].style.display = 'none'; } } //将要显示的层设为可见 document.getElementById(tabContentId).style.display = 'block'; //遍历tab头中所有的超链接 var tabHeads = document.getElementById('tabsHead').getElementsByTagName('a'); for(i=0; i<tabHeads.length; i++) { //将超链接的样式设为未选的tab头样式 tabHeads[i].className='tabs'; } //将当前超链接的样式设为已选tab头样式 document.getElementById(tabHeadId).className='curtab'; document.getElementById(tabHeadId).blur(); } </script> </head> <body> <div class="header"> <h1>耿牛牛的院子</h1> <p>Welcome to my world!</p> <p>泰兰德的夏天永不停歇，我爱的少年永远热恋</p> </div> <div id="tabDiv" style="width: 1000px"> <div id="tabsHead"> <a id="tabs1" class="curtab" href="javascript:showTab('tabs1','tabContent1')">首页</a> <a id="tabs2" class="tabs" href="javascript:showTab('tabs2','tabContent2')">基本资料</a><a id="tabs3" class="tabs" href="javascript:showTab('tabs3','tabContent3')">获奖资料</a> <a id="tabs4" class="tabs" href="javascript:showTab('tabs4','tabContent4')">留言板</a> </div> <div class="zuo"> <div id="tabContent1" style="display: block"> <a href="https://www.cnblogs.com/gnn40036/"><span>博客园</span></a> <ul1> <li>姓名： 耿晴</li> <li>班级：信2005-1</li> <li>性别：女</li> <li>专业：软件工程</li> <li>学院：信息技术与科学学院</li> <h1>欢迎来到我的博客园</h1> </div> </div> <div id="tabContent2" style="display: none"> <table style="border-width: 0; width: 100%"> <tr> <td rowspan="3" style="width: 300px; text-align: center"><img alt="姚明" src="http://r.photo.store.qq.com/psc?/V52pSEnc1nHZlg4bnzwx2xNfqy3VivBN/45NBuzDIW489QBoVep5mcdyxLrI1.ta1c5pQDVWNtQK1KhLEy0XMmAKwqKfE0DJfAxQX.uZzXoyjxqO0vYQODWG0uVP5PwfZu4gRUQSJS0k!/r" style="width: 280px" /></td> <td colspan="3" rowspan="3"> <table border="1" style="border-left-color: aqua; border-bottom-color: aqua; width: 701px; border-top-style: solid; border-top-color: aqua; border-right-style: solid; border-left-style: solid; height: 380px; border-right-color: aqua; border-bottom-style: solid"> <tr> <td style="width: 50%">姓名：耿晴</td> <td style="width: 50%">生日：保密</td> </tr> <tr> <td style="width: 50%">国籍：中华人民共和国</td> <td style="width: 50%">出生地：河北省衡水市</td> </tr> <tr> <td style="width: 50%; height: 29px">身高：秘密</td> <td style="width: 50%; height: 29px">体重：秘密</td> </tr> <tr> <td style="width: 50%">血型：未知</td> <td style="width: 50%">星座：天秤座</td> </tr> <tr> <td colspan="2"> <p>学生本人耿晴在大一一年隶属石家庄铁道大学信息米阳青协闻宣的一员，在大一期间认真参与了院级青协举办的所有活动，如：组织“‘铁’定温暖你”捐衣捐物活动并，“共创美好生活”手抄报征集活动，“冬日暖心，释忧解压”活动，在“光盘，我们在行动”认真践行，“光盘原则”，“与心灵相约，与健康同行”心理健康活动，王家庄公益活动等一系列活动，在寒假期间积极配合政府工作自愿隔离，并加入村委会的防疫活动；并且积极参加镇上的各种防疫活动，积极的宣传接种疫苗的有益之处；日常生活中也积极参各种志愿活动，积极宣传志愿者与服务精神。参加了2021第六届全国大学生预防艾滋病知识竞赛并获得优秀奖。以及参加捐衣捐物的志愿活动，以及冬日暖心活动的小游戏哦！。</p> </td> </tr> </table> </td> </tr> <tr> </tr> <tr> </tr> </table> </div> <!--以下为获奖记录部分内容--> <div id="tabContent3" style="display: none"> <ul> <li>2006美国周刊年度风云人物</li> <li>2008感动中国组委会特别大奖</li> <li>2019年度地球卫士奖</li> <li>2022年奥林匹克杯获得者</li> <li>获得11月志愿之星</li> <li>”忆红色革命路“vlog大赛一等奖</li> </ul> </div> </div> <hr /> <div id="tabContent4" style="display: none;background-image:url(http://m.qpic.cn/psc?/V52pSEnc1nHZlg4bnzwx2xNfqy3VivBN/45NBuzDIW489QBoVep5mcdyxLrI1.ta1c5pQDVWNtQL2RIV8aS4kqaVMegj*nVebRGLpalPeEr2VyyaOvLxZlJLiM.85YXmd1mbvEkleNs8!/b&bo=gAc4BAAAAAABJ7s!&rf=viewer_4); width: 100%; height: 1000px;"> <img alt="耶耶耶" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fhbimg.b0.upaiyun.com%2F85b7d685def3cd17da365dd733d25a1550c973f126b5a-I7H3CW_fw658&refer=http%3A%2F%2Fhbimg.b0.upaiyun.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1651240821&t=9783b6e8cfe7b875e104011790674bbb" style="width: 300px" /> <a href="https://user.qzone.qq.com/3209772686/infocenter"><span>留言板</span></a> </div> </div> <!--音乐--> <link rel="stylesheet" href="https://blog-static.cnblogs.com/files/elkyo/APlayer.min.css"> <div id="player" class="aplayer aplayer-withlist aplayer-fixed" data-id="7019693974" data-server="netease" data-type="playlist" data-order="random" data-fixed="true" data-listfolded="true" data-theme="#2D8CF0"></div> <script src="https://blog-static.cnblogs.com/files/elkyo/APlayer.min.js"></script> <script src="https://blog-static.cnblogs.com/files/elkyo/Meting.min.js"></script> <script type="text/javascript"> var body = document.getElementsByTagName('body')[0]; var textArr=["乐观", "❤" ,"积极", "向上", "自由", "正能量","(*^▽^*)", "元气满满", "开心" ,"快乐", "善良", "可爱", "暴富", "暴瘦"]; document.addEventListener('click',(e)=>{ // 生成字符串 var ev = e || window.event; var baseX = ev.pageX; var baseY = ev.pageY; var new_span=document.createElement('span'); new_span.innerText=textArr[parseInt(Math.random()*textArr.length)] new_span.style.position='fixed'; new_span.style.left=baseX-10+'px'; new_span.style.top=baseY+'px'; new_span.style.color='RGB('+parseInt(Math.random()*255)+','+parseInt(Math.random()*255)+','+parseInt(Math.random()*255)+')'; body.appendChild(new_span); // 定时器1实现字符串上升效果 var timer = window.setInterval(()=>{ new_span.style.top=parseInt(window.getComputedStyle(new_span,null)['top'])-2+'px'; // console.log(window.getComputedStyle(new_span,null)['fontSize']); new_span.style.opacity=window.getComputedStyle(new_span,null)['opacity']-0.02; },30); // 定时器2实现字符串消失 window.setTimeout(()=>{ window.clearInterval(timer); body.removeChild(new_span); },1000); },false); </script> <hr /> </body> </html>
