<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
h2 {
text-align: center;
}
.box {
width: 600px;
margin: 50px auto;
display: flex;
font-size: 25px;
line-height: 40px;
}
.qs {
width: 450px;
height: 40px;
color: red;
}
.btns {
text-align: center;
}
.btns button {
width: 120px;
height: 35px;
margin: 0 50px;
}
</style>
</head>
<body>
<h2>随机点名</h2>
<div class="box">
<span>名字是：</span>
<div class="qs">这里显示姓名</div>
</div>
<div class="btns">
<button class="start">开始</button>
<button class="end">结束</button>
</div>
<script>
// 数据数组
const arr = ['马超', '黄忠', '赵云', '关羽', '张飞']
const start= document.querySelector('.start')
const end= document.querySelector('.end')
const qs= document.querySelector('.qs')
function random(){
return Math.floor(Math.random()*arr.length)
}
let r=0
let e
start.addEventListener('click',function(){
e= setInterval(function(){
r=random()
//需要整个函数都执行完。
qs.innerHTML=`${arr[r]}`
},35)
if(arr.length===1){
end.disabled=start.disabled=true
}
})
end.addEventListener('click',function(){
clearInterval(e)
/* 结束一定要写结束定时器，不结束，定时器还会一直有，一直
执行，这里赋值，也停不下来。不管执行到,定时器执行就会开启线程
不断开启。执行 */
qs.innerHTML=`${arr[r]}`
arr.splice(r,1)
})
//let t1
//let f1
//t1=f1=1
// 等号从左往右执行，=先执行右边，=会把右边都执行。又执行
//等号，执行给了f1赋值，右边整体的值要赋给t1，但是赋值语句，没
//把等号右边的字母值去找，赋给它。
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8" />
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
.wrapper {
width: 1000px;
height: 475px;
margin: 0 auto;
margin-top: 100px;
}
.tab {
border: 1px solid #ddd;
border-bottom: 0;
height: 36px;
width: 320px;
}
.tab li {
position: relative;
float: left;
width: 80px;
height: 34px;
line-height: 34px;
text-align: center;
cursor: pointer;
border-top: 4px solid #fff;
}
.tab span {
position: absolute;
right: 0;
top: 10px;
background: #ddd;
width: 1px;
height: 14px;
overflow: hidden;
}
.products {
width: 1002px;
border: 1px solid #ddd;
height: 476px;
}
.products .main {
float: left;
display: none;
}
.products .main.active {
display: block;
}
.tab li.active {
border-color: red;
border-bottom: 0;
}
</style>
</head>
<body>
<div class="wrapper">
<ul class="tab">
<li class="tab-item active " data-num='1'>国际大牌<span>◆</span></li>
<li class="tab-item" data-num='2'>国妆名牌<span>◆</span></li>
<li class="tab-item" data-num='3'>清洁用品<span>◆</span></li>
<li class="tab-item" data-num=4>男士精品</li>
<!-- 可以不写双引号但是最后存储到变量内，都是字符串。属性可写的时候以字面值来写 -->
</ul>
<div class="products">
<div class="main active">
<a href="###"><img src="images/guojidapai.jpg" alt="" /></a>
</div>
<div class="main">
<a href="###"><img src="images/guozhuangmingpin.jpg" alt="" /></a>
</div>
<div class="main">
<a href="###"><img src="images/qingjieyongpin.jpg" alt="" /></a>
</div>
<div class="main">
<a href="###"><img src="images/nanshijingpin.jpg" alt="" /></a>
</div>
</div>
</div>
<script>
const tab= document.querySelector('.tab')
tab.addEventListener('click',function(e){
if(e.target.tagName==='LI'){
document.querySelector('.tab .active').classList.remove('active')
e.target.classList.add('active')
document.querySelector('.products .active').classList.remove('active')
document.querySelector(`.main:nth-child(${e.target.dataset.num})`).classList.add('active')
// 一个方法在执行过程全部执行完，才行。效果才有
//e是事件对象，属性target存的才是DOM对象。
//没执行完，即使执行到一半也不能有效果，有一个缓存，缓存，所以看语句写的顺序，但是生效要全部执行。
//mouseleave mouseenter 当在一个盒子里面，进入其他盒子 与当前盒子离开是当前盒子离开先渲染。一个方法执行。
}
})
</script>
</body>
</html>