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的密码...
基于算法竞赛的c++编程（28）结构体的进阶应用
结构体的嵌套与复杂数据组织 在C中，结构体可以嵌套使用，形成更复杂的数据结构。例如，可以通过嵌套结构体描述多层级数据关系： struct Address {string city;string street;int zipCode; };struct Employee {string name;int id;…...
Linux应用开发之网络套接字编程(实例篇)
服务端与客户端单连接 服务端代码 #include <sys/socket.h> #include <sys/types.h> #include <netinet/in.h> #include <stdio.h> #include <stdlib.h> #include <string.h> #include <arpa/inet.h> #include <pthread.h> …...
循环冗余码校验CRC码 算法步骤+详细实例计算
通信过程：（白话解释） 我们将原始待发送的消息称为 M M M，依据发送接收消息双方约定的生成多项式 G ( x ) G(x) G(x)（意思就是 G （ x ) G（x) G（x) 是已知的）࿰…...
` 方法)
深入浅出：JavaScript 中的 `window.crypto.getRandomValues()` 方法
深入浅出：JavaScript 中的 window.crypto.getRandomValues() 方法 在现代 Web 开发中，随机数的生成看似简单，却隐藏着许多玄机。无论是生成密码、加密密钥，还是创建安全令牌，随机数的质量直接关系到系统的安全性。Jav…...
dedecms 织梦自定义表单留言增加ajax验证码功能
增加ajax功能模块，用户不点击提交按钮，只要输入框失去焦点，就会提前提示验证码是否正确。 一，模板上增加验证码 <input name"vdcode"id"vdcode" placeholder"请输入验证码" type"text&quo…...
实现弹窗随键盘上移居中
实现弹窗随键盘上移的核心思路 在Android中，可以通过监听键盘的显示和隐藏事件，动态调整弹窗的位置。关键点在于获取键盘高度，并计算剩余屏幕空间以重新定位弹窗。 // 在Activity或Fragment中设置键盘监听 val rootView findViewById<V…...
听写流程自动化实践，轻量级教育辅助
随着智能教育工具的发展，越来越多的传统学习方式正在被数字化、自动化所优化。听写作为语文、英语等学科中重要的基础训练形式，也迎来了更高效的解决方案。 这是一款轻量但功能强大的听写辅助工具。它是基于本地词库与可选在线语音引擎构建，…...
视觉slam十四讲实践部分记录——ch2、ch3
ch2 一、使用g++编译.cpp为可执行文件并运行(P30) g++ helloSLAM.cpp ./a.out运行 二、使用cmake编译 mkdir build cd build cmake .. makeCMakeCache.txt 文件仍然指向旧的目录。这表明在源代码目录中可能还存在旧的 CMakeCache.txt 文件，或者在构建过程中仍然引用了旧的路…...
音视频——I2S 协议详解
I2S 协议详解 I2S (Inter-IC Sound) 协议是一种串行总线协议，专门用于在数字音频设备之间传输数字音频数据。它由飞利浦（Philips）公司开发，以其简单、高效和广泛的兼容性而闻名。 1. 信号线 I2S 协议通常使用三根或四根信号线&a…...
如何更改默认 Crontab 编辑器 ？
在 Linux 领域中，crontab 是您可能经常遇到的一个术语。这个实用程序在类 unix 操作系统上可用，用于调度在预定义时间和间隔自动执行的任务。这对管理员和高级用户非常有益，允许他们自动执行各种系统任务。 编辑 Crontab 文件通常使用文本编…...