Day 2 WebAPIs 实例
2024-04-20 11:07:05
一、事件监听
<!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><button>点击我</button><script>//1. 获取按钮元素let btn = document.querySelector('button')//2. 事件监听 绑定事件 注册事件 事件侦听// 事件源.addEventListener('事件', 事件处理函数)btn.addEventListener('click', function () {alert('月薪过万')})</script>
</body></html>二、关闭二维码
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {margin: 0;padding: 0;}.erweima {position: relative;width: 160px;height: 160px;margin: 100px auto;border: 1px solid #ccc;}.erweima i {position: absolute;left: -13px;top: 0;width: 10px;height: 10px;border: 1px solid #ccc;font-size: 12px;line-height: 10px;color: #ccc;font-style: normal;cursor: pointer;}</style>
</head><body><div class="erweima"><img src="./images/code.png" alt=""><i class="close_btn">x</i></div><script>// 1. 获取元素 事件源 i 关闭的 erweima let close_btn = document.querySelector('.close_btn')let erweima = document.querySelector('.erweima')// 2. 事件监听close_btn.addEventListener('click', function () {// erweima 关闭 他是隐藏的erweima.style.display = 'none'})</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 {width: 200px;height: 40px;border: 1px solid pink;text-align: center;line-height: 40px;}</style>
</head><body><div>开始抽奖吧</div><button>点击点名</button><script>// 1. 获取元素 div 和 button let box = document.querySelector('div')let btn = document.querySelector('button')// 2. 随机函数function getRandom(min, max) {return Math.floor(Math.random() * (max - min + 1)) + min}// 声明一个数组let arr = ['刘备', '曹操', 'pink老师']// 3. 事件监听btn.addEventListener('click', function () {// 随机的数字let random = getRandom(0, arr.length - 1)// console.log(arr[random])box.innerHTML = arr[random]// 删除数组里面的元素 splice(从哪里删, 删几个)arr.splice(random, 1)// 如果数组没有了 长度为0，就要禁用按钮if (arr.length === 0) {// console.log('最后一个了')btn.disabled = truebtn.innerHTML = '已经抽完'}})</script>
</body></html>四、随机点名升级版（开始、结束）
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {margin: 0;padding: 0;}h2 {text-align: center;}.box {width: 600px;margin: 50px auto;display: flex;font-size: 25px;line-height: 40px;}.qs {width: 450px;height: 40px;color: red;}.btns {text-align: center;}.btns button {width: 120px;height: 35px;margin: 0 50px;}</style>
</head><body><h2>随机点名</h2><div class="box"><span>名字是：</span><div class="qs">这里显示姓名</div></div><div class="btns"><button class="start">开始</button><button class="end">结束</button></div><script>// 数据数组let arr = ['马超', '黄忠', '赵云', '关羽', '张飞']function getRandom(min, max) {return Math.floor(Math.random() * (max - min + 1)) + min}// 1. 获取元素 两个按钮 + div// 一定不要忘记加点 因为里面写css类选择器let start = document.querySelector('.start')let end = document.querySelector('.end')let qs = document.querySelector('.qs')// timer 要是全局变量let timer = 0// random 要是全局变量let random = 0// 2. 给开始按钮注册事件start.addEventListener('click', function () {// 随机抽数据--- 快速不断的抽取 间歇函数定时器timer = setInterval(function () {random = getRandom(0, arr.length - 1)qs.innerHTML = arr[random]}, 25)// 如果到了最后一个，就禁用两个按钮if (arr.length === 1) {// console.log('没了')// start.disabled = true// end.disabled = truestart.disabled = end.disabled = true}})// 3. 给结束按钮注册事件 本质是停止定时器end.addEventListener('click', function () {// 停止定时器clearInterval(timer)// 删除数组元素arr.splice(random, 1)// console.log(arr)})</script>
</body></html>五、绑定事件DOMl0
<!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><button>点击</button><script>let btn = document.querySelector('button')btn.onclick = function () {alert(11)}</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>* {margin: 0;padding: 0;box-sizing: border-box;}ul {list-style: none;}.mi {position: relative;width: 223px;margin: 100px auto;}.mi input {width: 223px;height: 48px;padding: 0 10px;font-size: 14px;line-height: 48px;border: 1px solid #e0e0e0;outline: none;transition: all .3s;}.mi .search {border: 1px solid #ff6700;}.result-list {display: none;position: absolute;left: 0;top: 48px;width: 223px;border: 1px solid #ff6700;border-top: 0;background: #fff;}.result-list a {display: block;padding: 6px 15px;font-size: 12px;color: #424242;text-decoration: none;}.result-list a:hover {background-color: #eee;}</style></head><body><div class="mi"><input type="search" placeholder="小米笔记本"><ul class="result-list"><li><a href="#">全部商品</a></li><li><a href="#">小米11</a></li><li><a href="#">小米10S</a></li><li><a href="#">小米笔记本</a></li><li><a href="#">小米手机</a></li><li><a href="#">黑鲨4</a></li><li><a href="#">空调</a></li></ul></div><script>// 1. 获取元素 input let search = document.querySelector('input')let list = document.querySelector('.result-list')// 2. 事件监听 获得光标事件 focussearch.addEventListener('focus', function () {// 显示下拉菜单list.style.display = 'block'// 文本框变色this.classList.add('search')})// 3. 事件监听 失去光标事件 blursearch.addEventListener('blur', function () {// 隐藏下拉菜单list.style.display = 'none'// 文本框去色this.classList.remove('search')})</script>
</body></html>七、全选反选案例
<!DOCTYPE html><html><head lang="en"><meta charset="UTF-8"><title></title><style>* {margin: 0;padding: 0;}table {border-collapse: collapse;border-spacing: 0;border: 1px solid #c0c0c0;width: 500px;margin: 100px auto;text-align: center;}th {background-color: #09c;font: bold 16px "微软雅黑";color: #fff;height: 24px;}td {border: 1px solid #d0d0d0;color: #404060;padding: 10px;}.allCheck {width: 80px;}</style>
</head><body><table><tr><th class="allCheck"><input type="checkbox" name="" id="checkAll"> <span class="all">全选</span></th><th>商品</th><th>商家</th><th>价格</th></tr><tr><td><input type="checkbox" name="check" class="ck"></td><td>小米手机</td><td>小米</td><td>￥1999</td></tr><tr><td><input type="checkbox" name="check" class="ck"></td><td>小米净水器</td><td>小米</td><td>￥4999</td></tr><tr><td><input type="checkbox" name="check" class="ck"></td><td>小米电视</td><td>小米</td><td>￥5999</td></tr></table><script>// 1. 获取元素 全选 和 ck 小复选框let all = document.querySelector('#checkAll')let cks = document.querySelectorAll('.ck')let span = document.querySelector('span')// 2. 事件监听 全选按钮 all.addEventListener('click', function () {// console.log(all.checked) // true false // 我们需要做的就是把 all.checked 给下面三个小按钮// 因为三个按钮在伪数组里面，我们需要遍历的方式，挨着取出来，依次给值for (let i = 0; i < cks.length; i++) {cks[i].checked = all.checked}// 当我们的全选按钮处于选中状态，则可以改为取消if (all.checked) {// console.log('要改')span.innerHTML = '取消'} else {span.innerHTML = '全选'}})// 3. 小按钮的做法 同时给多个元素绑定相同事件for (let i = 0; i < cks.length; i++) {// 绑定事件cks[i].addEventListener('click', function () {// console.log(11)// 只要点击任何一个小按钮，都要遍历所有的小按钮 for (let j = 0; j < cks.length; j++) {// 都来看看是不是有人没有选中if (cks[j].checked === false) {// 如果有false 则退出循环 结束函数all.checked = falsespan.innerHTML = '全选'return}}// 当我们的循环结束，如果代码走到这里，说明没有false，都被选中了，则全选按钮要选中all.checked = truespan.innerHTML = '取消'})}</script>
</body></html>八、if语句
<!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><script>if ('pink') {console.log(1)} else {console.log(2)}// 0 '' null undefined NaN false// for (;;) {// break // 退出循环 结束循环// continue // 结束本次循环，继续下一次循环// }function fn() {return // 退出函数}</script>
</body></html>九、购物车加减操作
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>div {width: 80px;}input[type=text] {width: 50px;height: 44px;outline: none;border: 1px solid #ccc;text-align: center;border-right: 0;}input[type=button] {height: 24px;width: 22px;cursor: pointer;}input {float: left;border: 1px solid #ccc;}</style>
</head><body><div><input type="text" id="total" value="1" readonly><input type="button" value="+" id="add"><input type="button" value="-" id="reduce" disabled><script>// 1. 获取元素 三个let total = document.querySelector('#total')let add = document.querySelector('#add')let reduce = document.querySelector('#reduce')// 2. 点击加号 事件侦听 add.addEventListener('click', function () {// console.log(typeof total.value)// total.value = total.value + 1// i++ 隐式转换// i = i + 1 total.value++reduce.disabled = false})// 3. 点击减号 事件侦听 reduce.addEventListener('click', function () {total.value--if (total.value <= 1) {reduce.disabled = true}})// 2 === '2'</script></div>
</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><script>let num = 10//函数表达式let fn = function () { }btn.onclick = function () { }// 高阶函数 函数的高级用法，把函数当值来看看// 回调函数// setInterval(function(){}, 1000)function fn() { }setInterval(fn, 1000)// 此时 fn 就是回调函数 回头去调用的函数box.addEventListener('click', fun)function fun() {}</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><button>点击</button><script>// 环境对象 this 他就是个对象function fn() {console.log(this)}// fn()window.fn()let btn = document.querySelector('button')btn.addEventListener('click', function () {console.log(typeof this)// 因为btn 调用了这个函数，所以 this 指向btn})</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>.pink {background: pink;}</style>
</head><body><button>第1个</button><button>第2个</button><button>第3个</button><button>第4个</button><button>第5个</button><script>let btns = document.querySelectorAll('button')for (let i = 0; i < btns.length; i++) {btns[i].addEventListener('click', function () {// this.classList.add('pink')// 干掉所有人for (let j = 0; j < btns.length; j++) {btns[j].classList.remove('pink')}// 复活我自己this.classList.add('pink')})}</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>.pink {background: pink;}</style>
</head><body><button class="pink">第1个</button><button>第2个</button><button>第3个</button><button>第4个</button><button>第5个</button><script>let btns = document.querySelectorAll('button')for (let i = 0; i < btns.length; i++) {btns[i].addEventListener('click', function () {// this.classList.add('pink')// // 干掉所有人// for (let j = 0; j < btns.length; j++) {// btns[j].classList.remove('pink')// }// 我只需要找出那个唯一的 pink类，删除document.querySelector('.pink').classList.remove('pink')// 我的this.classList.add('pink')})}</script>
</body></html>十五、微博发布案例
<!DOCTYPE html><html><head lang="en"><meta charset="UTF-8"><title></title><style>* {margin: 0;padding: 0;}table {border-collapse: collapse;border-spacing: 0;border: 1px solid #c0c0c0;width: 500px;margin: 100px auto;text-align: center;}th {background-color: #09c;font: bold 16px "微软雅黑";color: #fff;height: 24px;}td {border: 1px solid #d0d0d0;color: #404060;padding: 10px;}.allCheck {width: 80px;}</style>
</head><body><table><tr><th class="allCheck"><input type="checkbox" name="" id="checkAll"> <span class="all">全选</span></th><th>商品</th><th>商家</th><th>价格</th></tr><tr><td><input type="checkbox" name="check" class="ck"></td><td>小米手机</td><td>小米</td><td>￥1999</td></tr><tr><td><input type="checkbox" name="check" class="ck"></td><td>小米净水器</td><td>小米</td><td>￥4999</td></tr><tr><td><input type="checkbox" name="check" class="ck"></td><td>小米电视</td><td>小米</td><td>￥5999</td></tr></table><script>// 1. 获取元素 全选 和 ck 小复选框let all = document.querySelector('#checkAll')let cks = document.querySelectorAll('.ck')let span = document.querySelector('span')// 2. 事件监听 全选按钮 all.addEventListener('click', function () {// console.log(all.checked) // true false // 我们需要做的就是把 all.checked 给下面三个小按钮// 因为三个按钮在伪数组里面，我们需要遍历的方式，挨着取出来，依次给值for (let i = 0; i < cks.length; i++) {cks[i].checked = all.checked}// 当我们的全选按钮处于选中状态，则可以改为取消if (all.checked) {// console.log('要改')span.innerHTML = '取消'} else {span.innerHTML = '全选'}})// 3. 小按钮的做法 同时给多个元素绑定相同事件for (let i = 0; i < cks.length; i++) {// 绑定事件cks[i].addEventListener('click', function () {// console.log(11)// 只要点击任何一个小按钮，都要遍历所有的小按钮 for (let j = 0; j < cks.length; j++) {// 都来看看是不是有人没有选中if (cks[j].checked === false) {// 如果有false 则退出循环 结束函数all.checked = falsespan.innerHTML = '全选'return}}// 当我们的循环结束，如果代码走到这里，说明没有false，都被选中了，则全选按钮要选中all.checked = truespan.innerHTML = '取消'})}</script>
</body></html>Day 2 WebAPIs 实例相关推荐
- 前端开发基础知识汇总
一.HTML 1.前言与常用标签 浏览器 内核 备注 IE Trident IE.猎豹安全.360极速浏览器.百度浏览器 firefox Gecko 可惜这几年已经没落了,打开速度慢.升级频繁.猪一样 ...
- Spring Cloud微服务系统架构的一些简单介绍和使用
Spring Cloud 目录 特征 云原生应用程序 Spring Cloud上下文:应用程序上下文服务 引导应用程序上下文 应用程序上下文层次结构 改变Bootstrap的位置Properties ...
- ECS（Linux）连接RDS，使用命令行方式连接实例
使用命令行方式连接实例 通过命令行连接RDS MySQL数据库,连接方式如下: mysql -h<连接地址> -P<端口> -u<用户名> -p -D<数据库 ...
- Alibaba Cloud Linux 2.1903 LTS 64位服务器yum源下载404,Alibaba Cloud Linux 2实例中使用docker-ce、epel等YUM源安装软件失败
[Alibaba Cloud Linux 2.1903 LTS 64位]服务器yum源下载404 failure: repodata/repomd.xml from docker-ce-stable: ...
- List元素互换，List元素转换下标，Java Collections.swap()方法实例解析
Java Collections.swap()方法解析 jdk源码: public static void swap(List<?> list, int i, int j) {// ins ...
- Python 类—类属性（私有属性、公有属性、实例属性、局部变量）类方法（实例方法、静态方法）
1. 创建类 类是对某个对象的定义,它包含有关对象动作方式的信息,包括它的名称.方法.属性和事件.类不存在于内存中,因此它本身并不是对象.当程序运行需要引用类的代码时,就会在内存中创建一个类的新实例, ...
- java局部变量全局变量,实例变量的理解
java局部变量全局变量,实例变量的理解 局部变量 可以理解为写在方法中的变量. public class Variable {//类变量static String name = "小明&q ...
- 【C#实践】三层实例：登录过程
关于三层,看完一遍,想着开始敲七层,看着别人的代码敲都有点找不到,于是重新敲了一遍三层,收获很多! 首先,它没有模板,也不是一下子就完成的,它是有思路的,根据思路走,整个过程就是很自然而然的过程! D ...
- python实现glove,gensim.word2vec模型训练实例
20210331 https://blog.csdn.net/sinat_26917383/article/details/83029140 glove实例 https://dumps.wikimed ...
最新文章
- Spring.net抛砖引玉系列（二）用接口来实现HelloWorld
- boost::multi_index模块相关的测试程序
- Net Core中数据库事务隔离详解——以Dapper和Mysql为例
- 使用面向对象技术创建高级 Web 应用程序
- python超市买苹果_官网购买的iPhone12pro还没发货？试着用Python快速入手
- 基于TableStore的物联网元数据管理
- python的selenium模块_Python中Selenium模块的使用
- 扩展ExtJs的编辑器(HtmlEditor):插入图片
- 【低代码平台浅析】钉钉宜搭
- java socket ipv6_Java支持IPv6研究
- 点阵 LED 显示设计实验
- 出现ERROR 1698 (28000): Access denied for user ‘root‘@‘localhost‘ 的解决方法
- EPICS简单实例2 -- subroutine记录(sub)介绍与使用
- 安卓导入项目遇到“Sync Android SDKs”
- 列表块元素 ul和ol
- 详解微架构：GPU与ASIC的对比
- 银河麒麟桌面操作系统V10常见问题解决方法
- 13v/18v与转90度 反极化接收
- 微软数字签名工具--SigCheck的应用
- Pocket Gimbal隐私政策