JS api基础初学
轮播图随机版
需求：当我们刷新页面，页面中的轮播图会显示不同图片以及样式
分析：①：准备一个数组对象，里面包含详细信息（素材包含）
②：随机选择一个数字，选出数组对应的对象，更换图片，底部盒子背景颜色，以及文字内容
③：利用这个随机数字，让小圆点添加高亮的类（addClass）利用css结构伪类选择器
CSS部分不予显示
<script>
//1．初始数据
const sliderData=[
{url:'./images／slider02.jpg'，title:'开启剑与雪的黑暗传说！'，color：'rgb（43,35,26）'},
{url:'./images／slider03.jpg'，title:'真正的jo厨出现了！'，color：'rgb（36,31,33）'},
{url:'./images／slider05.jpg'，title:'快来分享你的寒假日常吧'，color：'rgb（67,90,92）'},
{url:'./images／slider06.jpg'，title:'哔哩哔哩小年YEAH'，color：'rgb（166， 131,143）'}，
{url:'./images／slider07.jpg'，title:'一站式解决你的电脑配置问题！！！'，color:'rgb（53,29,25）'},
{ur1:'./images／slider08.jpg'，title:'谁不想和小猫咪贴贴呢！',color：'rgb(99,72,114)'},
]
//1.需要一个随机数
const random = parseInt(Math.random()*sliderData.length)
//console.Log(sliderDatarandom）
//2把对应的数据染到标签里面
//2.1获取图片const img=document.querySelector('.slider-wrapper img'）
//2.2，修改图片路径=对象.urL
img.src = sliderData[random].url
// 3.把p里面的文字内容更换
// 3.1获取p
const p = document.querySelector('.slider-footer p')
// 3.2修改p
p.innerHTML = sliderData[random].title
// 4.修改背景颜色
const footer = document.querySelector('.slider-footer')
footer.style.backgroundcolor =slideerData[random].color//行内样式表是高于内部样式表，所以可以后来更改来覆盖以前的style=""
// 5.小圆点
const li = document.querySelector(`.slider-indicator li：nth-child(${random +1})`)
//让当前这个小It添加active这个类
li.classList.add('active')
</script>
</body>
获取设置表单的值
- 表单很多情况，也需要修改属性，比如点击眼睛，可以看到密码，本质是把表单类型变为文本框
- 正常的有属性有取值的跟其他的标签属性没有任何区别
获取：DOM对象属性名
设置：DOM对象.属性名=新值
表单.value='用户名'
表单.type = 'password'复选框
表单属性中添加就有效果，移除就没有效果，一律使用布尔值表示如果为true代表添加了该属性如果是false代表移
除了该属性
比如：disabled、checked、selected
<body>
<input type="checkbox" name="" id="" checked>
<buttom disabled>点击</buttom>//这样就禁止使用了
<script>
//1获取元素
// const uname = document.querySeLeetor(^nputr)
//2.获取值获取衰单里面的值用的value
// console. Log(uname.vaLue)//电脑
// consote. Log(uname.innerHTML ) innertHTML 得不到表单的内察
// 3.设置表单的值
// uname.vaLue ="我要买电脑"
// console.Log(uname.type)
// uname.type = 'password'//1获取
const ipt = document.querySelector('input')
// consoLe. Log(ipt.checked) // faLse 只接受布尔值
ipt.checked = true
// ipt. checked = 'true' //会选中,不提倡 有隐式转换
//获取
const button = document.querySelector('button')
// consoLe. Log(buttor).disabLed) // 默认false 不禁用
button.disabled = true // 禁用按钮 </script>
</body>自定义属性
标准属性：标签天生自带的属性比如class id title等，可以直接使用点语法操作比如：disabled, checked.selected
•自定义属性：
＞在html5中推出来了专门的data-自定义属性
＞在标签上一律以data-开头
＞在DOM对象上一律以dataset对象方式获取
<body>
<div data-id="1" data-spm="不知道">1</div>
<div data-id="2">2</div>
<div data-id="3">3</div>
<div data-id="4">4</div>
<div data-id="5">5</div>
<script>
const one = document.querySelector('div')
console.log(one.dataset)//这时右侧显示:DOMStringMap{id:'1',spm:'不知道;}id:'1',spm:'不知道';
console.log(one.dataset.id)//1
console.log(one.dataset.spm)//不知道
</script>
</body>定时器间歇函数
网页的倒计时
setInterval(函数,间隔时间)
//每隔一段时间调用函数
//间隔单位是ms<script>
//setInterval(函数,间隔时间)
setInterval(function (
console.log('一秒执行一次')
},1000)
function fn() {
console.log('一秒执行一次')
}
// setInterval(函数名,间隔时间) 函数名不要加小括号
let n = setlnterval(fn, 1000)
// setIntervaL('fn()', 1000)
console.log(n)
//关闭定时器 定时器返回的是一个id数值
clearInterval(n)Let m = setlntervaL (function () {consoLe.Log(ll)}, 2000)consoLe.Log(m)// const num = 10
// num = 10
// consoLe.Log(num)
</script>阅读注册 协议
<body>
<textarea name="", id="" cols="30" rows="10">
用户注册协议
欢迎注册成为京东用户！在您注册过程中，您需要完成我们的注册流程并通:
【请您注慧】如果您不同意以下仍议全部或任何条款约定，请您停止注册
</textarea>
<br>
<button class="btn" disabled〉我己经阅读用户协议(5)</button>
<script>
// 1.获取元素
const btn = document.querySelector('.btn')
// consoLe. Log(btn. innerHTML) butto按钮特殊用trmerHTML
// 2.倒计时
let i = 5
// 2.1开启定时器
let n = setInterval(function () {
i--
btn. innerHTML = `我己经阅读用户协议(${i})`
if (i === 0) {
clearInterval(n) // 关闭定时器
//\定时器停了,我就可以开按钮
btn.disabled = false
btn.innerHTML ='同意'
}
}, 1000)
</script>轮播图定时版
<div class= "slider">
<div class="slider-wrapper">
<img src=“・/images/slider0l.jpg” alt="" />
</div>
<div class="slider-footer" >
〈p>对人类来说会不会太超前了？ </p>
<ul class="slider-indicator">
<li class="active"></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<div class="toggle">
<button class="prev"><</button>
<button class="next">></button>
</div>
</div>
</div>//
<style>
* {
box-sizing: border-box;
}
.slider {
width: 560px;
height: 400px;
overflow: hidden;
}
.slider-wrapper {
width: 100%;
height: 320px;
}
.slider-wrapper img {
width: 100%;
height: 100%;
display: block;
}//
.slider-footer {
height: 80px;
background-color:rgb(100J 67, 68);
padding: 12px 12px 0 12px;
position: relative;
}
.slider-footer .toggle {
position: absolute;
right: 0;
top: 12px;
display: flex;
}
.slider-footer .toggle button {
margin-right: 12px;
width: 28px;
height: 28px;
appearance: none;
border: none;
background:rgba(255, 255, 255, 0.1)；
color: #fff;//
border-radius: 4px;
cursor: pointer;
}
.slider-footer.toggle button:hover {
background:rgba(255, 255, 255, 0.2);
}//
.slider-footer p {
margin: 0;
color:#fff;
font-size: 18px;
margin-bottom: 10px;
}
.slider-indicator {
margin: 0;
padding: 0;
list-style: none;
display: flex;
align-items: center;
}//
slider-indicator li {
width: 8px;
height: 8px;
margin: 4px;
border-radius: 50%;
background:・#fff;
opacity: 0.4;
cursor: pointer;
}
.slider-indicator li.active {
width: 12px;
height: 12px;
opacity: 1;
}
</style>
<script>
//1.初始数据
const sliderData=[
{url:'./images／slider02.jpg'，title:'开启剑与雪的黑暗传说！'，color：'rgb（43,35,26）'},
{url:'./images／slider03.jpg'，title:'真正的jo厨出现了！'，color：'rgb（36,31,33）'},
{url:'./images／slider05.jpg'，title:'快来分享你的寒假日常吧'，color：'rgb（67,90,92）'},
{url:'./images／slider06.jpg'，title:'哔哩哔哩小年YEAH'，color：'rgb（166， 131,143）'}，
{url:'./images／slider07.jpg'，title:'一站式解决你的电脑配置问题！！！'，color:'rgb（53,29,25）'},
{ur1:'./images／slider08.jpg'，title:'谁不想和小猫咪贴贴呢！',color：'rgb(99,72,114)'},
]
//1.获取元素
const img = document-querySelector('.slider-wrapper img')
const p = document.querySelector('.slider-footer p')
let i = 0
//2.开启定时器set Interval(function () {i++
if(i>=sliderData.length){i=0}
// console.log(sliderData[i])
//更换图片路泾
img.src = sliderData[i].url
//把字写到p里面
p.innerHTML = sliderData[i].title
//小圆点
//先除掉以前的active
document.querySelector('.slider-indicator.active']
//只让li添active
document.querySelector(`.slider-indicator li:nth-child(${i+1})`).classList.add('active')
}, 1000)*/
</script>相关文章：
JS api基础初学
轮播图随机版 需求：当我们刷新页面，页面中的轮播图会显示不同图片以及样式 分析：①：准备一个数组对象，里面包含详细信息（素材包含） ②：随机选择一个数字，选出数组对应…...
uniapp实战:父子组件传参之子组件数量动态变化
需求说明 现有的设置单元列表,每个带有虚线加号的可以看做是一组设置单元,点击加号可以添加一组设置单元.点击设置单元右上角可以删除对应的设置单元. 实现思路说明 利用数组元素添加或是删除的方式实现页面数量动态变化.由于每个设置单元内容都相同所以单独封装了一个子组件.…...
Ubuntu绑定USB接口到固定端口
绑定端口 打开终端，输入以下命令查看USB端口信息： udevadm info -a -n /dev/ttyUSB0执行后，可以看到部分输出如下: 找到第一个，a-b:c格式的KERNELS，记住这个值，后面会用到。 linlin-B660M-D2H-DDR4:~$ u…...
解决gogs勾选“使用选定的文件和模板初始化仓库”报错500,gogs邮件发送失败,gogs邮件配置不生效,gogs自定义模板等问题
解决gogs勾选“使用选定的文件和模板初始化仓库”报错500,gogs邮件发送失败,gogs邮件配置不生效,gogs自定义模板等问题 前几天出了教程本地部署gogs，在后期运行时发现两个问题： 第一：邮件明明配置了，后台显示未配置，…...
数字后端——DEF文件格式
文章目录 MACRO的不同orientationDEF中在macro orientation定义前需要留空格 MACRO的不同orientation DEF中在macro orientation定义前需要留空格 像下图中这种方向和分号之间没有空格的情况，就是有问题的格式。...
【可做课设、附完整技术文档】流式、异步、实时的Django聊天室！（需进一步定制可联系本人）
介绍 完整源码以及完整项目文档请看源码链接。 此Django项目实现了一个精致易扩展的实时聊天室，可直接作为网页开发的课程设计提交，也可二次开发，比如添加更好看的样式，或者更多更酷炫的功能。 实现了如下功能： 流…...
网络编程：基于TCP和UDP的服务器、客户端
1.基于TCP通信服务器 程序代码： 1 #include<myhead.h>2 #define SER_IP "192.168.126.121"//服务器IP3 #define SER_PORT 8888//服务器端口号4 int main(int argc, const char *argv[])5 {6 //1.创建用于监听的套接字7 int sfd-1;8 sf…...
kubectl 命令行管理K8S（上）
目录 陈述式资源管理方式 介绍 命令 项目的生命周期 创建 kubectl create命令 发布 kubectl expose命令 更新 kubectl set 回滚 kubectl rollout 删除 kubectl delete 应用发布策略 金丝雀发布 陈述式资源管理方式 介绍 1.kubernetes 集群管理集群资源…...
Redis 之四：Redis 事务和乐观锁
事务特点 Redis 事务可以一次执行多个命令， 并且带有以下三个重要的保证： 批量操作在发送 EXEC 命令前被放入队列缓存。 收到 EXEC 命令后进入事务执行，事务中任意命令执行失败，其余的命令依然被执行。不具备原子性。 在事务执…...
C# WPF编程-创建项目
1.创建新项目 选择“WPF应用程序”》“下一步” 设置项目 设置项目名称，保存位置等参数>下一步 3.选择框架 4.项目创建成功 5.运行项目...
密码学及其应用（应用篇15）——0/1背包问题
1 问题背景 背包问题是一个经典的优化问题，在计算机科学和运筹学中有着广泛的应用。具体到你提到的这个问题，它是背包问题中的一个特例，通常被称为0/1背包问题。这里，我们有一系列的正整数 ，以及一个正整数，…...
基于springboot+vue的实验室管理系统(前后端分离)
博主主页：猫头鹰源码 博主简介：Java领域优质创作者、CSDN博客专家、阿里云专家博主、公司架构师、全网粉丝5万、专注Java技术领域和毕业设计项目实战，欢迎高校老师\讲师\同行交流合作 主要内容：毕业设计(Javaweb项目|小程序|Pyt…...
华为OD技术面试案例5-2024年
背景 985本计算机专业，目标院校。 1.15 投递 在某BOSS上投递的简历，HR人很nice，非常负责任。 1.19 收到机试通知 第一题是一个哈夫曼编码，第三题是一个动态规划，机试整体难度不算高，刷leetcode hot100…...
【QT+QGIS跨平台编译】之五十五：【QGIS_CORE跨平台编译】—【qgsmeshcalcparser.cpp生成】
文章目录 一、Bison二、生成来源三、构建过程一、Bison GNU Bison 是一个通用的解析器生成器，它可以将注释的无上下文语法转换为使用 LALR (1) 解析表的确定性 LR 或广义 LR (GLR) 解析器。Bison 还可以生成 IELR (1) 或规范 LR (1) 解析表。一旦您熟练使用 Bison，您可以使用…...
Unity（第二十部）效果 粒子、线条和拖尾
1、粒子系统 粒子系统介绍 Unity 粒子系统是 Unity 引擎中用于创建和控制粒子效果的工具。它可以模拟各种自然现象，如火焰、烟雾、雨滴等，也可以用于创建特效，如魔法光芒、爆炸效果等。 粒子系统组成 在 Unity 中，粒子系统由发射…...
全量知识系统问题及SmartChat给出的答复 之6 三套工具之1
Q15. 提出想法和问题 前面说过，DDD在我要设计的全量知识系统中位于中间层，是专门用来解决“知识汤”问题的。 解决的思路就是以将为在特定领域中的公司经营提供一个责任-权限平面为目的，帮助他们调整商业模式以及组建恰当的组织，…...
[RoarCTF 2019]Easy Calc
这题考查的是: 字符串解析特性目录读取文件内容读取 字符串解析特性详解：PHP字符串解析特性 （$GET/$POST参数绕过）（含例题 buuctf easycalc）_参数解析 绕过-CSDN博客 ascii码查询表：ASCII 表 | 菜鸟工具 …...
: .git)
完美解决 git 报错fatal: Not a git repository (or any of the parent directories): .git
问题描述 错误提示是找不到.git文件，无法执行git指令，意思是 当前你要提交的文件夹中没有.git这个文件 解决方案 执行如下命令： git init...
electron无法设置自己的图标？渲染进程require报错？
electron无法设置自己的图标？ 极有可能是图标太大，或者宽高不同 我推荐的网址icon转换 选着20x20一般就可以 渲染进程无法使用require?一直报错？ webPreferences: {nodeIntegration: true, enableRemoteModule: true, contextIsolation: …...
vscode连接服务器与FileZilla上传到服务器
https://www.cnblogs.com/qiuhlee/p/17729647.html（这个是vscode连接服务器） 主机：就是服务器的主机号 使用者名称：比如ALmax的用户名 密码：比如ALmax的密码...
7.4.分块查找
一.分块查找的算法思想： 1.实例： 以上述图片的顺序表为例， 该顺序表的数据元素从整体来看是乱序的，但如果把这些数据元素分成一块一块的小区间， 第一个区间[0,1]索引上的数据元素都是小于等于10的， 第二…...
MySQL 隔离级别：脏读、幻读及不可重复读的原理与示例
一、MySQL 隔离级别 MySQL 提供了四种隔离级别，用于控制事务之间的并发访问以及数据的可见性，不同隔离级别对脏读、幻读、不可重复读这几种并发数据问题有着不同的处理方式，具体如下： 隔离级别脏读不可重复读幻读性能特点及锁机制读未提交（READ UNCOMMITTED）允许出现允许…...
React Native在HarmonyOS 5.0阅读类应用开发中的实践
一、技术选型背景 随着HarmonyOS 5.0对Web兼容层的增强，React Native作为跨平台框架可通过重新编译ArkTS组件实现85%以上的代码复用率。阅读类应用具有UI复杂度低、数据流清晰的特点。 二、核心实现方案 1. 环境配置 （1）使用React Native…...
Golang dig框架与GraphQL的完美结合
将 Go 的 Dig 依赖注入框架与 GraphQL 结合使用，可以显著提升应用程序的可维护性、可测试性以及灵活性。 Dig 是一个强大的依赖注入容器，能够帮助开发者更好地管理复杂的依赖关系，而 GraphQL 则是一种用于 API 的查询语言，能够提…...
将对透视变换后的图像使用Otsu进行阈值化，来分离黑色和白色像素。这句话中的Otsu是什么意思？
Otsu 是一种自动阈值化方法，用于将图像分割为前景和背景。它通过最小化图像的类内方差或等价地最大化类间方差来选择最佳阈值。这种方法特别适用于图像的二值化处理，能够自动确定一个阈值，将图像中的像素分为黑色和白色两类。 Otsu 方法的原…...
如何为服务器生成TLS证书
TLS（Transport Layer Security）证书是确保网络通信安全的重要手段，它通过加密技术保护传输的数据不被窃听和篡改。在服务器上配置TLS证书，可以使用户通过HTTPS协议安全地访问您的网站。本文将详细介绍如何在服务器上生成一个TLS证…...
C++八股 —— 单例模式
文章目录 1. 基本概念2. 设计要点3. 实现方式4. 详解懒汉模式 1. 基本概念 线程安全（Thread Safety） 线程安全是指在多线程环境下，某个函数、类或代码片段能够被多个线程同时调用时，仍能保证数据的一致性和逻辑的正确性…...
selenium学习实战【Python爬虫】
selenium学习实战【Python爬虫】 文章目录 selenium学习实战【Python爬虫】一、声明二、学习目标三、安装依赖3.1 安装selenium库3.2 安装浏览器驱动3.2.1 查看Edge版本3.2.2 驱动安装 四、代码讲解4.1 配置浏览器4.2 加载更多4.3 寻找内容4.4 完整代码 五、报告文件爬取5.1 提…...
如何理解 IP 数据报中的 TTL？
目录 前言理解 前言 面试灵魂一问：说说对 IP 数据报中 TTL 的理解？我们都知道，IP 数据报由首部和数据两部分组成，首部又分为两部分：固定部分和可变部分，共占 20 字节，而即将讨论的 TTL 就位于首…...
Reasoning over Uncertain Text by Generative Large Language Models
https://ojs.aaai.org/index.php/AAAI/article/view/34674/36829https://ojs.aaai.org/index.php/AAAI/article/view/34674/36829 1. 概述 文本中的不确定性在许多语境中传达，从日常对话到特定领域的文档（例如医学文档）（Heritage 2013；Landmark、Gulbrandsen 和 Svenevei…...