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">&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>