web实验2内容
这个小实验主要是在浏览器上有几个界面，在初始界面，用户需要登录，登陆成功后，浏览器会记录用户名，然后就可以访问页面的三个链接。
主界面代码：
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>欢迎界面</title> <style type="text/css"> body{ margin:0; padding:0; } #zong{ width:100%; height:100%; } img{ position:fixed; width:100%; height:100%; z-index:-1; } #div1{ height:30px; width:50%; position:absolute; left:25%; } #div2{ height:200px width:100%; position:absolute; top:130px; left:46%; } #div3{ height:200px; width:100%; position:absolute; top:220px; left:40%; } a{ color:red; font-size:25px; text-decoration:none; } #a1{ position:absolute; left:10%; } </style> </head> <script type="text/javascript"> function main(){ var name=getCookie("denglu"); if(name!=null){ var neirong="亲爱的"+name+"，欢迎您访问本网站!"; document.getElementById("name").innerHTML=neirong; document.getElementById("a1").style.display="none"; } } function gequ1(){ var name1=getCookie("denglu"); if(name1!=null){ window.location.href="gequ1.jsp"; }else{ window.location.href="denglu.jsp"; } } function gequ2(){ var name2=getCookie("denglu"); if(name2!=null){ window.location.href="gequ2.jsp"; }else{ window.location.href="denglu.jsp"; } } function gequ3(){ var name3=getCookie("denglu"); if(name3!=null){ window.location.href="gequ3.jsp"; }else{ window.location.href="denglu.jsp"; } } function getCookie(name) { var arr,reg=new RegExp("(^| )"+name+"=([^;]*)(;|$)"); if(arr=document.cookie.match(reg)) return unescape(arr[2]); else return null; } </script> <body onload="main();"> <div id="zong"> <img src="2.png"> <div id="div1" > <marquee scrollamount="30" behavior="alternate" ><font color="red" size="5px" id="name">亲爱的游客，欢迎您访问本网站！</font></marquee> </div> <div id="div2"> <h1 style="color:red;">流行歌曲欣赏</h1> </div> <div id="div3"> <ul> <li><a href="javascript:void(0)" onclick="gequ1()">1.燕尾服</a></li>> <li><a href="javascript:void(0)" onclick="gequ2()">2.小半（live）</a></li>> <li><a href="javascript:void(0)" onclick="gequ3()">3.嫌晚</a></li>> </ul> <a href="denglu.jsp" id="a1">登录</a> </div> </div> </body> </html>
登录界面代码：
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>登录</title> <meta name="renderer" content="webkit"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <link rel="stylesheet" href="../../res/layui/dist/css/layui.css" tppabs="https://www.layui.site/layui/dist/css/layui.css" media="all"> <style type="text/css"> body{ margin:0; padding:0; } #zong{ width:100%; height:100%; } img{ position:fixed; width:100%; height:100%; z-index:-1; } #div1{ position:absolute; top:80px; left:45%; } #div2{ position:absolute; top:150px; left:38%; } #button1{ position:absolute; left:40%; } </style> </head> <script type="text/javascript"> function denglu(){ var yonghu = document.getElementById("yonghuming").value; var mima = document.getElementById("mima").value; if(yonghu==mima&&yonghu!=""){ window.alert("登录成功，确定后跳转到欢迎界面"); setCookie("denglu",yonghu,"s300"); setTimeout(tiaozhuan1(),0); }else{ window.alert("登录失败，确定后回到登录页面"); setTimeout(tiaozhuan2(),0); } } function tiaozhuan1(){ window.location.href="login.jsp"; } function tiaozhuan2(){ window.location.href="denglu.jsp"; } function setCookie(name,value,time) { var strsec = getsec(time); var exp = new Date(); exp.setTime(exp.getTime() + strsec*1); document.cookie = name + "="+ escape (value) + ";expires=" + exp.toGMTString(); } function getsec(str) { var str1=str.substring(1,str.length)*1; var str2=str.substring(0,1); if (str2=="s") { return str1*1000; } else if (str2=="h") { return str1*60*60*1000; } else if (str2=="d") { return str1*24*60*60*1000; } } </script> <body> <div id="zong"> <img src="2.png"> <div id="div1"> <h2 style="color:red;">登录页面</h2> </div> <div id="div2" class="layui-btn-container"> <p style="color:red;">用户名：<input type="text" id="yonghuming" ></p> <p style="color:red;">密 码：<input type="password" id="mima"></p> <button type="button" class="layui-btn" id="button1" onclick="denglu()">提交</button> </div> </div> </body> </html>
歌曲一界面代码：
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>燕尾服</title> <style type="text/css"> body{ margin:0; padding:0; } #zong{ width:100%; height:100%; } img{ position:fixed; width:100%; height:100%; z-index:-1; } #div1{ height:30px; width:50%; position:absolute; left:25%; } #div2{ height:200px width:100%; position:absolute; top:130px; left:46%; } #div3{ height:260px; width:40%; position:absolute; top:220px; left:35%; overflow-y:auto; } /*-------滚动条整体样式----*/ #div3::-webkit-scrollbar { width:8px; height:8px; } /*滚动条里面小方块样式*/ #div3::-webkit-scrollbar-thumb { border-radius:10px; -webkit-box-shadow:inset 0 0 5px rgba(0,0,0,0.2); background:red; } /*滚动条里面轨道样式*/ #div3::-webkit-scrollbar-track { -webkit-box-shadow:inset 0 0 5px rgba(0,0,0,0.2); border-radius:0; background:rgba(0,0,0,0.1); } #div4{ width:20%; position:absolute; top:550px; left:45%; } li{ color:red; list-style:none; } #p1{ color:red; position:absolute; left:10%; top:50px; } #a1{ position:absolute; left:10%; color:red; font-size:25px; text-decoration:none; } #div5{ position:absolute; top:500px; left:40%; } button{ color:red; } </style> </head> <script type="text/javascript"> function main(){ var name=getCookie("denglu"); if(name!=null){ var neirong="亲爱的"+name+"，欢迎您访问本网站!"; document.getElementById("name").innerHTML=neirong; } } function getCookie(name) { var arr,reg=new RegExp("(^| )"+name+"=([^;]*)(;|$)"); if(arr=document.cookie.match(reg)) return unescape(arr[2]); else return null; } function rbf(){ var audio = document.getElementById('music1'); audio.currentTime = 0; audio.play(); } function bf(){ var audio = document.getElementById('music1'); if(audio!==null){ if(audio.paused) { audio.play();//audio.play();// 这个就是播放 }else{ audio.pause();// 这个就是暂停 } } } </script> <body onload="main();"> <div id="zong"> <img src="2.png"> <div id="div1" > <marquee scrollamount="30" behavior="alternate" id="name"><font color="red" size="5px" ></font></marquee> </div> <div id="div2"> <h1 style="color:red;">燕尾服</h1> <p id="p1">歌手：黄旭</p> </div> <div id="div3" > <ul> <li>若不是你突然闯进我生活</li> <li>我怎会把死守的寂寞放任了</li> <li>说不痛苦那是假的</li> <li>毕竟我的心也是肉做的</li> <li>你离开时我心里的彩虹</li> <li>就变成灰色</li> <li>说不心酸那是假的</li> <li>如果我真的没那么爱过</li> <li>爱着一个没有灵魂的人</li> <li>世界都是黑色</li> <li>若不是你突然闯进 我生活</li> <li>我怎会把死守的寂寞 放任了</li> <li>爱我的话你都说</li> <li>爱我的事你不做</li> <li>我却把甜言蜜语当做你爱我的躯壳</li> <li>你的悲伤难过我不参破</li> <li>我也会把曾经的且过 当施舍</li> <li>不去计较你太多</li> <li>从此你在我心里</li> <li>只剩绿色</li> <li>说很快活那是假的 </li> <li>你的名字依然那么深刻</li> <li>每个字都刺穿我的心脏</li> <li>那鲜明的痛是红色</li> <li>若不是你突然闯进 我生活</li> <li>我怎会把死守的寂寞 放任了</li> <li>爱我的话你都说</li> <li>爱我的事你不做</li> <li>我却把甜言蜜语当做你爱我的躯壳</li> <li>你的悲伤难过我不参破</li> <li>我也会把曾经的且过 当施舍</li> <li>不去计较你太多</li> <li>从此你在我心里</li> <li>只剩绿色</li> <li>呼～</li> <li>若不是你突然闯进 我生活</li> <li>我怎会把死守的寂寞 放任了</li> <li>爱我的话你都说</li> <li>爱我的事你不做</li> <li>我却把甜言蜜语当做你爱我的躯壳</li> <li>若不是你突然闯进 我生活</li> <li>我怎会把死守的寂寞 放任了</li> <li>爱我的话你都说</li> <li>爱我的事你不做</li> <li>我却把甜言蜜语当做你爱我的躯壳</li> <li>你的悲伤难过我不参破</li> <li>我也会把曾经的且过 当施舍</li> <li>若不是你突然闯进 我生活</li> <li>我怎会把死守的寂寞 放任了</li> <li>爱我的话你都说</li> <li>爱我的事你不做</li> <li>我却把甜言蜜语当做你爱我的躯壳</li> </ul> </div> <div id="div4"> <a href="login.jsp" id="a1">返回</a> </div> <div id="div5"> <audio src="yanweifu.mp3" controls="controls" preload id="music1" hidden> </audio> <button id="bf" onclick="bf();">播放/暂停</button> <button id="bf" onclick="rbf();">重新播放</button> </div> </div> </body> </html>
歌曲二界面代码：
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>小半（live）</title> <style type="text/css"> body{ margin:0; padding:0; } #zong{ width:100%; height:100%; } img{ position:fixed; width:100%; height:100%; z-index:-1; } #div1{ height:30px; width:50%; position:absolute; left:25%; } #div2{ height:200px width:100%; position:absolute; top:130px; left:46%; } #div3{ height:260px; width:40%; position:absolute; top:220px; left:35%; overflow-y:auto; } /*-------滚动条整体样式----*/ #div3::-webkit-scrollbar { width:8px; height:8px; } /*滚动条里面小方块样式*/ #div3::-webkit-scrollbar-thumb { border-radius:10px; -webkit-box-shadow:inset 0 0 5px rgba(0,0,0,0.2); background:red; } /*滚动条里面轨道样式*/ #div3::-webkit-scrollbar-track { -webkit-box-shadow:inset 0 0 5px rgba(0,0,0,0.2); border-radius:0; background:rgba(0,0,0,0.1); } #div4{ width:20%; position:absolute; top:550px; left:45%; } li{ color:red; list-style:none; } #p1{ color:red; position:absolute; left:10%; top:50px; } #a1{ position:absolute; left:10%; color:red; font-size:25px; text-decoration:none; } #div5{ position:absolute; top:500px; left:40%; } button{ color:red; } </style> </head> <script type="text/javascript"> function main(){ var name=getCookie("denglu"); if(name!=null){ var neirong="亲爱的"+name+"，欢迎您访问本网站!"; document.getElementById("name").innerHTML=neirong; } } function getCookie(name) { var arr,reg=new RegExp("(^| )"+name+"=([^;]*)(;|$)"); if(arr=document.cookie.match(reg)) return unescape(arr[2]); else return null; } function rbf(){ var audio = document.getElementById('music1'); audio.currentTime = 0; audio.play(); } function bf(){ var audio = document.getElementById('music1'); if(audio!==null){ if(audio.paused) { audio.play();//audio.play();// 这个就是播放 }else{ audio.pause();// 这个就是暂停 } } } </script> <body onload="main();"> <div id="zong"> <img src="2.png"> <div id="div1" > <marquee scrollamount="30" behavior="alternate" id="name"><font color="red" size="5px" ></font></marquee> </div> <div id="div2"> <h1 style="color:red;">小半（live）</h1> <p id="p1">歌手：陈粒</p> </div> <div id="div3" > <ul> <li>不敢回看，左顾右盼不自然的暗自喜欢</li> <li>偷偷搭讪总没完地坐立难安，试探说晚安</li> <li>多空泛又心酸，低头呢喃</li> <li>对你的偏爱太过于明目张胆，在原地打转的小丑伤心不断</li> <li>空空留遗憾，多难堪又为难</li> <li>释然，慵懒</li> <Li>尽欢，时间风干后你与我再无关</Li> <li>没答案，怎么办</li> <li>看不惯自我欺瞒，纵容着</li> <li>喜欢的，讨厌的</li> <Li>宠溺的，厌倦的</Li> <li>一个个慢慢黯淡，纵容着</li> <Li>任性的，随意的</Li> <li>放肆的，轻易的</li> <li>将所有欢脱倾翻，不应该</li> <Li>太心软，不大胆</Li> <li>太死板，不果断</li> <li>玩弄着肆无忌惮，不应该</li> <li>舍弃了，死心了</li> <li>放手了，断念了</li> <li>无可奈何不耐烦，不算</li> <li>灯火阑珊，我的心借了你的光是明是暗</li> <li>笑自己情绪太泛滥形只影单，自嘲成习惯</li> <li>多敏感又难缠，低头呢喃</li> <li>对你的偏爱太过于明目张胆，在原地打转的小丑伤心不断</li> <li>空空留遗憾，多难堪又为难</li> <li>释然，慵懒</li> <li>尽欢，时间风干后你与我再无关</li> <li>没答案，怎么办</li> <li>看不惯自我欺瞒，纵容着</li> <li>喜欢的，讨厌的</li> <li>宠溺的，厌倦的</li> <li>一个个慢慢黯淡，纵容着</li> <li>任性的，随意的</li> <li>放肆的，轻易的</li> <li>将所有欢脱倾翻，不应该</li> <li>太心软，不大胆</li> <li>太死板，不果断</li> <li>玩弄着肆无忌惮，不应该</li> <li>舍弃了，死心了</li> <li>放手了，断念了</li> <li>无可奈何不耐烦，任由着</li> <li>你躲闪，我追赶</li> <li>你走散，我呼喊</li> <li>是谁在泛泛而谈，任由着</li> <li>你来了，你笑了</li> <li>你走了，不看我</li> <li>与理所当然分摊，不明白</li> <li>残存的，没用的</li> <li>多余的，不必的</li> <li>破烂也在手紧攥，不明白</li> <li>谁赧然，谁无端</li> <li>谁古板，谁极端</li> <li>无辜不知所以然，纵容着</li> <li>喜欢的，讨厌的</li> <li>宠溺的，厌倦的（不管）</li> <li>一个个慢慢黯淡，纵容着</li> <li>任性的，随意的</li> <li>放肆的，轻易的</li> <li>将所有欢脱倾翻，不应该</li> <li>太心软，不大胆</li> <li>太死板，不果断</li> <li>玩弄着肆无忌惮，不应该</li> <li>舍弃了，死心了</li> <li>放手了，断念了，无可奈何不耐烦</li> </ul> </div> <div id="div4"> <a href="login.jsp" id="a1">返回</a> </div> <div id="div5"> <audio src="xiaoban.mp3" controls="controls" preload id="music1" hidden> </audio> <button id="bf" onclick="bf();">播放/暂停</button> <button id="bf" onclick="rbf();">重新播放</button> </div> </div> </body> </html>
歌曲三界面代码：
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>嫌晚</title> <style type="text/css"> body{ margin:0; padding:0; } #zong{ width:100%; height:100%; } img{ position:fixed; width:100%; height:100%; z-index:-1; } #div1{ height:30px; width:50%; position:absolute; left:25%; } #div2{ height:200px width:100%; position:absolute; top:130px; left:46%; } #div3{ height:260px; width:40%; position:absolute; top:220px; left:35%; overflow-y:auto; } /*-------滚动条整体样式----*/ #div3::-webkit-scrollbar { width:8px; height:8px; } /*滚动条里面小方块样式*/ #div3::-webkit-scrollbar-thumb { border-radius:10px; -webkit-box-shadow:inset 0 0 5px rgba(0,0,0,0.2); background:red; } /*滚动条里面轨道样式*/ #div3::-webkit-scrollbar-track { -webkit-box-shadow:inset 0 0 5px rgba(0,0,0,0.2); border-radius:0; background:rgba(0,0,0,0.1); } #div4{ width:20%; position:absolute; top:550px; left:45%; } li{ color:red; list-style:none; } #p1{ color:red; position:absolute; left:10%; top:50px; } #a1{ position:absolute; left:10%; color:red; font-size:25px; text-decoration:none; } #div5{ position:absolute; top:500px; left:40%; } button{ color:red; } </style> </head> <script type="text/javascript"> function main(){ var name=getCookie("denglu"); if(name!=null){ var neirong="亲爱的"+name+"，欢迎您访问本网站!"; document.getElementById("name").innerHTML=neirong; } } function getCookie(name) { var arr,reg=new RegExp("(^| )"+name+"=([^;]*)(;|$)"); if(arr=document.cookie.match(reg)) return unescape(arr[2]); else return null; } function rbf(){ var audio = document.getElementById('music1'); audio.currentTime = 0; audio.play(); } function bf(){ var audio = document.getElementById('music1'); if(audio!==null){ if(audio.paused) { audio.play();//audio.play();// 这个就是播放 }else{ audio.pause();// 这个就是暂停 } } } </script> <body onload="main();"> <div id="zong"> <img src="2.png"> <div id="div1" > <marquee scrollamount="30" behavior="alternate" id="name"><font color="red" size="5px" ></font></marquee> </div> <div id="div2"> <h1 style="color:red;">嫌晚</h1> <p id="p1">歌手：陈子琪</p> </div> <div id="div3" > <ul> <li>我会慢慢地疏远离开</li> <li>只为成全你和他的爱</li> <li>而我不经意间看见你对他的偏爱</li> <Li>这感情对我都是空白</Li> <li>我要慢慢地学会期待</li> <li>期待没发生的事到来</li> <li>这场爱幻灭终究毁了期待</li> <li>如果你不爱我就别对我说出爱</li> <li>你是我任何时候遇见都不嫌晚的人</li> <li>我只是一个喜欢对你偏爱的保护神</li> <li>可是我是一个喜欢独处的病人</li> <li>唯独爱你这件事情我总是藏得很深</li> <li>失去一个人最快的方法是靠得太近</li> <li>那我们公平一点 你走向我 我坚定你</li> <li>如果你能开心忘了我也没关系</li> <li>再力所能及的地方 请善待自己</li> <li>你不会发现我已离开</li> <li>沉浸在他编织的未来</li> <li>我也不去猜测是否有过我的存在</li> <li>哪怕只一秒在你脑海</li> <li>你不会转身朝我走来</li> <li>期待被失望完全取代</li> <li>我明白祈求也无法再重来</li> <li>也明白他并不是我们唯一阻碍</li> <li>你是我任何时候遇见都不嫌晚的人</li> <li>我只是一个喜欢对你偏爱的保护神</li> <li>可是我是一个喜欢独处的病人</li> <li>唯独爱你这件事情我总是藏得很深</li> <li>失去一个人最快的方法是靠得太近</li> <li>那我们公平一点 你走向我 我坚定你</li> <li>如果你能开心忘了我也没关系</li> <li>在力所能及的地方 请善待自己 </li> <li>你是我任何时候遇见都不嫌晚的人</li> <li>我只是一个喜欢对你偏爱的保护神</li> <li>可是我是一个喜欢独处的病人</li> <li>唯独爱你这件事情我总是藏得很深</li> <li>失去一个人最快的方法是靠得太近</li> <li>那我们公平一点 你走向我 我坚定你</li> <li>如果你能开心忘了我也没关系</li> <li>在力所能及的地方 请善待自己</li> </ul> </div> <div id="div4"> <a href="login.jsp" id="a1">返回</a> </div> <div id="div5"> <audio src="xianwan.mp3" controls="controls" preload id="music1" hidden> </audio> <button id="bf" onclick="bf();">播放/暂停</button> <button id="bf" onclick="rbf();">重新播放</button> </div> </div> </body> </html>
程序截图：
