继续我们的复习之路——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 ...
随机推荐
- 密钥存储在过时的 trusted.gpg 密钥环中（/etc/apt/trusted.gpg）
密钥存储在过时的 trusted.gpg 密钥环中(/etc/apt/trusted.gpg) 问题: 解决: cd /etc/opt sudo cp trusted.gpg trusted.gpg. ...
- gin框架获取参数
目录 httpext包 获取header头里的参数: scene := httpext.GetHeaderByName(ctx, "scene") // online / dev ...
- 关于Java Chassis 3的契约优先（API First）开发
本文分享自华为云社区<Java Chassis 3技术解密:契约优先(API First)开发>,作者: liubao68. 契约优先(API First)开发是指应用程序开发过程中,将A ...
- linux用户与用户组管理
linux用户与用户组管理 目录 linux用户与用户组管理 1.linux用户管理 1.1 用户基础 1.2 /etc/passwd:用户信息文件 1.3 /etc/shadow:用户密码信息文件 ...
- WordPress 整合Bootstrap制作分页代码
1.整合Bootstrap分页代码 * 因为wordpress默认仅仅提供简单分页, 所以要实现数字分页,需要自定义函数,wordpress可以结合bootstrap制作分页,bootstrap提供了 ...
- 关于小说阅读前端翻页插件推荐turn.js
http://www.turnjs.com
- 经验分享：春招零Offer，5月份还有机会吗？
先说答案:5 月份依然有拿到 Offer 的机会. 5月份春招结束了吗? 对于应届大学生来说(也就是今年暑假毕业的学生),5 月中旬春招就陆续结束了,但是 5 月份会有很多补录的机会. 对于非应届的大 ...
- 4G EPS 中的消息类型
目录 文章目录 目录 消息 MIB(主消息块) SIBs(多个系统消息块) 系统消息的映射和调度 系统信息的更改通知 消息 LTE 的系统消息是蜂窝网络与 UE 互相交互的与 LTE 系统相关的.特殊 ...
- 如何使用 JS 判断用户是否处于活跃状态
有时候,我们需要在网页判断用户是否处与非活跃状态,如果用户长时间没有在页面上进行任何操作,我们则判定该用户是非活跃的. 在 javascript 中我们可以通过监听某些鼠标或键盘相关的事件来判定用户是 ...
- npm 错误,ERESOLVE unable to resolve dependency tree 解决方案
参考:https://blog.csdn.net/qq_42055933/article/details/132098617 背景: 当在使用npm install时遇到 "ERESOLVE ...