继续我们的复习之路——webapi
前面断更几天是因为在住安心复习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>
<!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里面的大案例 敬请期待
继续我们的复习之路——webapi的更多相关文章
- 渣渣小本求职复习之路每天一博客系列——Unix&Linux入门（5）
前情回顾:昨天简单地介绍了一下如何使用vi编辑器,例如命令模式和插入模式的切换,以及一些简单命令的讲解. —————————————————————————直接就开始吧———————————————— ...
- 渣渣小本求职复习之路每天一博客系列——Java基础（9）
———————————————————————今天不闲聊————————————————————————————— 第十一章:线程 第四节:synchronized与同步 首先,我们来看一段代码: p ...
- 渣渣小本求职复习之路每天一博客系列——数据库基础（MySQL）（5）
前情回顾:昨天学习了MySQL中索引的设计与使用,还了解了一些常见的SQL注入攻击的手段以及防范方法,一般来说,在面试的时候如果不是要求比较高,基本就够用了. 今天碰见一个拿了TP-LINK的offe ...
- 渣渣小本求职复习之路每天一博客系列——TCP/IP协议栈（5）
前情回顾:一篇短短的博客明显不能满足TCP和UDP这两个饥渴的汉子,而且还被应用协议占了一小半的篇幅.在昨天结束之后,相信大家都基本对TCP/IP协议栈的轮廓有一个大概的印象了,能够对整体有所把握. ...
- python复习之路-Day01
数据类型初识 1.数字 2 是一个整数的例子.长整数 不过是大一些的整数.3.23和52.3E-4是浮点数的例子.E标记表示10的幂.在这里,52.3E-4表示52.3 * 10-4.(-5+4j)和 ...
- 【读书笔记】WebApi 和 SPA(单页应用)--knockout的使用
Web API从MVC4开始出现,可以服务于Asp.Net下的任何web应用,本文将介绍Web api在单页应用中的使用.什么是单页应用?Single-Page Application最常用的定义:一 ...
- B - 영어（字符串）
原题链接 B - 영어 Time Limit:1000MS Memory Limit:131072KB 64bit IO Format:%lld & %llu Submit S ...
- 软考之J2SE
特别感谢软考让我如今就接触了神奇的java.曾经尽管真不知道java是个神马,看完马士兵的视频发现里面的东西并不陌生.有vb,c++,c#做基础加上这次的J2SE发现原来编程语言有非常多同样的特性.也 ...
- python3 正则表达式 re模块之辣眼睛 计算器
额...学到几个常用模块了,也要其中考试了,每天晚上敲一点,敲得脑壳疼,不过又想到好一点的办法了,有时间再改吧. 此非吾所欲也,实属无奈也....复习之路漫漫,吾将到书上求索,在此不多逗留,我挥一挥衣 ...
- .NetCore WebAPI采坑之路(持续更新)
1.WebAPI新增日志过滤器or中间件后Action读取到的请求Body为空问题 案例: 自定义了一个中间件,用于记录每次访问webapi的入参,以及引用了Swagger. 先看下面这段代码: pu ...
随机推荐
- Linux(一)：Linux操作系统
Linux(一):Linux操作系统 对于我们编程人员来讲,linux对于我们几乎已经是像windows对于普通用户一样,好像和同行交流说不会linux就像说不会用计算机一样羞耻.这里打算从头开始温故 ...
- CentOS7部署ES(单机)
一.创建路径,解压 ## 创建路径 [root@localhost /]# cd /data [root@localhost data]# mkdir ES ## 解压 [root@localhost ...
- C 编程异常 — /usr/bin/ld: 找不到 -lm
问题:在编程程序的时候报错. /usr/bin/ld: 找不到 -lm /usr/bin/ld: 找不到 -lc 原因:缺少库文件. 解决: yum install -y libstdc++-stat ...
- kubeadm部署的k8s证书过期问题 k8s问题排查：the existing bootstrap client certificate in /etc/kubernetes/kubelet.conf is expired
解决问题: 估计跟移动有关,下面那个没解决问题,是因为在原有文件的基础上修改的吧?而这里直接是移走,重新生成了新的.不太清楚是不是这个原因. $ cd /etc/kubernetes/pki/ $ m ...
- flask blinker信号
Flask框架中的信号基于blinker,其主要就是让开发者可是在flask请求过程中定制一些用户行为. pip3 install blinker 1.内置信号 request_started = _ ...
- QShop商城-快速开始-uni-app小程序
QShop商城-快速开始-uni-app小程序 工具准备 HBuilderX 此项目为UniApp开发,开发工具为HBuilderX,下载地址: https://hx.dcloud.net.cn/Tu ...
- C# 配置文件增加自定义节点
话不多说直接开撸! 首先创建一个Config的文件夹然后新增一个后缀名为.config的文件 配置文件的代码如下: <?xml version="1.0" encoding= ...
- 执行nodejs 内置fs模块
执行方式1: 在 cmd 中 任意文件夹路径下输入 node 回车 C:\Users\32991>node ...
- kettle从入门到精通 第六十四课 ETL之kettle kettle中执行SQL脚本步骤，使用需当心
1.群里有不定时会有同学反馈执行SQL脚本步骤使用有问题,那么咱们今天一起来学习下该步骤.trans中的执行SQL脚本有两方面功能,使用时需小心,不然很容易踩坑. 官方定义: 翻译: 您可以使用此步骤 ...
- C#.NET 国密 SM2 公钥证书从文本转换
先前的 Util 是直接从文件中转换的 https://www.cnblogs.com/runliuv/p/15079404.html public static AsymmetricKeyParam ...