web课作业-526互联

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script>
function drawShapes() {
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');

// 绘制直角三角形
ctx.beginPath();
ctx.moveTo(50, 200);
ctx.lineTo(250, 200);
ctx.lineTo(150, 50);
ctx.closePath();
ctx.lineWidth = 2;
ctx.strokeStyle = 'blue';
ctx.stroke();

// 填充一个半圆
ctx.beginPath();
ctx.arc(150, 200, 100, 0, Math.PI, false); //调整圆的位置，使其正向显示
ctx.fillStyle = 'red';
ctx.fill();
}
</script>
<style>
/* 第一条新闻 */
ul li:first-child {
font-family: "宋体", sans-serif;
font-weight: bold;
font-size: 20px;
}

/* 从第二条开始，每2行设置样式为：蓝色字体，加粗 */
ul li:nth-child(2n) {
color: blue;
font-weight: bold;
}

/* 列表标记类型为：空心方块 */
ul {
list-style-type: square;
}

.back-to-top {
position: fixed;
right: 50px;
bottom: 30px;
width: 80px;
height: 80px;
border: 2px solid black;
border-radius: 50%;
background-color: yellow;
text-align: center;
line-height: 80px;
font-family: "宋体", sans-serif;
font-size: 15px;
}

/* 鼠标悬停时改变背景颜色 */
.back-to-top:hover {
background-color: lightyellow;
}

/* 表单样式 */
form {
display: flex;
flex-direction: column;
align-items: flex-start;
margin-bottom: 20px;
}

label {
margin-bottom: 5px;
}

input[type="text"],
select {
margin-bottom: 10px;
width: 200px;
}

input[type="submit"],
input[type="reset"] {
margin-top: 10px;
}

canvas {
border: 1px solid black;
}

body {
margin: 0;
padding: 0;
}
canvas {
border: 1px solid #000;
display: block;
margin: auto;
}
</style>
</head>
<body>
<ul>
<li><a href="https://ys.mihoyo.com/cloud/?autobegin=1&utm_source=default">原神网页版</a></li>
<li><a href="https://ys-api.mihoyo.com/event/download_porter/link/ys_cn/official/ios_default"download>ios原神下载</a></li>
<li><a href="https://ys-api.mihoyo.com/event/download_porter/link/ys_cn/official/android_default"download>安卓原神下载</a></li>
<li><a href="https://ys-api.mihoyo.com/event/download_porter/link/ys_cn/official/pc_default"download>pc原神下载</a></li>
<li><a href="https://ys-api.mihoyo.com/event/download_porter/link/ys_cn/official/taptappc_default"download>taptap原神下载</a></li>
<li><a href="https://ys.mihoyo.com/main/news/detail/29814">更新公告</a></li>
</ul>
<a href="#" class="back-to-top">回到顶部</a>


<form>
<label for="city">期望就业城市：</label>
<input type="text" id="city" name="city">

<label for="direction">就业方向：</label>
<input type="checkbox" id="backend" name="direction" value="后端开发">
<label for="backend">后端开发</label>
<input type="checkbox" id="frontend" name="direction" value="前端开发">
<label for="frontend">前端开发</label>
<input type="checkbox" id="multimedia" name="direction" value="多媒体">
<label for="multimedia">多媒体</label>
<input type="checkbox" id="civil_service" name="direction" value="考公">
<label for="civil_service">考公</label>
<input type="checkbox" id="other" name="direction" value="其他">
<label for="other">其他</label>

<label for="career">职业规划：</label>
<select id="career" name="career">
<option value="就业">就业</option>
<option value="考公">考公</option>
<option value="考研">考研</option>
</select>

<input type="submit" value="提交">
<input type="reset" value="重置">
</form>

<script>
// 获取表单元素
const form = document.querySelector('form');
const cityInput = document.getElementById('city');
const directionCheckboxes = document.querySelectorAll('input[name="direction"]');
const careerSelect = document.getElementById('career');

// 提交表单事件处理函数
form.addEventListener('submit', (event) => {
event.preventDefault(); // 阻止表单默认提交行为

// 读取表单域内容
const city = cityInput.value;
let direction = '';
directionCheckboxes.forEach((checkbox) => {
if (checkbox.checked) {
direction += checkbox.value + ' ';
}
});
const career = careerSelect.value;

// 在按钮下方显示输出
const output = document.createElement('p');
output.textContent = `期望就业城市：${city}\n就业方向：${direction}\n职业规划：${career}`;
form.appendChild(output);
});
</script>

</script>
<canvas id="myCanvas" width="300" height="300"></canvas><br><br>
<button onclick="drawShapes()">作画</button>
</body>
</body>
</html>