行业知识
JS api基础初学
2026-10-26 13:30:34
来源：互联网转载
轮播图随机版
需���：当我们刷新页面，页面中的轮播图会显示不同图片以及样式
分析：①：准备一个数组对象，里面包含详细信息（素材包含）
②：随机选择一个数字，选出数组对应的对象，更换图片，底部盒子背景颜色，以及文字内容
③：利用这个随机数字，让小圆点添加高亮的类（addClass）利用css结构伪类选择器
CSS部分不予显示//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，修改图片路径=对象.urLimg.src = sliderData[random].url// 3.把p里面的文字内容更换// 3.1获取pconst p = document.querySelector('.slider-footer p')// 3.2修改pp.innerHTML = sliderData[random].title// 4.修改背景颜色const footer = document.querySelector('.slider-footer')footer.style.backgroundcolor =slideerData[random].color//行内样式表是高于内部样式表，所以可以后来更改来覆盖以前的// 5.小圆点const li = document.querySelector(`.slider-indicator li：nth-child(${random +1})`)//让当前这个小It添加active这个类li.classList.add('active') 获取设置表单的值
- 表单很多情况，也需要修改属性，比如点击眼睛，可以看到密码，本质是把表单类型变为文本框
- 正常的有属性有取值的跟其他的标签属性没有任何区别
获取：DOM对象属性名
设置：DOM对象.属性名=新值
表单.value='用户名'表单.type = 'password'
复选框
表单属性中添加就有效果，移除就没有效果，一律使用布尔值表示如果为true代表添加了该属性如果是false代表移
除了该属性
比如：disabled、checked、selected
点击//这样就禁止使用了//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 // 禁用按钮自定义属性
标准属性：标签天生自带的属性比如class id title等，可以直接使用点语法操作比如：disabled, checked.selected
•自定义属性：
＞在html5中推出来了专门的data-自定义属性
＞在标签上一律以data-开头
＞在DOM对象上一律以dataset对象方式获取
12345const one = document.querySelector('p')console.log(one.dataset)//这时右侧显示:DOMStringMap{id:'1',spm:'不知道;}id:'1',spm:'不知道';console.log(one.dataset.id)//1console.log(one.dataset.spm)//不知道定时器间歇函数
网页的倒计时
setInterval(函数,间隔时间)//每隔一段时间调用函数//间隔单位是ms
//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)阅读注册 协议
用户注册协议欢迎注册成为京东用户！在您注册过程中，您需要完成我们的注册流程并通:【请您注慧】如果您不同意以下仍议全部或任何条款约定，请您停止注册
对人类来说会不会太超前了？
上一篇：服务器怎么登陆抖店?
下一篇：业委会撤销备案后怎么办
