作业
HTML基本标记的练习
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>白居易的诗</title>
</head>
<body style="background-image: url('http://tohodog.top/1259726153.jpg'); background-repeat: no-repeat; background-position: center center; background-attachment: fixed; background-size: cover;">
<audio src="http://tohodog.top/Massive%20New%20Krew%20-%20Pellestyle.mp3"></audio>
<p align="center" style="font-family: 华文彩云, serif; color: green; font-size: 60px;">
<b>钱塘湖春行</b>
</p>
<hr color="red">
<p align="center" style="color: red; font-size: 30px;">
孤山寺北贾亭西，水面初平云脚低。<br>
<b>几处早莺争暖树，谁家新燕啄春泥。</b><br>
<i>乱花渐欲迷人眼，浅草才能没马蹄。</i><br>
<u>最爱西湖行不足，绿杨阴里白沙堤。</u>
</p>
<p style="color: blue;">
【说明】此诗为作者任杭州刺史时作。写西湖的山光水色、花草亭树，加上早莺、新燕生机盎然，旖旎动人。是摹写西湖秋色名篇。
</p>
<br>
<p align="center" style="font-size: 40px; color: red;">
此处为上标示例：R<sub>2</sub>=x<sub>2</sub>+y<sub>2</sub><br>
此处为下标示例：H<sub>2</sub>S<sub>2</sub>O<sub>4</sub><br>
</p>
</body>
</html>
HTML表格与HTML表单
创建网页文件sales.html，网页的标题为“ACME公司2014年销售输入”，使用合适的表格标记及属性显示ACME公司2013的4种产品4个季度的销售额。显示效果如下（单元格数据为随机值，可以使用font等标记设置颜色等外观样式
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8"/>
<title>test</title>
<style type="text/css">
td{
text-align: right;
}
tr{
text-align: center;
}
</style>
</head>
<body>
<table border="1" cellspacing="0" cellpadding="0">
<tr style="background-color: #0f243e; color: white"><th>产品/季度</th><th>一季度</th><th>二季度</th><th>三季度</th><th>四季度</th></tr>
<tr style="background-color: #d2eaf1"><th>Sass</th><td>1</td><td>1</td><td rowspan="2"><b>1</b></td><td>1</td></tr>
<tr><th>LESS</th><td rowspan="2"><b>1</b></td><td>1</td><td>1</td></tr>
<tr style="background-color: #d2eaf1"><th>Stylus</th><td>1</td><td>1</td><td>1</td></tr>
<tr><th>Myth</th><td>1</td><td>1</td><td>1</td><td>1</td></tr>
<tr style="background-color: #c0504d; color: orange"><th>SubTotal</th><td>1</td><td>1</td><td>1</td><td>1</td></tr>
<tr style="background-color: #c2d69b"><th>Total</th><td colspan="4"><u style="color: red"><i>¥1</i></u></td></tr>
</table>
</body>
</html>
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8"/>
<title>test</title>
<style type="text/css">
textarea{
width: 98%;
overflow: auto;
}
td{
text-align: left;
}
tr{
text-align: center;
}
</style>
</head>
<body>
<form>
<table border="1">
<tr style="background-color: #ccccff"><th>Name</th><th>Value</th></tr>
<tr><td>Sex</td><td><label><input type="text"></label></td></tr>
<tr><td>Sex</td><td><label><input type="radio" name="sex" value="male">Male<br><input type="radio" name="sex" value="female" checked>Female</label></td></tr>
<tr><td>Eye color</td><td><label><select name="eye color"><option value="green">green</option></select></label></td></tr>
<tr><td>Check all that apply</td><td><label><input type="checkbox" name="check" value="6"></label>Over 6 feet tall<br><label><input type="checkbox" name="check" value="200"></label>Over 200 pounds</td></tr>
<tr><td colspan="2">Describe your athletic ability:<br><label><textarea name="message" rows="10"></textarea></label><br></td></tr>
<tr><td colspan="2" style="text-align: center"><input type="submit" value="Entry my information"></td></tr>
</table>
</form>
</body>
</html>
使用HTML表格标记创建个人课程
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>test</title>
<style>
table{
width: 100%;
table-layout: fixed;
word-break: break-word;
text-align: center;
}
th{
background-color: rgb(0, 0, 0);
color: rgb(255, 255, 255);
}
.type1{
background: rgb(201, 201, 201);
}
.type2{
background: rgb(61, 181, 231);
}
.type3{
background: rgb(253, 140, 64);
}
.type4{
background: rgb(242, 156, 119);
}
</style>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script type="application/javascript">
$(function(){
var heighest = 0;
$('tr').each(function(){
heighest = ($(this).height() > heighest) ? $(this).height() : heighest;
});
$('tr').css('height',heighest + 'px');
});
</script>
</head>
<body>
<table>
<tr><th></th><th>周一</th><th>周二</th><th>周三</th><th>周四</th><th>周五</th><th>周六</th><th>周日</th></tr>
<tr>
<td rowspan="2">第一<br>大节</td>
<td rowspan="2" class="type1">网络应用程序设计@4201+4202（1-16周 全部）</td>
<td rowspan="2" class="type2">信息安全@1117（2-17周 全部）</td>
<td></td>
<td rowspan="2" class="type1">网络应用程序设计@4201+4202（1-16周 单周）</td>
<td></td><td></td><td></td>
</tr><tr></tr>
<tr>
<td rowspan="2">第二<br>大节</td>
<td></td>
<td rowspan="2" class="type2">信息安全@4203+4204（14-17周 全部）</td>
<td rowspan="2" class="type3">计算机图形学 @1305（1-9周 全部）</td>
<td rowspan="2" class="type3">计算机组成原理 @1115（1-14周 全部）</td>
<td rowspan="2" class="type3">计算机组成原理 @1109（1-14周 全部）</td>
<td></td><td></td>
</tr><tr></tr>
<tr>
<td rowspan="2">第三<br>大节</td>
<td rowspan="2" class="type3">计算机图形学 @1304（1-9周 全部）</td>
<td rowspan="2" class="type3">计算机专业英语@1105（1-16周 全部）</td>
<td rowspan="2" class="type4">算法分析与设计Ⅰ@1105（1-10周 全部）</td>
<td></td><td></td><td></td><td></td>
</tr><tr></tr>
<tr>
<td rowspan="2">第四<br>大节</td>
<td rowspan="2" class="type4">算法分析与设计Ⅰ@1105（1-10周 全部）</td>
<td></td><td></td><td></td>
<td rowspan="2" class="type4">算法分析与设计Ⅰ@4205+4206（4-11周 全部）</td>
<td></td><td></td>
</tr><tr></tr>
</table>
</body>
</html>
HTML5中的多媒体
创建网页文件audioshow.html，网页的标题为“请您欣赏音乐”，使用合适的多媒体标记及属性给网页加上背景音乐（提交作业时不需要提交音频源文件）。要求音乐自动播放，有播放、暂停和音量控件，循环播放2遍音乐
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>请您欣赏音乐</title>
</head>
<body>
<audio id="player" controls="controls" src="http://tohodog.top/Massive%20New%20Krew%20-%20Pellestyle.mp3" preload="auto"></audio>
<script type="text/javascript">
let times = 0, limit = 2;
document.getElementById('player').addEventListener('ended',() => {
if (++times < limit) {
document.getElementById('player').play();
}
})
</script>
</body>
</html>
创建网页文件videoshow.html，网页的标题为“请您观看视频”，使用合适的多媒体标记及属性给网页添加视频，视频文件为mp4格式（提交作业时不需要提交视频源文件）。要求视频自动播放，有播放、暂停和音量控件，视频不循环播放。
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>请您观看视频</title>
</head>
<body>
<video src="http://tohodog.top/CG_Temp.mp4" controls="controls" autoplay="autoplay"></video>
</body>
</html>
创建网页文件marqueeshow.html，网页的标题为“跑马灯演示”，效果如下图所示，要求内容标题“welcome to you”为黄底红字，文字从左向右移动，滚动方式为alternate，滚动速度为10像素，滚动循环3次。
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>跑马灯演示</title>
</head>
<body>
<marquee direction="right" behavior="alternate" scrollamount="10" loop="3" style="color: red;background-color: yellow;font-size: 100px;">welcome to you</marquee>
</body>
</html>
JavaScript基本概念
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8"/>
<title>test</title>
</head>
<body>
<label>
<input type="text" id="input" value="" maxlength="4">
<button onclick="((date) => alert([
'不存在的', '不存在的', '摩羯座', '水瓶座', '不存在的', '水瓶座', '双鱼座', '不存在的',
'双鱼座', '白羊座', '不存在的', '白羊座', '金牛座', '不存在的', '金牛座','双子座',
'不存在的', '双子座', '巨蟹座', '不存在的', '巨蟹座', '狮子座', '不存在的', '狮子座',
'处女座', '不存在的', '处女座', '天秤座', '不存在的', '天秤座', '天蝎座', '不存在的',
'天蝎座', '射手座', '不存在的', '射手座', '摩羯座', '不存在的'][[
0, 100, 120, 131, 200, 219, 229, 300, 321, 331, 400, 420, 430, 500, 521, 531,
600, 622, 630, 700, 723, 731, 800, 823, 831, 900, 923, 930, 1000, 1024, 1031,
1100, 1123, 1130, 1200, 1222, 1231]
.filter(i => /^[\d]{4}$/.test(date) && i < date).length]))(
document.getElementById('input').value)">查询星座</button>
</label>
</body>
</html>
期中
index.html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8">
<title>Aj Chat v1.0</title>
<!--Index-->
<style type="text/css">
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-weight: 300;
}
body,td,th {
font-family: "Source Sans Pro", sans-serif;
}
body {
background-color: #80ccff;
font-family: 'Source Sans Pro', sans-serif;
color: white;
font-weight: 300;
}
body ::-webkit-input-placeholder {
/* WebKit browsers */
font-family: 'Source Sans Pro', sans-serif;
color: white;
font-weight: 300;
}
body :-moz-placeholder {
/* Mozilla Firefox 4 to 18 */
font-family: 'Source Sans Pro', sans-serif;
color: white;
opacity: 1;
font-weight: 300;
}
body ::-moz-placeholder {
/* Mozilla Firefox 19+ */
font-family: 'Source Sans Pro', sans-serif;
color: white;
opacity: 1;
font-weight: 300;
}
body :-ms-input-placeholder {
/* Internet Explorer 10+ */
font-family: 'Source Sans Pro', sans-serif;
color: white;
font-weight: 300;
}
.wrapper {
background: #50a3a2;
background: -webkit-linear-gradient(top left, #50a3a2 0%, #53e3a6 100%);
background: linear-gradient(to bottom right, #3899d2 0%, #09859c 100%);
opacity: 0.8;
position: absolute;
/* top: 50%; */
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
display: flex;
z-index: 2;
}
.wrapper.form-success .container h1 {
-webkit-transform: translateY(85px);
-ms-transform: translateY(85px);
transform: translateY(85px);
}
.container {
max-width: 600px;
margin: auto auto;
padding: 80px 0;
height: 400px;
text-align: center;
transform: translateY(-50%);
z-index: 2;
}
.container h1 {
font-size: 40px;
-webkit-transition-duration: 1s;
transition-duration: 1s;
-webkit-transition-timing-function: ease-in-put;
transition-timing-function: ease-in-put;
font-weight: 200;
z-index: 2;
}
form {
padding: 20px 0;
position: relative;
z-index: 3;
}
form input {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
outline: 0;
border: 1px solid rgba(255, 255, 255, 0.4);
background-color: rgba(255, 255, 255, 0.2);
width: 250px;
border-radius: 3px;
padding: 10px 15px;
margin: 0 auto 10px auto;
display: block;
text-align: center;
font-size: 18px;
color: white;
-webkit-transition-duration: 0.25s;
transition-duration: 0.25s;
font-weight: 300;
}
form input:hover {
background-color: rgba(255, 255, 255, 0.4);
}
form input:focus {
background-color: white;
width: 300px;
color: #1089b9;
}
form button {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
outline: 0;
background-color: white;
border: 0;
padding: 10px 15px;
color: #0d8eff;
border-radius: 3px;
width: 124px;
cursor: pointer;
font-size: 18px;
-webkit-transition-duration: 0.25s;
transition-duration: 0.25s;
}
form button:hover {
background-color: #166bb5;
color: #bfeaff;
}
.footer {
z-index: 10;
position: fixed;
text-align: center;
margin-bottom: 20px;
/*bottom: 0;*/
left:0px;
right:0px;
}
.footer a {
text-decoration:none;
color: #fff;
}
#activation {
text-decoration:none;
color: #fff;
z-index: 0;
}
#actp {
margin-bottom: 10px;
}
.bg-bubbles {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
}
.bg-bubbles li {
position: absolute;
list-style: none;
display: block;
width: 40px;
height: 40px;
background-color: rgba(255, 255, 255, 0.15);
bottom: -160px;
-webkit-animation: square 25s infinite;
animation: square 25s infinite;
-webkit-transition-timing-function: linear;
transition-timing-function: linear;
}
.bg-bubbles li:nth-child(1) {
left: 10%;
}
.bg-bubbles li:nth-child(2) {
left: 20%;
width: 80px;
height: 80px;
-webkit-animation-delay: 2s;
animation-delay: 2s;
-webkit-animation-duration: 17s;
animation-duration: 17s;
}
.bg-bubbles li:nth-child(3) {
left: 25%;
-webkit-animation-delay: 4s;
animation-delay: 4s;
}
.bg-bubbles li:nth-child(4) {
left: 40%;
width: 60px;
height: 60px;
-webkit-animation-duration: 22s;
animation-duration: 22s;
background-color: rgba(255, 255, 255, 0.25);
}
.bg-bubbles li:nth-child(5) {
left: 70%;
}
.bg-bubbles li:nth-child(6) {
left: 80%;
width: 120px;
height: 120px;
-webkit-animation-delay: 3s;
animation-delay: 3s;
background-color: rgba(255, 255, 255, 0.2);
}
.bg-bubbles li:nth-child(7) {
left: 32%;
width: 160px;
height: 160px;
-webkit-animation-delay: 7s;
animation-delay: 7s;
}
.bg-bubbles li:nth-child(8) {
left: 55%;
width: 20px;
height: 20px;
-webkit-animation-delay: 15s;
animation-delay: 15s;
-webkit-animation-duration: 40s;
animation-duration: 40s;
}
.bg-bubbles li:nth-child(9) {
left: 25%;
width: 10px;
height: 10px;
-webkit-animation-delay: 2s;
animation-delay: 2s;
-webkit-animation-duration: 40s;
animation-duration: 40s;
background-color: rgba(255, 255, 255, 0.3);
}
.bg-bubbles li:nth-child(10) {
left: 90%;
width: 160px;
height: 160px;
-webkit-animation-delay: 11s;
animation-delay: 11s;
}
@-webkit-keyframes square {
0% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: translateY(-700px) rotate(600deg);
transform: translateY(-700px) rotate(600deg);
}
}
@keyframes square {
0% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: translateY(-700px) rotate(600deg);
transform: translateY(-700px) rotate(600deg);
}
}
</style>
<!--MessageBox-->
<style type="text/css">
#snackbar {
visibility: hidden;
min-width: 250px;
margin-left: -125px;
background-color: firebrick;
color: #fff;
text-align: center;
border-radius: 2px;
padding: 16px;
position: fixed;
left: 50%;
top: 30px;
font-size: 17px;
}
#snackbar.show {
visibility: visible;
-webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
animation: fadein 0.5s, fadeout 0.5s 2.5s;
}
#snackbar-ok {
visibility: hidden;
min-width: 250px;
margin-left: -125px;
background-color: forestgreen;
color: #fff;
text-align: center;
border-radius: 2px;
padding: 16px;
position: fixed;
left: 50%;
top: 30px;
font-size: 17px;
}
#snackbar-ok.show {
visibility: visible;
-webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
animation: fadein 0.5s, fadeout 0.5s 2.5s;
}
@-webkit-keyframes fadein {
from {top: 0; opacity: 0;}
to {top: 30px; opacity: 1;}
}
@keyframes fadein {
from {top: 0; opacity: 0;}
to {top: 30px; opacity: 1;}
}
@-webkit-keyframes fadeout {
from {top: 30px; opacity: 1;}
to {top: 0; opacity: 0;}
}
@keyframes fadeout {
from {top: 30px; opacity: 1;}
to {top: 0; opacity: 0;}
}
</style>
<!--Chat-->
<style type="text/css">
#up {
background-color: #007bff;
line-height: 1.5;
padding: .3125rem 1rem .3125rem;
margin-right: 1rem;
font-size: 1.5rem;
width: 100%;
}
#chat-display {
color: black;
position: absolute;
top: 50px;
overflow: scroll;
padding-left: 20px;
width: 100%;
bottom: 60px;
font-size: 25px;
}
#chat-send {
bottom: 10px;
position: absolute;
padding-left: 10px;
display: flex;
flex-flow: row;
}
#chat-page {
display: flex;
}
#chat-text {
height: 38px;
vertical-align: middle;
font-size: 30px;
}
#chat-button {
width: 62px;
height: 38px;
background-color: #007bff;
border-color: #007bff;
color: white;
margin-left: 10px;
}
.un {
font-size: 38px;
}
sub {
font-size: 15px;
}
</style>
<!--MD5-->
<script type="application/javascript">
/*
* A JavaScript implementation of the RSA Data Security, Inc. MD5 Message
* Digest Algorithm, as defined in RFC 1321.
* Version 2.1 Copyright (C) Paul Johnston 1999 - 2002.
* Other contributors: Greg Holt, Andrew Kepert, Ydnar, Lostinet
* Distributed under the BSD License
* See http://pajhome.org.uk/crypt/md5 for more info.
*/
/*
* Configurable variables. You may need to tweak these to be compatible with
* the server-side, but the defaults work in most cases.
*/
var hexcase = 0; /* hex output format. 0 - lowercase; 1 - uppercase */
var b64pad = ""; /* base-64 pad character. "=" for strict RFC compliance */
var chrsz = 8; /* bits per input character. 8 - ASCII; 16 - Unicode */
/*
* These are the functions you'll usually want to call
* They take string arguments and return either hex or base-64 encoded strings
*/
function hex_md5(s) {
s = s + 'iriszero';
return binl2hex(core_md5(str2binl(s), s.length * chrsz));
}
function b64_md5(s){ return binl2b64(core_md5(str2binl(s), s.length * chrsz));}
function str_md5(s){ return binl2str(core_md5(str2binl(s), s.length * chrsz));}
function hex_hmac_md5(key, data) { return binl2hex(core_hmac_md5(key, data)); }
function b64_hmac_md5(key, data) { return binl2b64(core_hmac_md5(key, data)); }
function str_hmac_md5(key, data) { return binl2str(core_hmac_md5(key, data)); }
/*
* Calculate the MD5 of an array of little-endian words, and a bit length
*/
function core_md5(x, len)
{
/* append padding */
x[len >> 5] |= 0x80 << ((len) % 32);
x[(((len + 64) >>> 9) << 4) + 14] = len;
var a = 1732584193;
var b = -271733879;
var c = -1732584194;
var d = 271733878;
for(var i = 0; i < x.length; i += 16)
{
var olda = a;
var oldb = b;
var oldc = c;
var oldd = d;
a = md5_ff(a, b, c, d, x[i+ 0], 7 , -680876936);
d = md5_ff(d, a, b, c, x[i+ 1], 12, -389564586);
c = md5_ff(c, d, a, b, x[i+ 2], 17, 606105819);
b = md5_ff(b, c, d, a, x[i+ 3], 22, -1044525330);
a = md5_ff(a, b, c, d, x[i+ 4], 7 , -176418897);
d = md5_ff(d, a, b, c, x[i+ 5], 12, 1200080426);
c = md5_ff(c, d, a, b, x[i+ 6], 17, -1473231341);
b = md5_ff(b, c, d, a, x[i+ 7], 22, -45705983);
a = md5_ff(a, b, c, d, x[i+ 8], 7 , 1770035416);
d = md5_ff(d, a, b, c, x[i+ 9], 12, -1958414417);
c = md5_ff(c, d, a, b, x[i+10], 17, -42063);
b = md5_ff(b, c, d, a, x[i+11], 22, -1990404162);
a = md5_ff(a, b, c, d, x[i+12], 7 , 1804603682);
d = md5_ff(d, a, b, c, x[i+13], 12, -40341101);
c = md5_ff(c, d, a, b, x[i+14], 17, -1502002290);
b = md5_ff(b, c, d, a, x[i+15], 22, 1236535329);
a = md5_gg(a, b, c, d, x[i+ 1], 5 , -165796510);
d = md5_gg(d, a, b, c, x[i+ 6], 9 , -1069501632);
c = md5_gg(c, d, a, b, x[i+11], 14, 643717713);
b = md5_gg(b, c, d, a, x[i+ 0], 20, -373897302);
a = md5_gg(a, b, c, d, x[i+ 5], 5 , -701558691);
d = md5_gg(d, a, b, c, x[i+10], 9 , 38016083);
c = md5_gg(c, d, a, b, x[i+15], 14, -660478335);
b = md5_gg(b, c, d, a, x[i+ 4], 20, -405537848);
a = md5_gg(a, b, c, d, x[i+ 9], 5 , 568446438);
d = md5_gg(d, a, b, c, x[i+14], 9 , -1019803690);
c = md5_gg(c, d, a, b, x[i+ 3], 14, -187363961);
b = md5_gg(b, c, d, a, x[i+ 8], 20, 1163531501);
a = md5_gg(a, b, c, d, x[i+13], 5 , -1444681467);
d = md5_gg(d, a, b, c, x[i+ 2], 9 , -51403784);
c = md5_gg(c, d, a, b, x[i+ 7], 14, 1735328473);
b = md5_gg(b, c, d, a, x[i+12], 20, -1926607734);
a = md5_hh(a, b, c, d, x[i+ 5], 4 , -378558);
d = md5_hh(d, a, b, c, x[i+ 8], 11, -2022574463);
c = md5_hh(c, d, a, b, x[i+11], 16, 1839030562);
b = md5_hh(b, c, d, a, x[i+14], 23, -35309556);
a = md5_hh(a, b, c, d, x[i+ 1], 4 , -1530992060);
d = md5_hh(d, a, b, c, x[i+ 4], 11, 1272893353);
c = md5_hh(c, d, a, b, x[i+ 7], 16, -155497632);
b = md5_hh(b, c, d, a, x[i+10], 23, -1094730640);
a = md5_hh(a, b, c, d, x[i+13], 4 , 681279174);
d = md5_hh(d, a, b, c, x[i+ 0], 11, -358537222);
c = md5_hh(c, d, a, b, x[i+ 3], 16, -722521979);
b = md5_hh(b, c, d, a, x[i+ 6], 23, 76029189);
a = md5_hh(a, b, c, d, x[i+ 9], 4 , -640364487);
d = md5_hh(d, a, b, c, x[i+12], 11, -421815835);
c = md5_hh(c, d, a, b, x[i+15], 16, 530742520);
b = md5_hh(b, c, d, a, x[i+ 2], 23, -995338651);
a = md5_ii(a, b, c, d, x[i+ 0], 6 , -198630844);
d = md5_ii(d, a, b, c, x[i+ 7], 10, 1126891415);
c = md5_ii(c, d, a, b, x[i+14], 15, -1416354905);
b = md5_ii(b, c, d, a, x[i+ 5], 21, -57434055);
a = md5_ii(a, b, c, d, x[i+12], 6 , 1700485571);
d = md5_ii(d, a, b, c, x[i+ 3], 10, -1894986606);
c = md5_ii(c, d, a, b, x[i+10], 15, -1051523);
b = md5_ii(b, c, d, a, x[i+ 1], 21, -2054922799);
a = md5_ii(a, b, c, d, x[i+ 8], 6 , 1873313359);
d = md5_ii(d, a, b, c, x[i+15], 10, -30611744);
c = md5_ii(c, d, a, b, x[i+ 6], 15, -1560198380);
b = md5_ii(b, c, d, a, x[i+13], 21, 1309151649);
a = md5_ii(a, b, c, d, x[i+ 4], 6 , -145523070);
d = md5_ii(d, a, b, c, x[i+11], 10, -1120210379);
c = md5_ii(c, d, a, b, x[i+ 2], 15, 718787259);
b = md5_ii(b, c, d, a, x[i+ 9], 21, -343485551);
a = safe_add(a, olda);
b = safe_add(b, oldb);
c = safe_add(c, oldc);
d = safe_add(d, oldd);
}
return Array(a, b, c, d);
}
/*
* These functions implement the four basic operations the algorithm uses.
*/
function md5_cmn(q, a, b, x, s, t)
{
return safe_add(bit_rol(safe_add(safe_add(a, q), safe_add(x, t)), s),b);
}
function md5_ff(a, b, c, d, x, s, t)
{
return md5_cmn((b & c) | ((~b) & d), a, b, x, s, t);
}
function md5_gg(a, b, c, d, x, s, t)
{
return md5_cmn((b & d) | (c & (~d)), a, b, x, s, t);
}
function md5_hh(a, b, c, d, x, s, t)
{
return md5_cmn(b ^ c ^ d, a, b, x, s, t);
}
function md5_ii(a, b, c, d, x, s, t)
{
return md5_cmn(c ^ (b | (~d)), a, b, x, s, t);
}
/*
* Calculate the HMAC-MD5, of a key and some data
*/
function core_hmac_md5(key, data)
{
var bkey = str2binl(key);
if(bkey.length > 16) bkey = core_md5(bkey, key.length * chrsz);
var ipad = Array(16), opad = Array(16);
for(var i = 0; i < 16; i++)
{
ipad[i] = bkey[i] ^ 0x36363636;
opad[i] = bkey[i] ^ 0x5C5C5C5C;
}
var hash = core_md5(ipad.concat(str2binl(data)), 512 + data.length * chrsz);
return core_md5(opad.concat(hash), 512 + 128);
}
/*
* Add integers, wrapping at 2^32. This uses 16-bit operations internally
* to work around bugs in some JS interpreters.
*/
function safe_add(x, y)
{
var lsw = (x & 0xFFFF) + (y & 0xFFFF);
var msw = (x >> 16) + (y >> 16) + (lsw >> 16);
return (msw << 16) | (lsw & 0xFFFF);
}
/*
* Bitwise rotate a 32-bit number to the left.
*/
function bit_rol(num, cnt)
{
return (num << cnt) | (num >>> (32 - cnt));
}
/*
* Convert a string to an array of little-endian words
* If chrsz is ASCII, characters >255 have their hi-byte silently ignored.
*/
function str2binl(str)
{
var bin = Array();
var mask = (1 << chrsz) - 1;
for(var i = 0; i < str.length * chrsz; i += chrsz)
bin[i>>5] |= (str.charCodeAt(i / chrsz) & mask) << (i%32);
return bin;
}
/*
* Convert an array of little-endian words to a string
*/
function binl2str(bin)
{
var str = "";
var mask = (1 << chrsz) - 1;
for(var i = 0; i < bin.length * 32; i += chrsz)
str += String.fromCharCode((bin[i>>5] >>> (i % 32)) & mask);
return str;
}
/*
* Convert an array of little-endian words to a hex string.
*/
function binl2hex(binarray)
{
var hex_tab = hexcase ? "0123456789ABCDEF" : "0123456789abcdef";
var str = "";
for(var i = 0; i < binarray.length * 4; i++)
{
str += hex_tab.charAt((binarray[i>>2] >> ((i%4)*8+4)) & 0xF) +
hex_tab.charAt((binarray[i>>2] >> ((i%4)*8 )) & 0xF);
}
return str;
}
/*
* Convert an array of little-endian words to a base-64 string
*/
function binl2b64(binarray)
{
var tab = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/";
var str = "";
for(var i = 0; i < binarray.length * 4; i += 3)
{
var triplet = (((binarray[i >> 2] >> 8 * ( i %4)) & 0xFF) << 16)
| (((binarray[i+1 >> 2] >> 8 * ((i+1)%4)) & 0xFF) << 8 )
| ((binarray[i+2 >> 2] >> 8 * ((i+2)%4)) & 0xFF);
for(var j = 0; j < 4; j++)
{
if(i * 8 + j * 6 > binarray.length * 32) str += b64pad;
else str += tab.charAt((triplet >> 6*(3-j)) & 0x3F);
}
}
return str;
}
</script>
<!--jQuery-->
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<!--MessageBox-->
<script type="application/javascript">
let MessageBox = (msg) => {
$('#error-msg').text(msg);
let sb = document.getElementById('snackbar');
sb.className = 'show';
setTimeout(() => {
sb.className = '';
location.reload();
}, 3000);
}
let MessageBoxOk = (msg) => {
$('#error-msg').text(msg);
let sb = document.getElementById('snackbar-ok');
sb.className = 'show';
setTimeout(() => {
sb.className = '';
location.reload();
}, 3000);
}
</script>
<!--WebSocket-->
<script type="application/javascript">
let reg = false;
let init = true;
let host = window.location.host.split(':')[0];
let ws = new WebSocket("ws://" + host + ":9001/");
ws.onopen = (evt) => console.log("connect success.");
ws.onmessage = (evt) => {
if (reg) {
if (evt.data === 'true') {
reg = false;
MessageBoxOk("ok");
} else {
MessageBox(evt.data);
}
} else if (init) {
if (evt.data === 'true') {
init = false;
$(".wrapper").fadeOut(500);
$("body").css("background-color", "unset");
$("#chat-page").attr('style', '');
} else {
MessageBox(evt.data);
}
} else {
console.log(evt.data);
$('#chat-display').append('<p>' + evt.data + '</p>');
let cd = document.getElementById('chat-display');
cd.scrollTop = cd.scrollHeight;
}
};
ws.onclose = (evt) => console.log("connect closed.");
</script>
</head>
<body>
<div id="chat-page" style="display: none">
<div id="up">
<nav>
<strong>
AJ Chat
</strong>
</nav>
</div>
<div id="chat-display">
<p>
<b class="un">admin</b>: aj!
</p>
</div>
<div id="chat-send">
<label>
<input id="chat-text">
</label>
<button type="button" id="chat-button" onclick="(() => {
let m = $('#chat-text');
let mv = m.val();
if (mv.length !== 0) {
ws.send(mv);
m.val('');
}
})()">Send</button>
</div>
</div>
<div class="wrapper">
<div id="snackbar"><strong id="error-msg">发生致命错误!</strong></div>
<div id="snackbar-ok"><strong id="ok-msg">ok</strong></div>
<div class="container">
<h1>AJ Chat</h1>
<form class="form">
<label>
<input id="username" type="text" placeholder="Username" maxlength="30">
<input id="password" type="password" placeholder="Password">
</label>
<button type="button" id="login-button" onclick="(() => {
let u = $('#username').val();
let p = $('#password').val();
if (u.length !== 0 && p.length !== 0) {
ws.send('l ' + window.btoa(window.encodeURIComponent(u)) + ' ' + hex_md5(p));
}
})()">Login</button>
<button type="button" id="register-button" onclick="(() => {
let u = $('#username').val();
let p = $('#password').val();
if (u.length !== 0 && p.length !== 0) {
reg = true;
ws.send('r ' + window.btoa(window.encodeURIComponent(u)) + ' ' + hex_md5(p));
}
})()">Register</button>
</form>
</div>
<ul class="bg-bubbles">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</body>
</html>
Servlet.java
package FuckServlet;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.*;
import java.net.ServerSocket;
import java.net.Socket;
import java.util.*;
import java.util.concurrent.locks.Lock;
import java.util.concurrent.locks.ReentrantLock;
import java.nio.charset.StandardCharsets;
import java.security.MessageDigest;
import java.security.NoSuchAlgorithmException;
import java.net.URLDecoder;
@WebServlet("/Fuck")
public class Servlet extends HttpServlet
{
private static final int ThreadNum = 100;
private static final String DatabasePath = "shitlet.db";
private Map<String, String> database = new HashMap<>();
private List<String> history = new LinkedList<>();
private List<Thread> pool = new ArrayList<>();
private List<OutputStream> clients = new ArrayList<>();
private Lock lock = new ReentrantLock();
private ServerSocket ws;
private void UpdateMessage(String msg)
{
lock.lock();
System.out.println(msg);
history.add(msg);
byte[] data = WebSocketEncode(msg);
clients.forEach((x) ->
{
if (x != null)
{
try
{
x.write(data);
}
catch (IOException e)
{
log(e.getMessage());
}
}
});
lock.unlock();
}
private void SyncMessage(String msg, int id)
{
try
{
clients.get(id).write(WebSocketEncode(msg));
}
catch (IOException e)
{
log(e.getMessage());
}
}
private byte[] SHA1Hash(byte[] bytes) throws NoSuchAlgorithmException
{
MessageDigest md = MessageDigest.getInstance("SHA-1");
md.update(bytes);
return md.digest();
}
private String SecWebSocketAccept(String key)
{
try
{
return new String(Base64.getEncoder().encode((SHA1Hash((key + "258EAFA5-E914-47DA-95CA-C5AB0DC85B11").getBytes()))));
}
catch (Exception e)
{
e.printStackTrace();
return "";
}
}
public String WebSocketDecode(byte[] raw, int len)
{
byte rLength = 0;
int rMaskIndex = 2;
int rDataStart = 0;
byte data = raw[1];
byte op = (byte) 127;
rLength = (byte) (data & op);
if (rLength == (byte) 126) rMaskIndex = 4;
if (rLength == (byte) 127) rMaskIndex = 10;
byte[] masks = new byte[4];
int j = 0;
int i = 0;
for (i = rMaskIndex; i < (rMaskIndex + 4); i++)
{
masks[j] = raw[i];
j++;
}
rDataStart = rMaskIndex + 4;
int messLen = len - rDataStart;
byte[] message = new byte[messLen];
for (i = rDataStart, j = 0; i < len; i++, j++)
{
message[j] = (byte) (raw[i] ^ masks[j % 4]);
}
return new String(message, StandardCharsets.UTF_8);
}
private byte[] WebSocketEncode(String raw)
{
byte[] rawData = raw.getBytes(StandardCharsets.UTF_8);
int frameCount = 0;
byte[] frame = new byte[10];
frame[0] = (byte) 129;
if (rawData.length <= 125)
{
frame[1] = (byte) rawData.length;
frameCount = 2;
}
else if (rawData.length <= 65535)
{
frame[1] = (byte) 126;
int len = rawData.length;
frame[2] = (byte) ((len >> 8) & (byte) 255);
frame[3] = (byte) (len & (byte) 255);
frameCount = 4;
}
else
{
frame[1] = (byte) 127;
int len = rawData.length;
frame[2] = (byte) ((len >> 56) & (byte) 255);
frame[3] = (byte) ((len >> 48) & (byte) 255);
frame[4] = (byte) ((len >> 40) & (byte) 255);
frame[5] = (byte) ((len >> 32) & (byte) 255);
frame[6] = (byte) ((len >> 24) & (byte) 255);
frame[7] = (byte) ((len >> 16) & (byte) 255);
frame[8] = (byte) ((len >> 8) & (byte) 255);
frame[9] = (byte) (len & (byte) 255);
frameCount = 10;
}
int bLength = frameCount + rawData.length;
byte[] reply = new byte[bLength];
int bLim = 0;
for (int i = 0; i < frameCount; i++)
{
reply[bLim] = frame[i];
bLim++;
}
for (byte rawDatum : rawData)
{
reply[bLim] = rawDatum;
bLim++;
}
return reply;
}
private void LoadDatabase(Map<String, String> db) throws IOException
{
BufferedReader br = new BufferedReader(new FileReader(DatabasePath));
String line;
while ((line = br.readLine()) != null)
{
String[] up = line.split(" ");
db.put(up[0], up[1]);
}
br.close();
}
private void UpdateDatabase(Map<String, String> db, String[] up) throws IOException
{
lock.lock();
database.put(up[1], up[2]);
FileWriter fw = new FileWriter(new File(DatabasePath), true);
fw.write(Arrays.stream(up).skip(1).reduce((a, b) -> a + ' ' + b).get() + "\n");
fw.close();
lock.unlock();
}
private String CheckUser(String[] up)
{
Arrays.stream(up).forEach(System.out::println);
try
{
if (up.length != 3
|| Base64.getDecoder().decode(up[1]).length > 30
|| !up[2].matches("^[A-Za-z0-9]{32}$"))
{
return "Invalid Username/Password";
}
if (up[0].equals("l") && database.containsKey(up[1]) && up[2].equals(database.get(up[1])))
{
return "true";
}
if (up[0].equals("r") && !database.containsKey(up[1]))
{
UpdateDatabase(database, up);
return "true";
}
}
catch (Exception e)
{
e.printStackTrace();
}
return "Invalid Username/Password";
}
@Override
public void init() throws ServletException
{
super.init();
try
{
LoadDatabase(database);
}
catch (IOException e)
{
try
{
new File(DatabasePath).createNewFile();
}
catch (IOException ex)
{
ex.printStackTrace();
}
}
try
{
ws = new ServerSocket(27015);
}
catch (IOException e)
{
e.printStackTrace();
}
for (int i = 0; i < ThreadNum; ++i)
{
clients.add(null);
}
for (int i = 0; i < ThreadNum; ++i)
{
int id = i;
pool.add(new Thread(() ->
{
while (true)
{
try
{
Socket sock = ws.accept();
InputStream inputStream = sock.getInputStream();
OutputStream outputStream = sock.getOutputStream();
clients.set(id, outputStream);
byte[] buf = new byte[4096];
int len = 0;
StringBuilder request = new StringBuilder();
while ((len = inputStream.read(buf, 0, 4096)) == 4096)
request.append(new String(buf, 0, 4096));
request.append(new String(buf, 0, len));
if (request.toString().contains("Upgrade: websocket"))
{
outputStream.write((
"HTTP/1.1 101 Switching Protocols\r\n" +
"Upgrade: websocket\r\n" +
"Connection: Upgrade\r\n" +
"Sec-WebSocket-Accept: " +
SecWebSocketAccept(
request
.toString()
.split("Sec-WebSocket-Key: ")[1]
.split("\r\n")[0]) +
"\r\n\r\n").getBytes());
len = inputStream.read(buf, 0, 4096);
String[] up = WebSocketDecode(buf, len).split(" ");
String msg = CheckUser(up);
outputStream.write(WebSocketEncode(msg));
if (msg.equals("true") && up[0].equals("l"))
{
history.forEach((x) -> SyncMessage(x, id));
while (true)
{
len = inputStream.read(buf, 0, 4096);
if (len > 0)
{
UpdateMessage(
"<b class=\"un\">" +
URLDecoder.decode(
new String(Base64.getDecoder().decode(up[1])),
StandardCharsets.UTF_8) + "</b>: " +
WebSocketDecode(buf, len)
.replace("<","<")
.replace(">", ">")
.replace(" ", " ") +
"<sub> " +
new java.util.Date().toString() + "</sub>");
}
}
}
sock.close();
clients.set(id, null);
}
else
{
sock.close();
clients.set(id, null);
}
}
catch (IOException e)
{
e.printStackTrace();
clients.set(id, null);
}
}
}));
pool.get(id).start();
}
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException
{
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException
{
response.setContentType("text/html");
response.getWriter().println("<h1>Fuck Servlet</h1>");
}
}