前面断更几天是因为在住安心复习DOM BOM的内容 不得不说 还得是DOM 在这一章节的复习内容中 涌现出了很多又代表意义 经典的一些小案例 而且 还是有些难度的 有一两个我反正是自己独立完成不了 可能是不熟悉 我已经做了记号了反正，下次直接抓住这些第一次没有独立完成的来做，这一次的案例很多我可能要分两篇随笔才能写出来我先来前几天的案例吧
先来第一个，直接上狠的，这个是第一个卡我的案例，有点绕，我注释的是我自己做的时候的逻辑，后面是看着别人做出来想的逻辑不得不说还是过来人有经验，化骨绵掌一样给我的问题在无形中就解决了，很简单经典的一个案例就是全选全不选但是充满逻辑
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
padding: 0;
margin: 0;
}
.wrap {
width: 300px;
margin: 100px auto 0;
}
table {
border-collapse: collapse;
border-spacing: 0;
border: 1px solid #c0c0c0;
width: 300px;
}
th,
td {
border: 1px solid #d0d0d0;
color: #404060;
padding: 10px;
}
th {
background-color: #09c;
font: bold 16px "微软雅黑";
color: #fff;
}
td {
font: 14px "微软雅黑";
}
tbody tr {
background-color: #f0f0f0;
}
tbody tr:hover {
cursor: pointer;
background-color: #fafafa;
}
</style>
</head>
<body>
<div class="wrap">
<table>
<thead>
<tr>
<th>
<input type="checkbox" id="j_cbAll"/>
</th>
<th>商品</th>
<th>价钱</th>
</tr>
</thead>
<tbody id="j_tb">
<tr>
<td>
<input type="checkbox" />
</td>
<td>iPhone8</td>
<td>8000</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>iPad Pro</td>
<td>5000</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>iPad Air</td>
<td>2000</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>Apple Watch</td>
<td>2000</td>
</tr>
</tbody>
</table>
</div>
<script>
// 第一个需求点击上面全选 下面全部选中 再点一次全选 全部不选中
/* var checkAll = document.getElementById('j_cbAll')
var tbody = document.getElementById('j_tb')
var checkSingles = tbody.querySelectorAll('input')
var flag = 1
checkAll.addEventListener('click', function() {
if (flag == 1) {
for (var i = 0; i < checkSingles.length; i++) {
checkSingles[i].setAttribute('checked','true')
}
flag = 0
} else {
for (var i = 0; i < checkSingles.length; i++) {
checkSingles[i].removeAttribute('checked')
}
flag = 1
}
})
// 第二个需求就是下面 依次点满 全选会勾上
var counts = 0
for (var i = 0; i < checkSingles.length; i++) {
checkSingles[i].onclick = function() {
if (this.checked) {
counts++
} else {
counts--
}
}
}
if (counts == 4) {
checkAll.setAttribute('checked','true')
} */
// 全选
var checkAll = document.getElementById('j_cbAll')
var tbody = document.getElementById('j_tb')
var checkSingles = tbody.querySelectorAll('input')
checkAll.onclick = function() {
for (var i = 0; i < checkSingles.length; i++) {
checkSingles[i].checked = this.checked
}
}
// 单选全选
for (var i = 0; i < checkSingles.length; i++) {
checkSingles[i].onclick = function() {
for (var i = 0; i < checkSingles.length; i++) {
var flag = true
if (!checkSingles[i].checked) {
flag = false
break
}
}
checkAll.checked = flag
}
}
// 这个案例 还是有点不熟悉啊 属实有点太绕了 上面注释的是我第一次自己做的的想法 后面感觉有点做不下去了 无奈又看了看原来的代码 还是原来的比较优秀 还是没有理解其中奥妙
</script>
</body>
</html>
然后是一个删除留言案例，这道题实现起来 其实是挺简单的 但是有一个问题 我搞了老半天也没解决下来 就先存在这里后面再来弄 就是在发布出来的留言栏那里 也就是每一个li里面的文字 我输入多了 他会一直往后面延伸 超出范围了还在后面延伸 我要的效果是超出范围就换行 可能听起来挺简单 但是我始终没弄对代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
li {
display: flex;
justify-content: space-between;
align-items: center;
background-color: skyblue;
margin-top: 10px;
}
li div {
flex: 3;
}
li a {
flex: 1;
}
.box {
width: 300px;
}
</style>
</head>
<body>
<div class="box">
<textarea name="" id="" cols="30" rows="10"></textarea>
<input type="submit" value="提交">
<ul>
</ul>
</div>
<script>
var btn = document.querySelector('input')
btn.onclick = function() {
var li = document.createElement('li')
li.innerHTML = '<div>'+this.previousElementSibling.value+'</div>' + '<a href="#">删除</a>'
btn.nextElementSibling.insertBefore(li, btn.nextElementSibling.children[0])
var as = document.querySelectorAll('a')
for (var i = 0; i < as.length; i++) {
as[i].onclick = function() {
btn.nextElementSibling.removeChild(this.parentNode)
}
}
}
/* 这道题实现起来 其实是挺简单的 但是有一个问题 我搞了老半天也没解决下来 就先存在这里后面再来弄 就是在发布出来的留言栏
那里 也就是每一个li里面的文字 我输入多了 他会一直往后面延伸 超出范围了还在后面延伸 我要的效果是超出范围就换行 可能听起来挺简单 但
是我始终没弄对代码
*/ </script>
</body>
</html>
这一个案例 其他实现起来还行 但是有一个地方 我想了老半天了 那就是怎么将对象里面的值给到每一个td 我想来想去都只想到这一种方法 但我总觉得有更简便的方法我这个属实太冗余了 果然当我看到大神的代码时 直接醍醐灌顶 豁然开朗 他是怎么做的 内层管列的for循环不是我这个for j 循环 直接for in 对对象循环不就完事了？ 列也有了 数据也有了 学到了学到了
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
table {
width: 500px;
margin: 100px auto;
border-collapse: collapse;
text-align: center;
}
td,
th {
border: 1px solid #333;
}
thead tr {
height: 40px;
background-color: #ccc;
}
</style>
</head>
<body>
<table cellspacing="0">
<thead>
<tr>
<th>姓名</th>
<th>科目</th>
<th>成绩</th>
<th>操作</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<script>
// 1.先去准备好学生的数据
var datas = [{
name: '魏璎珞',
subject: 'JavaScript',
score: 100
}, {
name: '弘历',
subject: 'JavaScript',
score: 98
}, {
name: '傅恒',
subject: 'JavaScript',
score: 99
}, {
name: '明玉',
subject: 'JavaScript',
score: 88
}, {
name: '大猪蹄子',
subject: 'JavaScript',
score: 0
}]
var tbody = document.querySelector('tbody')
for (var i = 0; i <= datas.length; i++) {
var tr = document.createElement('tr')
for (var j = 0; j < 4; j++) {
var td = document.createElement('td')
if (j == 3) {
td.innerHTML = '<a href="#">删除</a>'
} else if (j == 0) {
td.innerText = datas[i]['name']
} else if (j == 1) {
td.innerText = datas[i]['subject']
} else {
td.innerText = datas[i]['score']
}
tr.appendChild(td)
}
tbody.appendChild(tr)
// 删除操作
tbody.children[i].children[3].onclick = function() {
tbody.removeChild(this.parentNode)
}
}
// 这一个案例 其他实现起来还行 但是有一个地方 我想了老半天了 那就是怎么将对象里面的值给到每一个td 我想来想去都只想到这一种方法 但我总觉得有更简便的方法我这个属实太冗余了 果然当我看到大神的代码时 直接醍醐灌顶 豁然开朗 他是怎么做的 内层管列的for循环不是我这个for j 循环 直接for in 对对象循环不就完事了？ 列也有了 数据也有了 学到了学到了
</script>
</body>
</html>
这是一个倒计时的案例，难不难，只是有些小细节需要注意
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
margin: 200px;
}
span {
display: inline-block;
width: 40px;
height: 40px;
background-color: #333;
font-size: 20px;
color: #fff;
text-align: center;
line-height: 40px;
}
</style>
</head>
<body>
<div>
<span class="hour">1</span>
<span class="minute">2</span>
<span class="second">3</span>
</div>
<script>
var spans = document.querySelectorAll('span')
var fdate = +new Date('2022-3-26')
getTime()
setInterval(getTime, 1000);
function getTime(futureDate) {
var nowDate = +new Date()
var date = (fdate - nowDate) / 1000
var h = parseInt(date / 60 / 60 % 24)
h = h < 10 ? '0' + h : h
spans[0].innerText = h
var m = parseInt(date / 60 % 60)
m = m < 10 ? '0' + m : m
spans[1].innerText = m
var s = parseInt(date% 60)
s = s < 10 ? '0' + s : s
spans[2].innerText = s
}
// 错误点 首先没想出来整个解决方案 其次时分秒字符串连接没赋值 然后注意定时器里面写函数名 不能加括号 否则不会运行
</script>
</body>
</html>
一个发送短信倒计时案例 懵懵懂懂突然就做出来了
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 点击按钮后，该按钮60秒之内不能再次点击，防止重复发送短信。 -->
<input type="text" name="" id="">
<button>发送</button>
<script>
var btn = document.querySelector('button')
btn.onclick = function() {
btn.disabled = true
var x = 5
var time = setInterval(function() {
btn.innerText = '还有'+x+'秒可再次发送'
x--
if (x < 0) {
btn.disabled = false
btn.innerText = '发送'
x = 5
clearInterval(time)
}
}, 1000);
}
// 这道题有点巧妙 我感觉我懵懵懂懂 乱敲就给他敲出来了 因为当时准备验证时 我想到了另一个方法 一直在想那个方法通过flag来控制开关
</script>
</body>
</html>
然后我们今天就先这样 下一篇全是webapi里面的大案例 敬请期待
前端爱好者，望大佬给个内推机会！！！
随时随地看视频
