继续我们的复习之路——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 ...
随机推荐
- Mybatis-plus把List数据分页
一.编写工具类: /** * @project * @Description 多表联查-分页 * @Author songwp * @Date 2022/8/8 10:31 * @Version 1. ...
- js 数组按指定字段转map-list结构
js 数组按指定字段转map-list结构 背景介绍 在开发过程中经常会出现接口返回整个数组,我们需要将数组进行二次处理,如下格式按照不同功能模块(type)进行数据拆分 原始数据 const lis ...
- Linux进程Fork详解
一. fork函数详解 一个进程,包括代码.数据和分配给进程的资源.fork()函数通过系统调用创建一个与原来进程几乎完全相同的进程,也就是两个进程可以做完全相同的事,但如果初始参数或者传入的变量不同 ...
- 平衡二叉树（AVL）插入结点后的再平衡思路
理解平衡二叉树 在解决平衡二叉树动平衡问题,我们先来明确什么是平衡二叉树: 平衡二叉树是二叉搜索树的一种特殊情况,所以在二叉搜索树的基础上加上了如下定义: 平衡因子:我们将二叉树中各个结点的左右子树的 ...
- Django——前后端分离出现同源策略的解决方式
浏览器控制台报错:"Access-Control-Allow-Origin" 解决方式:在Django服务端解决 1.安装django-cors-headers(可能需要先更新pi ...
- 领域驱动设计（Domain-Driven Design，简称DDD）【简介 个人学习笔记】
找到了第 1 篇资料:领域驱动设计详解:是什么.为什么.怎么做? - 知乎 找到了第 2 篇资料:领域驱动架构(DDD)建模中的模型到底是什么? - 知乎 找到了第 3 篇资料:一文看懂DDD 领域驱 ...
- k8s ingress部署安装
ingress概念 ingress与service,deployment同样都是k8s中的一种资源 ingress用于实现域名方式访问k8s内部应用 安装ingress 1. 安装helm: wget ...
- zabbix第一天 zabbix安装,添加监控项
1. zabbix 介绍 公司规模大,服务器众多,运维人员需要用到zabbix来监控整个服务器的运行状况,避免服务器故障后运维人员无法察觉. 清华zabbix源: https://mirrors.tu ...
- c#笔记(3) 委托回调
委托回调是刚接触c#时最头疼的东西,老看老忘,遂整理一下现在对委托回调的理解.如有错误,请指出,感谢. 委托 C# 中的委托(Delegate)类似于 C 或 C++ 中函数的指针.委托是存有对某个方 ...
- 关于 ajax在前端提示SyntaxError: Unexpected end of JSON input
前几日,在开发微信公众号上的网页时候,前端采用h5+jquery开发,后端采用ASP.net的ashx接收前端的参数,restful采用的是java开发,由于在ASP.ENT的 webconfig中增 ...