web实验三
三四个小时左右吧，做成功了学到新东西了，还是挺有趣的，好玩。还有些功能没做完，暂时这样了，要交了。
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>个人基本资料</title>
<link rel="stylesheet" href="1.css">
<link rel="stylesheet" href="base.css">
<script src="1.js"></script>
</head>
<body>
<div id="menu">
<div>
<a href="" class="change">基本资料</a>
</div><br>
<a href="" class="change1">职业理想</a>
</div>
<div id="top">
<div class="time"></div>
<div class="search">
<input type="search" name="" id="input">
<button>search</button>
</div>
</div>
<div id="body1"></div>
<div id="body">
<div class="up">
<h1>个人基本资料</h1>
</div>
<div class="mid">
<div id="form">
<form action="">
<label for="">昵称：</label>
<input type="text" class="in">
<label for="">邮箱：</label>
<input type="text" class="in">
<br>
<label for="">生日：</label>
<input type="text" class="in">
<label for="">年龄：</label>
<input type="text" class="in"><br>
<div class="checkbox">
<label for="">爱好：</label>
<div><input type="checkbox"><label for="">阅读</label></div>
<div><input type="checkbox"><label for="">音乐</label></div>
<div><input type="checkbox"><label for="">运动</label></div>
<div><input type="checkbox"><label for="">电影</label></div>
<div><input type="checkbox"><label for="">美食</label></div>
<div><input type="checkbox"><label for="">网游</label></div>
<button>全选</button>
<button>取消全选</button>
</div>
<label for="">学历：</label>
<select name="" id="select">
<option value="本科" selected>本科</option>
<option value="硕士">硕士</option>
<option value="博士">博士</option>
</select>
<button type="reset" id="reset">重置</button>
<button type="submit" id="submit">提交</button>
</form>
<div class="div1">
<div>关键词：</div>
<select id="sourceSelect" multiple size="5">
<option value="1">程序员</option>
<option value="2">C++</option>
<option value="3">Java</option>
<option value="4">JavaScript</option>
<option value="5">深度学习</option>
<option value="6">区块链</option>
</select>
<div class="but">
<div><button onclick="moveSelectedOptions()">>></button></div>
<div><button onclick="removeSelectedOptions()"><<</button></div>
</div>
<select id="destinationSelect" multiple size="4"></select>
</div>
</div>
</div>
<div id="head">
<img src="./头像.jpg" alt="">
<input type="file">
</div>
<div class="down">
<label for="">说明：</label>
<div id="content">
<ol>
<li>1.权利人对涉嫌侵权内容拥有商标权、著作权和/或其他依法可以行使权利的权属证明。</li>
<li>2.请充分、明确地描述确信被侵犯了权利人合法权益的内容并请提供非法登载该作品的第三方网址，</li>
<li>3.请指明涉嫌侵权网页的哪些内容侵犯了第2项中列明的权利人的合法权益。</li>
<li>4.请提供权利人具体的联絡信息，包括姓名、身份证或护照复印件(对自然人)、单位登记证明复印件(对单位)、通信地址、电话号码、传真和电子邮件。</li>
<li>5.请提供涉嫌侵权内客在信息网络上的位置(如指明您举报的含有侵权内容的出处，即:指网页地址
或网页内的位置)以便我们与您举报的含有侵权内容的网页的所有权人/管理人联系。</li>
</ol>
</div>
</div>
</div>
<img id="picture"></img>
</body>
</html>
css
/* 基础公共样式：清除默认样式 + 设置通用样式 */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
li {
list-style: none;
}
body {
font: 14px/1.5 "Microsoft Yahei", "Hiragino Sans GB", "Heiti SC";
color: #333;
}
/* a {
color: #333;
text-decoration: none;
} */
p {
text-indent: 2em;
}
h1 {
margin-top: 20px;
margin-bottom: 15px;
}
input {
margin: 5px 0px;
}
#menu {
position: relative;
top: 58px;
left: 8px;
border: 1px solid;
height: 100px;
width: 100px;
text-align: center;
box-sizing: border-box;
}
#menu :nth-child(1) {
height: 10px;
margin-top: 20px;
}
#top {
position: absolute;
left: 107px;
top: 19px;
height: 40px;
width: 800px;
border: 1px solid;
box-sizing: border-box;
}
.time {
float: left;
margin: 6px;
text-align: left;
/* width: 100px; */
height: 30px;
/* border: 2px solid aqua; */
font-size: 18px;
/* margin-bottom: 10px; */
}
#top :nth-child(2) {
float: right;
}
#top #input {
margin-top: 10px;
padding: 0px;
}
#top button {
margin-top: 9px;
margin-right: 8px;
}
#body {
visibility: visible;
position: absolute;
left: 107px;
top: 59px;
width: 800px;
height: 530px;
border: 1px solid;
padding: 8px;
box-sizing: border-box;
}
#body1 {
visibility: hidden;
position: absolute;
left: 107px;
top: 59px;
width: 800px;
height: 530px;
border: 1px solid;
padding: 8px;
box-sizing: border-box;
}
#body .mid {
float: left;
border: 1px solid;
padding: 5px;
width: 530px;
}
#body .mid form .in {
width: 200px;
}
#body .mid form .checkbox div {
width: 60px;
}
#body .mid form .checkbox {
display: flex;
}
#body .mid form .checkbox button {
margin-right: 10px;
}
#select {
width: 200px;
}
select {
width: 100px;
}
.div1 {
margin-top: 20px;
display: flex;
height: 100px;
width: 400px;
line-height: 100px;
}
.but {
margin: 10px;
}
.but button {
width: 40px;
}
.but div {
line-height: 40px;
}
#reset {
position: absolute;
top: 290px;
right: 315px;
}
#submit {
position: absolute;
top: 290px;
right: 280px;
}
#head {
float: right;
height: 234px;
width: 220px;
border: 1px solid;
padding: 0px 15px;
}
#head img {
width: 190px;
height: 190px;
}
.down {
position: absolute;
top: 318px;
border: 1px solid;
padding: 15px;
width: 782px;
}
#content {
margin-left: 60px;
}
#picture {
position: absolute;
top: 600px;
left: 110px;
height: 500px;
width: 800px;
}
js
document.addEventListener("DOMContentLoaded", () => {
function updateTime() {
const date = new Date()
let year = date.getFullYear()
let month = date.getMonth() + 1
let day = date.getDate()
let week = date.getDay()
let hour = date.getHours()
let minute = date.getMinutes()
let second = date.getSeconds()
hour = hour < 10 ? '0' + hour : hour
minute = minute < 10 ? '0' + minute : minute
second = second < 10 ? '0' + second : second
// date.toLocaleDateString 简单写法
const dayOfWeek = ['Sun', 'Mon', 'Tus', 'Wed', 'Thu', 'Fri', 'Sat',]
const monOfYear = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug'
, 'Sep', 'Oct', 'Nov', 'Dec'
]
return `${dayOfWeek[week]} ${monOfYear[month - 1]} ${day}
${year} ${hour}:${minute}:${second} GMT+0800(中国标准时间)`
}
const timeDiv = document.querySelector('.time')
timeDiv.innerHTML = updateTime();
setInterval(function () {
timeDiv.innerHTML = updateTime()
}, 1000)
const pic = ['./1.png', './2.jpg', './3.jpg', './4.jpg']
const show = document.querySelector('#picture')
show.src = pic[0]
let st = 1
setInterval(() => {
st = (st + 1) % 4
show.src = pic[st]
}, 3000)
const change1 = document.querySelector('.change1')
const change = document.querySelector('.change')
change1.addEventListener('click', (event) => {
event.preventDefault();
changeToBody1();
})
change.addEventListener('click', (event) => {
event.preventDefault();
changeToBody();
})
// // 选择文档中的所有 <a> 标签
// var links = document.querySelectorAll('a');
// // 遍历每个 <a> 标签，并为其添加点击事件监听器
// links.forEach(function (link) {
// link.addEventListener('click', function (event) {
// event.preventDefault(); // 阻止默认跳转行为
// // ...
// console.log('Clicked on link:', link.href);
// });
// });
})
function moveSelectedOptions() {
// 获取两个选择列表元素
const sourceSelect = document.getElementById('sourceSelect');
const destinationSelect = document.getElementById('destinationSelect');
// 遍历 sourceSelect 中的所有选项
for (let i = sourceSelect.options.length - 1; i >= 0; i--) {
// 检查选项是否被选中
if (sourceSelect.options[i].selected) {
// 创建新选项并添加到 destinationSelect 中
const newOption = document.createElement('option');
newOption.value = sourceSelect.options[i].value;
newOption.text = sourceSelect.options[i].text;
destinationSelect.add(newOption);
// 从 sourceSelect 中移除选中的选项
sourceSelect.remove(i);
}
}
}
function removeSelectedOptions() {
const sourceSelect = document.getElementById('destinationSelect');
const destinationSelect = document.getElementById('sourceSelect');
for (let i = sourceSelect.options.length - 1; i >= 0; i--) {
if (sourceSelect.options[i].selected) {
const newOption = document.createElement('option');
newOption.value = sourceSelect.options[i].value;
newOption.text = sourceSelect.options[i].text;
destinationSelect.add(newOption);
sourceSelect.remove(i);
}
}
}
function changeToBody1() {
const b = document.querySelector('#body')
const b1 = document.querySelector('#body1')
b.style.visibility = 'hidden'
b1.style.visibility = 'visible'
}
function changeToBody() {
const b = document.querySelector('#body')
const b1 = document.querySelector('#body1')
b.style.visibility = 'visible'
b1.style.visibility = 'hidden'
}