Skip to content

Modernized bottom.jsp #113

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
bayramtturgutt wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Modernized bottom.jsp #113

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Modernized bottom.jsp 
Used JSTL for setting the basePath.
Replaced inline JavaScript event handlers with addEventListener.
Simplified the JavaScript logic for managing the form and elements.
  • Loading branch information
@bayramtturgutt
bayramtturgutt authored Aug 3, 2024
commit 4f5f0f33e89025d7049ce919855ea1cb8f591f23
207 changes: 106 additions & 101 deletions JspChat/WebContent/bottom.jsp
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,118 +1,123 @@
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<!DOCTYPE html>
<html lang="en">
<head>
<base href="<%=basePath%>">
<meta charset="UTF-8">
<title>My JSP 'bottom.jsp' starting page</title>
<base href="${basePath}">
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta name="keywords" content="keyword1,keyword2,keyword3">
<meta name="description" content="This is my page">
<link rel="stylesheet" type="text/css" href="styles.css">
<script type="text/javascript">
document.addEventListener("DOMContentLoaded", function () {
document.getElementById("sendButton").addEventListener("click", function () {
const message = document.forms['formms']['message'].value;
const avatar = document.forms['formms']['touxiang'].value;
if (!message && !avatar) {
alert("不能发送空消息！");
return false;
}
document.forms['formms']['mess'].value = message;
document.forms['formms']['message'].value = "";
return true;
});

<title>My JSP 'bottom.jsp' starting page</title>
document.querySelectorAll("input[name='touxiang']").forEach(radio => {
radio.addEventListener("click", function () {
document.getElementById("small").style.zIndex = 1;
});
});

<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<script type="text/javascript">
function aaa(){
document.getElementById("small").style.zIndex=1;

}
function small(){
document.getElementById("small").style.zIndex=3;
}
function resetRadio()
{
for(i=0;i<5;i++)
document.form1.radiobutton[i].checked=false

}
function sendMsg() {
if (formms.message.value == ""&&formms.touxiang.value=="") {
alert("不能发送空消息！");
return false;
}
formms.mess.value = formms.message.value;
formms.message.value = "";

window.location.href=window.location.href;
}

</script>
<style type="text/css">
body {
font-family: "Helvetica Neue", Helvetica, "Hiragino Sans GB",
"Microsoft YaHei", "微软雅黑", Arial, sans-serif;
height: 100%;
-webkit-background-size: cover;
background-size: cover;
color: #000;
document.getElementById("smallImg").addEventListener("click", function () {
document.getElementById("small").style.zIndex = 3;
});
});

position:relative;
}
function resetRadio() {
document.querySelectorAll("input[name='radiobutton']").forEach(radio => radio.checked = false);
}
</script>
<style>
body {
font-family: "Helvetica Neue", Helvetica, "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
height: 100%;
background-size: cover;
color: #000;
position: relative;
}

.login {
padding: 2px 15px;
font-size: 15px;
color: rgb(0, 100, 233);
-webkit-transition: background 250ms ease-in, color 250ms ease-in;
border-radius: 6px;
text-decoration: none;
}
.login {
padding: 2px 15px;
font-size: 15px;
color: rgb(0, 100, 233);
transition: background 250ms ease-in, color 250ms ease-in;
border-radius: 6px;
text-decoration: none;
}

.login:hover {
color: #fff;
background: #BBD631;
}
.login:hover {
color: #fff;
background: #BBD631;
}

.doc {
display: inline-block;
}
.doc {
display: inline-block;
}

.doc:hover {
border: 1px;
}
#small{
position:absolute;
z-index:1;
}
#send{
position:absolute;
z-index:2;
}
.doc:hover {
border: 1px;
}

</style>
</head>
#small {
position: absolute;
z-index: 1;
}

#send {
position: absolute;
z-index: 2;
}
</style>
</head>
<body>
<form action="left.jsp" method="post" name="formms"
onsubmit="return sendMsg()">
字体颜色：<select name="textColor">
<option value="black">黑色</option>
<option value="red">红色</option>
<option value="green">绿色</option>
<option value="blue">蓝色</option>
</select>
&nbsp;&nbsp;文件管理:&nbsp;&nbsp;<a class="doc" href="document.jsp">
alt="文件管理" title="文件上传下载" src="images/documentMessage.png"></a>
&nbsp;&nbsp;选择表情：&nbsp;&nbsp;<img alt="表情"
title="发送表情" src="images/small1.png" onclick="small()">
<div id="small" name="small">
<input type="radio" name="touxiang" value="images/f01.gif" onclick="aaa()"><img src="images/f01.gif">
<input type="radio" name="touxiang" value="images/f02.gif" onclick="aaa()"><img src="images/f02.gif">
<input type="radio" name="touxiang" value="images/f03.gif" onclick="aaa()"><img src="images/f03.gif">
<input type="radio" name="touxiang" value="images/f04.gif" onclick="aaa()"><img src="images/f04.gif">
</div>
<div id="send"><input type="text" name="message"
style="width: 300px; height: 30px;"> <input type="submit"
value="发送" class="login"> <input type="hidden" name="mess">
</div>
</form>
<form action="left.jsp" method="post" name="formms">
字体颜色：
<select name="textColor">
<option value="black">黑色</option>
<option value="red">红色</option>
<option value="green">绿色</option>
<option value="blue">蓝色</option>
</select>
&nbsp;&nbsp;文件管理:&nbsp;&nbsp;
<a class="doc" href="document.jsp">
<img alt="文件管理" title="文件上传下载" src="images/documentMessage.png">
</a>
&nbsp;&nbsp;选择表情：&nbsp;&nbsp;
<img id="smallImg" alt="表情" title="发送表情" src="images/small1.png">
<div id="small" name="small">
<input type="radio" name="touxiang" value="images/f01.gif">
<img src="images/f01.gif">
<input type="radio" name="touxiang" value="images/f02.gif">
<img src="images/f02.gif">
<input type="radio" name="touxiang" value="images/f03.gif">
<img src="images/f03.gif">
<input type="radio" name="touxiang" value="images/f04.gif">
<img src="images/f04.gif">
</div>
<div id="send">
<input type="text" name="message" style="width: 300px; height: 30px;">
<input type="submit" id="sendButton" value="发送" class="login">
<input type="hidden" name="mess">
</div>
</form>
</body>
</html>