今天是js基础练习
掌握知识点：
- disabled 属性 为true时禁用input 元素。
- push() 方法可向数组的末尾添加一个或多个元素，并返回新的长度。
- shift() 方法用于把数组的第一个元素从其中删除，并返回第一个元素的值。
- addEventListener()绑定点击事件
- clearInterval() 方法可取消由 setInterval() 设置的 timeout。
- 随机数语句 Math.floor(Math.random() * (max - min + 1)) + min;
- setInterval() 计时器 按照指定的周期（以毫秒计）来调用函数或计算表达式。
- 设置类名
<style type="text/css">
.one{
width: 200px;
height: 200px;
background-color: pink;
}
.two{
width: 300px;
height: 300px;
background-color: blue;
}
.three{
width: 400px;
height: 400px;
background-color: orange;
}
</style>
<body>
<div></div>
<div></div>
<div></div>
<script type="text/javascript">
//需求：把类名用js方式，分发给对饮的div先十
//1.类名数组
let calssArr = ['one','two','three']
//2.获取div
let divList = document.querySelectorAll('div')
//3.遍历伪数组
for(let i = 0; i<divList.length;i++){
divList[i].className = calssArr[i];
}
</script>
2.随机颜色
<script type="text/javascript">
//需求：每次打开网页，背景颜色随机一个颜色
//1.颜色数组
let colorArr = ['red','blue','pink','orange']
//2.随机数
//Math.floor 为向下取整 Math.random(); 在0到1之间返回个随机数
let ranNum = Math.floor(Math.random()* (3-0 +1) +0)
//3.随机数去颜色数组换出颜色字母
//4.颜色设置给<body>
document.body.style.backgroundColor = colorArr[ranNum];
</script>
3.同意协议
html部分
<input type="checkbox" checked name="m1" id="agree"/>同意协议
<button type="button" id="registenBtn">
确认
</button>
js部分
//需求：勾选协议，按钮才能交互
//1.准备标签和样式
//2.获取标签
let myCheckBox = document.querySelector('#agree')
let myButton = document.querySelector('#registenBtn')
//3.复选框 addEventListener()绑定点击事件
myCheckBox.addEventListener('click',function(){
//4.获取复选框状态 - this (指向事件源) this.checked (true/false) 获取复选框状态
//5.判断去影响按钮禁用状态
// if(this.checked === true){
// //选中
// //.disabled 是禁用input的意思，这里false就是表示不禁用
// myButton.disabled = false
// }else{
// //未选中
// myButton.disabled =true
// }
//简写：
myButton.disabled = !this.checked
})
4.验证码倒计时 html部分
手机号<input type="text" />
<button type="button" id="btn">获取验证码</button>
js部分
//目标：点击倒计时的效果
//1.获取标签
let myBtn =document.querySelector('#btn')
//2.绑定点击事件
let timer;//计时器
myBtn.addEventListener('click',function(){
//3.按钮马上禁用
myBtn.disabled =true;
//4.准备变量，和计时器
let time = 3;
function myFun(){
//5.时间-1，设置按钮显示内容
time--;
myBtn.innerHTML = `${time}秒之后重新获取`
//6.判断为0，销毁计时器
if(time < 0){
//clearInterval() 方法可取消由 setInterval() 设置的 timeout。
//clearInterval() 销毁计时器
clearInterval(timer)
myBtn.innerHTML = `获取验证码`
myBtn.disabled =false;
}
}
timer = setInterval(myFun,1000)
})
5.走马灯 html部分
<style type="text/css">
div:nth-child(1){
width: 400px;
height: 400px;
position: absolute;
}
div:nth-child(2){
width: 350px;
height: 350px;
position: absolute;
top: 25px;
left: 25px;
}
div:nth-child(3){
width: 300px;
height: 300px;
position: absolute;
top: 50px;
left: 50px;
}
div:nth-child(4){
width: 250px;
height: 250px;
position: absolute;
top: 75px;
left: 75px;
}
div:nth-child(5){
width: 200px;
height: 200px;
position: absolute;
top: 100px;
left: 100px;
}
div:nth-child(6){
width: 150px;
height: 150px;
position: absolute;
top: 125px;
left: 125px;
}
div:nth-child(7){
width: 100px;
height: 100px;
position: absolute;
top: 150px;
left: 150px;
}
div:nth-child(8){
width: 50px;
height: 50px;
position: absolute;
top: 175px;
left: 175px;
</style>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
js部分
let arr = ['red','blue','green','yellow','orange','pink','gray','purple']
//目标：走马灯（颜色的切换）
//尝试：颜色字母 分发给 下标对应的 div标签对象
// let divList = document.querySelectorAll('div')
// for(let i =0;i<divList.length;i++){
// divList[i].style.backgroundColor = arr[i]
// }
//1.获取8个div标签对象
let divList = document.querySelectorAll('div')
//2.创建计时器
setInterval(function(){
//push() 方法可向数组的末尾添加一个或多个元素，并返回新的长度。
arr.push(arr[0]) //把开头的元素加到末尾
//shift() 方法用于把数组的第一个元素从其中删除，并返回第一个元素的值。
arr.shift() //删掉开头的元素
for(let i =0;i<arr.length;i++){
divList[i].style.backgroundColor = arr[i]
}
},1000)
