2023年8月22日
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="curTime">
当前时间为: <span class="time">YYYY-MM-DD HH:mm</span>
</div>
<!--日期实例化-->
<script>
// 获取当前系统时间
const date = new Date();
// 指定时间
// const date2 = new Date('2023-06-01');
// 练习使用日期函数
// console.log('年: ' + date.getFullYear());
// console.log('月: ' + date.getMonth() + 1); // 因为月份是从零开始的
// console.log('天: ' + date.getDate());
// console.log('星期: ' + date.getDay());
// console.log('小时: ' + date.getHours());
// console.log('分钟: ' + date.getMinutes());
// console.log('秒:' + date.getSeconds());
let time = document.querySelector('.time');
let year = date.getFullYear();
let month = date.getMonth();
let day = date.getDate();
let hour = date.getHours();
let minute = date.getMinutes();
// 补零;
year = year > 9 ? year : '0' + year;
month = month > 9 ? month : '0' + month;
day = day > 9 ? day : '0' + day;
hour = hour > 9 ? hour : '0' + hour;
minute = minute > 9 ? minute : '0' + minute;
time.innerHTML = `${year}-${month}-${day} ${hour}:${minute}`;
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
.countdown {
width: 240px;
height: 305px;
text-align: center;
line-height: 1;
color: #fff;
background-color: brown;
/* background-size: 240px; */
/* float: left; */
overflow: hidden;
}
.countdown .next {
font-size: 16px;
margin: 25px 0 14px;
}
.countdown .title {
font-size: 33px;
}
.countdown .tips {
margin-top: 80px;
font-size: 23px;
}
.countdown small {
font-size: 17px;
}
.countdown .clock {
width: 142px;
margin: 18px auto 0;
overflow: hidden;
}
.countdown .clock span,
.countdown .clock i {
display: block;
text-align: center;
line-height: 34px;
font-size: 23px;
float: left;
}
.countdown .clock span {
width: 34px;
height: 34px;
border-radius: 2px;
background-color: #303430;
}
.countdown .clock i {
width: 20px;
font-style: normal;
}
</style>
</head>
<body>
<div class="countdown">
<p class="next">今天是2023年8月22日 情人节</p>
<p class="title">下班倒计时</p>
<p class="clock">
<span id="hour">00</span>
<i>:</i>
<span id="minutes">25</span>
<i>:</i>
<span id="second">20</span>
</p>
<p class="tips">21:00:00 回家</p>
</div>
<script>
// 做成一个定时任务，这样页面的倒计时比较人性化
const clock = document.querySelector('clock');
setInterval(function(){
// 获取当前时间时间戳和下班时间时间戳
const nowTime = +new Date();
const leaveTime = +new Date('2023-08-22 21:00:00');
const count = (leaveTime - nowTime) / 1000; // 得到的是秒数
// 转为为对应的时间
let h = parseInt(count / 60 / 60 % 60);
let m = parseInt(count / 60 % 60);
let s = parseInt(count % 60);
h = h > 9 ? h : '0' + h;
m = m > 9 ? m : '0' + m;
s = s > 9 ? s : '0' + s;
// 更新页面内容
document.querySelector('#hour').innerHTML = h;
document.querySelector('#minutes').innerHTML = m;
document.querySelector('#second').innerHTML = s;
}, 1000);
</script>
</body>
</html>
查找父节点、子节点、兄弟节点的案例
<!DOCTYPE html>
<html>
<head>
<style>
.countdown {
width: 240px;
height: 305px;
text-align: center;
line-height: 1;
color: #fff;
background-color: brown;
/* background-size: 240px; */
/* float: left; */
overflow: hidden;
}
.countdown .next {
font-size: 16px;
margin: 25px 0 14px;
}
.countdown .title {
font-size: 33px;
}
.countdown .tips {
margin-top: 80px;
font-size: 23px;
}
.countdown small {
font-size: 17px;
}
.countdown .clock {
width: 142px;
margin: 18px auto 0;
overflow: hidden;
}
.countdown .clock span,
.countdown .clock i {
display: block;
text-align: center;
line-height: 34px;
font-size: 23px;
float: left;
}
.countdown .clock span {
width: 34px;
height: 34px;
border-radius: 2px;
background-color: #303430;
}
.countdown .clock i {
width: 20px;
font-style: normal;
}
</style>
</head>
<body>
<div class="erweima">
<i class = "close_btn">X</i>
<img src="error.png" alt>
</div>
<script>
const btn = document.querySelector('.close_btn');
btn.addEventListener('click', function(){
// 通过 对象.parentNode 找到父节点
btn.parentNode.style.display = 'none';
});
const children = btn.parentNode.children;
// 通过 对象.nextElementSibling 找对下一个兄弟节点
const nextBrother = btn.nextElementSibling;
// 通过 对象.previouseElementSibling 找到前一个兄弟节点
const preBrother = btn.nextElementSibling.previousElementSibling;
console.log(preBrother);
console.log(nextBrother);
</script>
</body>
</html>
创建节点、末尾增加节点、指定位置之前增加节点、拷贝节点、删除节点的一个小案例
<script>
// 创建新标签
const start = document.createElement('li');
const end = document.createElement('li');
// 获取到 ul li
const ul = document.querySelector('ul');
const li = document.querySelector('li');
start.innerHTML = '测试数据';
end.innerHTML = '测试数据';
ul.appendChild(end);
ul.insertBefore(start, li);
// 通过 cloneNode 可以拷贝节点， true 代表包括子节点， false 不包括子节点(默认)
ul.appendChild(ul.cloneNode(true));
// 删除节点要通过父节点删除子节点，如果直接调用 ul.remove 就会删除所有节点
ul.removeChild(end);
</script>
综合案例：通过表单接收数据，然后渲染到浏览器页面
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="index.css" />
</head>
<body>
<h1>新增学员</h1>
<form class="info" autocomplete="off">
姓名: <input type="text" class="uname" name="uname" />
年龄: <input type="text" class="age" name="age" />
性别:
<select name="gender" class="gender">
<option value="男">男</option>
<option value="女">女</option>
</select>
薪资: <input type="text" class="salary" name="salary" />
就业城市:
<select name="city" class="city">
<option value="北京">北京</option>
<option value="上海">上海</option>
<option value="广州">广州</option>
<option value="深圳">深圳</option>
<option value="长春">长春</option>
</select>
<button class="add">录入</button>
</form>
<h1>就业榜</h1>
<table>
<thead>
<tr>
<th>学号</th>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th>薪资</th>
<th>就业城市</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td>0001</td>
<td>路飞</td>
<td>20</td>
<td>男</td>
<td>20000</td>
<td>北京</td>
<td><a href="javascript:">删除</a></td>
</tr>
</tbody>
</table>
<script>
// 获取元素
const uname = document.querySelector('.uname');
const age = document.querySelector('.age');
const gender = document.querySelector('.gender');
const salary = document.querySelector('.salary');
const city = document.querySelector('.city');
const tbody = document.querySelector('tbody');
const items = document.querySelector('[name]');
const arr = [];
// 通过表单提交事件，将数据录入到下面的表单
const info = document.querySelector('.info');
info.addEventListener('submit', function(e){
// 阻止默认行为，不跳转
e.preventDefault();
// 验证表单内容，不为空
for(let i = 0; i < items.length; i++){
if(items[i].value === ''){
return alert('输入内容不能为空');
}
}
// 创建新的对象
const obj = {
stuId: arr.length + 1,
uname: uname.value,
age: age.value,
gender: gender.value,
salary: salary.value,
city: city.value
}
// 将对象追加到数组中
arr.push(obj);
// 清空表单 重置
this.reset();
// 调用渲染函数
render();
});
// 2.渲染函数 增加和删除都需要渲染
function render(){
// 清空 tbody 原来的内容，把最新数组里面的数据渲染完毕
tbody.innerHTML = '';
for(let i = 0; i < arr.length; i++){
// 生成 tr
const tr = document.createElement('tr');
tr.innerHTML = `
<td>${arr[i].stuId}</td>
<td>${arr[i].uname}</td>
<td>${arr[i].age}</td>
<td>${arr[i].gender}</td>
<td>${arr[i].salary}</td>
<td>${arr[i].city}</td>
<td>
<a href="javascript:" data-id=${i}>删除</a>
</td>
`
// 将 tr 元素追加到我们的表单中
tbody.appendChild(tr);
}
}
// 删除操作
tbody.addEventListener('click', function(e){
if(e.target.tagName === 'A'){
arr.splice(e.target.dataset.id, 1);
// 重新渲染
render();
}
});
</script>
</body>
</html>
