js-基础(七)双色球、选项卡、购物车
16lz
2022-04-27
1.双色球
<body>
<div class="box"></div>
<script>
let redarr = [];
let resultarr = [];
//1.生成1-33个红球
for(let i = 1;i <= 33;i++){
redarr.push(i);
}
console.log(redarr);
// 2.从33个红球中取出6个
for(let i = 0;i < 6; i++){
let index = Math.floor(Math.random() * redarr.length);
resultarr.push(redarr[index]);
// 会出现重复
redarr.splice(index,1);
}
resultarr.sort((a,b)=>a-b);
console.log(resultarr);
//3. 生成一个蓝球, 并追加到中奖数组中
let blue = Math.floor(Math.random() * 16)+1;
console.log(blue);
resultarr.push(blue);
console.log(resultarr);
// 4. 将中奖号码显示到页面中
const box = document.querySelector(".box");
resultarr.forEach(item=>{
const ball = document.createElement('div');
ball.textContent = item;
box.append(ball);
});
</script>
<style>
.box {
display: grid;
grid-template-columns: repeat(auto-fill, 30px);
grid-auto-rows: 30px;
gap: 5px;
}
.box>div {
border-radius: 50%;
display: grid;
place-items: center;
background-color: red;
color: white;
box-shadow: 2px 2px 2px #666;
}
.box>div:last-of-type {
background-color: blue;
}
</style>
</body>
2.选项卡
function show(){
// 事件绑定者
//console.log(event.currentTarget);
//事件主体
//console.log(event.target);
const ul = event.currentTarget;
const li = event.target;
// 1. 将原高亮的标签去掉active,并把当前的标签设置为active
[...ul.children].forEach(li=>
li.classList.remove('active'));
li.classList.add('active');
// 2. 根据标签的data-index进行查询,获取与它对应的列表
const content = document.querySelectorAll('.content');
content.forEach(li=>li.classList.remove('active'));
[...content].find(ul=>ul.dataset.index === li.dataset.index ).classList.add('active');
}
3.购物车
更多相关文章
- Android性能优化之布局优化
- 编译android 之后生成的 img 文件介绍
- Android中的TextView深入学习之加载HTML显示
- Android(安卓)超简单的录制屏幕视频及生成GIF文件的方法
- android studio如何生成混淆代码的jar
- Android(安卓)layout之优化:使用include和merge 标签
- Android(安卓)layout 使用include和merge 标签
- 用Android(安卓)Studio 运行ndk 程序
- ANDROID Porting系列四、建立公开密钥和签名生成