当前位置：首页 > news >正文

JS api基础初学

news 2026/1/22 23:58:00

轮播图随机版

需求：当我们刷新页面，页面中的轮播图会显示不同图片以及样式

分析：①：准备一个数组对象，里面包含详细信息（素材包含）

②：随机选择一个数字，选出数组对应的对象，更换图片，底部盒子背景颜色，以及文字内容

③：利用这个随机数字，让小圆点添加高亮的类（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">&lt;</button>
<button class="next">&gt;</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基础初学

轮播图随机版需求：当我们刷新页面，页面中的轮播图会显示不同图片以及样式分析：①：准备一个数组对象，里面包含详细信息（素材包含） ②：随机选择一个数字，选出数组对应…...

编程日记 2024/3/1 13:30:08

uniapp实战:父子组件传参之子组件数量动态变化

需求说明现有的设置单元列表,每个带有虚线加号的可以看做是一组设置单元,点击加号可以添加一组设置单元.点击设置单元右上角可以删除对应的设置单元. 实现思路说明利用数组元素添加或是删除的方式实现页面数量动态变化.由于每个设置单元内容都相同所以单独封装了一个子组件.…...

编程日记 2024/3/1 13:29:07

Ubuntu绑定USB接口到固定端口

绑定端口打开终端，输入以下命令查看USB端口信息： udevadm info -a -n /dev/ttyUSB0执行后，可以看到部分输出如下: 找到第一个，a-b:c格式的KERNELS，记住这个值，后面会用到。 linlin-B660M-D2H-DDR4:~$ u…...

编程日记 2024/3/1 13:28:06

解决gogs勾选“使用选定的文件和模板初始化仓库”报错500,gogs邮件发送失败,gogs邮件配置不生效,gogs自定义模板等问题

解决gogs勾选“使用选定的文件和模板初始化仓库”报错500,gogs邮件发送失败,gogs邮件配置不生效,gogs自定义模板等问题前几天出了教程本地部署gogs，在后期运行时发现两个问题： 第一：邮件明明配置了，后台显示未配置，…...

编程日记 2024/3/1 13:26:04

数字后端——DEF文件格式

文章目录 MACRO的不同orientationDEF中在macro orientation定义前需要留空格 MACRO的不同orientation DEF中在macro orientation定义前需要留空格像下图中这种方向和分号之间没有空格的情况，就是有问题的格式。...

编程日记 2024/3/1 13:24:02

【可做课设、附完整技术文档】流式、异步、实时的Django聊天室！（需进一步定制可联系本人）

介绍完整源码以及完整项目文档请看源码链接。此Django项目实现了一个精致易扩展的实时聊天室，可直接作为网页开发的课程设计提交，也可二次开发，比如添加更好看的样式，或者更多更酷炫的功能。实现了如下功能： 流…...

编程日记 2024/3/1 13:23:01

网络编程：基于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…...

编程日记 2024/3/1 13:19:58

kubectl 命令行管理K8S（上）

目录陈述式资源管理方式介绍命令项目的生命周期创建 kubectl create命令发布 kubectl expose命令更新 kubectl set 回滚 kubectl rollout 删除 kubectl delete 应用发布策略金丝雀发布陈述式资源管理方式介绍 1.kubernetes 集群管理集群资源…...

编程日记 2024/3/1 13:14:49

Redis 之四：Redis 事务和乐观锁

事务特点 Redis 事务可以一次执行多个命令， 并且带有以下三个重要的保证： 批量操作在发送 EXEC 命令前被放入队列缓存。收到 EXEC 命令后进入事务执行，事务中任意命令执行失败，其余的命令依然被执行。不具备原子性。在事务执…...

编程日记 2024/3/1 13:11:45

C# WPF编程-创建项目

1.创建新项目选择“WPF应用程序”》“下一步” 设置项目设置项目名称，保存位置等参数>下一步 3.选择框架 4.项目创建成功 5.运行项目...

编程日记 2024/3/1 13:10:43

密码学及其应用（应用篇15）——0/1背包问题

1 问题背景背包问题是一个经典的优化问题，在计算机科学和运筹学中有着广泛的应用。具体到你提到的这个问题，它是背包问题中的一个特例，通常被称为0/1背包问题。这里，我们有一系列的正整数 ，以及一个正整数&#xff0c…...

编程日记 2024/3/1 13:08:39

基于springboot+vue的实验室管理系统(前后端分离)

博主主页：猫头鹰源码博主简介：Java领域优质创作者、CSDN博客专家、阿里云专家博主、公司架构师、全网粉丝5万、专注Java技术领域和毕业设计项目实战，欢迎高校老师\讲师\同行交流合作主要内容：毕业设计(Javaweb项目|小程序|Pyt…...

编程日记 2024/3/1 13:06:36

华为OD技术面试案例5-2024年

背景 985本计算机专业，目标院校。 1.15 投递在某BOSS上投递的简历，HR人很nice，非常负责任。 1.19 收到机试通知第一题是一个哈夫曼编码，第三题是一个动态规划，机试整体难度不算高，刷leetcode hot100…...

编程日记 2024/3/1 13:05:35

【QT+QGIS跨平台编译】之五十五：【QGIS_CORE跨平台编译】—【qgsmeshcalcparser.cpp生成】

文章目录一、Bison二、生成来源三、构建过程一、Bison GNU Bison 是一个通用的解析器生成器，它可以将注释的无上下文语法转换为使用 LALR (1) 解析表的确定性 LR 或广义 LR (GLR) 解析器。Bison 还可以生成 IELR (1) 或规范 LR (1) 解析表。一旦您熟练使用 Bison，您可以使用…...

编程日记 2024/3/1 12:59:25

Unity（第二十部）效果粒子、线条和拖尾

1、粒子系统粒子系统介绍 Unity 粒子系统是 Unity 引擎中用于创建和控制粒子效果的工具。它可以模拟各种自然现象，如火焰、烟雾、雨滴等，也可以用于创建特效，如魔法光芒、爆炸效果等。粒子系统组成在 Unity 中，粒子系统由发射…...

编程日记 2024/3/1 12:58:24

全量知识系统问题及SmartChat给出的答复之6 三套工具之1

Q15. 提出想法和问题前面说过，DDD在我要设计的全量知识系统中位于中间层，是专门用来解决“知识汤”问题的。解决的思路就是以将为在特定领域中的公司经营提供一个责任-权限平面为目的，帮助他们调整商业模式以及组建恰当的组织&#xff0c…...

编程日记 2024/3/1 12:57:23

[RoarCTF 2019]Easy Calc

这题考查的是: 字符串解析特性目录读取文件内容读取字符串解析特性详解：PHP字符串解析特性 （$GET/$POST参数绕过）（含例题 buuctf easycalc）_参数解析绕过-CSDN博客 ascii码查询表：ASCII 表 | 菜鸟工具 …...

编程日记 2024/3/1 12:56:22

完美解决 git 报错fatal: Not a git repository (or any of the parent directories): .git

问题描述错误提示是找不到.git文件，无法执行git指令，意思是当前你要提交的文件夹中没有.git这个文件解决方案执行如下命令： git init...

编程日记 2024/3/1 12:54:18

electron无法设置自己的图标？渲染进程require报错？

electron无法设置自己的图标？ 极有可能是图标太大，或者宽高不同我推荐的网址icon转换选着20x20一般就可以渲染进程无法使用require?一直报错？ webPreferences: {nodeIntegration: true, enableRemoteModule: true, contextIsolation: …...

编程日记 2024/3/1 12:50:11

vscode连接服务器与FileZilla上传到服务器

https://www.cnblogs.com/qiuhlee/p/17729647.html（这个是vscode连接服务器） 主机：就是服务器的主机号使用者名称：比如ALmax的用户名密码：比如ALmax的密码...

编程日记 2024/3/1 12:47:06

OpenLayers 可视化之热力图

注：当前使用的是 ol 5.3.0 版本，天地图使用的key请到天地图官网申请，并替换为自己的key 热力图（Heatmap）又叫热点图，是一种通过特殊高亮显示事物密度分布、变化趋势的数据可视化技术。采用颜色的深浅来显示…...

编程新知 2025/12/9 21:15:58

深入剖析AI大模型：大模型时代的 Prompt 工程全解析

今天聊的内容，我认为是AI开发里面非常重要的内容。它在AI开发里无处不在，当你对 AI 助手说 "用李白的风格写一首关于人工智能的诗"，或者让翻译模型 "将这段合同翻译成商务日语" 时，输入的这句话就是 Prompt。…...

编程新知 2026/1/19 5:43:29

java_网络服务相关_gateway_nacos_feign区别联系

1. spring-cloud-starter-gateway 作用：作为微服务架构的网关，统一入口，处理所有外部请求。核心能力： 路由转发（基于路径、服务名等）过滤器（鉴权、限流、日志、Header 处理）支持负…...

编程新知 2025/11/28 2:51:33

centos 7 部署awstats 网站访问检测

一、基础环境准备（两种安装方式都要做） bash # 安装必要依赖 yum install -y httpd perl mod_perl perl-Time-HiRes perl-DateTime systemctl enable httpd # 设置 Apache 开机自启 systemctl start httpd # 启动 Apache二、安装 AWStats&#xff0…...

编程新知 2026/1/20 17:40:23

Linux相关概念和易错知识点（42）（TCP的连接管理、可靠性、面临复杂网络的处理）

目录 1.TCP的连接管理机制（1）三次握手①握手过程②对握手过程的理解 （2）四次挥手（3）握手和挥手的触发（4）状态切换①挥手过程中状态的切换②握手过程中状态的切换 2.TCP的可靠性&…...

编程新知 2026/1/22 20:25:25

Linux-07 ubuntu 的 chrome 启动不了

文章目录问题原因解决步骤一、卸载旧版chrome二、重新安装chorme三、启动不了，报错如下四、启动不了，解决如下总结问题原因在应用中可以看到chrome，但是打不开(说明：原来的ubuntu系统出问题了，这个是备用的硬盘&a…...

编程新知 2026/1/15 5:25:06

C++中string流知识详解和示例

一、概览与类体系 C 提供三种基于内存字符串的流，定义在 <sstream> 中： std::istringstream：输入流，从已有字符串中读取并解析。std::ostringstream：输出流，向内部缓冲区写入内容，最终取…...

编程新知 2025/11/30 11:30:47

AspectJ 在 Android 中的完整使用指南

一、环境配置（Gradle 7.0 适配） 1. 项目级 build.gradle // 注意：沪江插件已停更，推荐官方兼容方案 buildscript {dependencies {classpath org.aspectj:aspectjtools:1.9.9.1 // AspectJ 工具} } 2. 模块级 build.gradle plu…...

编程新知 2025/7/7 22:33:57

IP如何挑？2025年海外专线IP如何购买？

你花了时间和预算买了IP，结果IP质量不佳，项目效率低下不说，还可能带来莫名的网络问题，是不是太闹心了？尤其是在面对海外专线IP时，到底怎么才能买到适合自己的呢？所以，挑IP绝对是个技…...

编程新知 2025/10/19 9:49:56

MySQL 8.0 事务全面讲解

以下是一个结合两次回答的 MySQL 8.0 事务全面讲解，涵盖了事务的核心概念、操作示例、失败回滚、隔离级别、事务性 DDL 和 XA 事务等内容，并修正了查看隔离级别的命令。 MySQL 8.0 事务全面讲解一、事务的核心概念（ACID） 事务是…...

编程新知 2025/9/19 22:12:36

轮播图随机版

获取设置表单的值

复选框

自定义属性

定时器间歇函数

轮播图定时版

相关文章：