共计 6818 个字符，预计需要花费 18 分钟才能阅读完成。
后面断更几天是因为在住安心温习 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 外面的大案例 敬请期待
前端爱好者，望大佬给个内推机会！！！
正文完