1 js节点操作
<div>
<ul>
<li>1</li>
<li>12</li>
<li>123</li>
<li>1234</li>
<li>12345</li>
</ul>
</div>
<div class="box">
<span> x </span>
</div>
<script>
var box = document.querySelector('box');
var lis = ul.chile
/*节点操作 使用node 表示 一般有nodeType nodeName nodeValue三个基本属性
节点层级 父子兄层级关系
1 父节点 parentNote 得到的是离元素最近的父节点 找不到就返回为空
2 子节点 childNodes 所有节点 包括文本 元素 ... 可以用nodeType
parentNote.children 获取所有子 元素 节点 （非标准 但是常用
parentNote.first（last）Child 获取第一个节点 不管是啥
parentNote.first(last)eElementChild 获取第一个元素
ie 9 以上才支持
3 实际开发的写法 没有兼容性问题
.children[0]
*/
2.flex布局
骰子制作
<style>
* {
margin: 0;
padding: 0;
}
.back-ground {
margin: auto;
background-color: rgb(145, 137, 137);
}
.container {
display: none;
width: 300px;
height: 300px;
margin: auto;
background-color: azure;
border: solid black 2px;
border-radius: 50px;
}
.dot {
margin: 10px;
width: 70px;
height: 70px;
background-color: black;
border-radius: 50%;
}
.dp-none {
display: none;
}
/* 第一面 */
.dice1 {
justify-content: center;
}
.one {
align-self: center;
}
/* 第二面 */
.dice2 {
justify-content: space-between;
}
.two {
background-color: black;
}
.two:nth-child(2) {
align-self: flex-end;
}
/* 第三面 */
.dice3 {
justify-content: space-between;
}
.three {
background-color: black;
}
.three:nth-child(2) {
align-self: center;
}
.three:nth-child(3) {
align-self: flex-end;
}
/* 第四面 */
.dice4 {
flex-wrap: wrap;
/*当子元素超过父元素时在下一行显示*/
align-content: space-between;
}
.forth {
background-color: black;
}
.forth:nth-child(1) {
margin-right: 130px;
}
.forth:nth-child(3) {
margin-right: 130px;
}
/* 第五面 */
.dice5 {
flex-wrap: wrap;
align-content: space-between;
}
.five {
background-color: black;
;
}
.five:nth-child(1) {
margin-right: 130px;
}
.five:nth-child(3) {
margin-left: 115px;
}
.five:nth-child(4) {
margin-right: 130px;
}
/* 第六面 */
.dice6 {
flex-wrap: wrap;
align-content: space-between;
justify-content: space-between;
}
.six {
background-color: black;
}
</style>
</head>
<body>
<div class="back-ground">
<div class="box">
<!-- 1点 -->
<div class="container dice1 ">
<div class="one dot"></div>
</div>
<!-- 2点 -->
<div class="container dice2">
<div class="two dot"></div>
<div class="two dot"></div>
</div>
<!-- 3点 -->
<div class="container dice3">
<div class="three dot"></div>
<div class="three dot"></div>
<div class="three dot"></div>
</div>
<!-- 4点 -->
<div class="container dice4">
<div class="forth dot"></div>
<div class="forth dot"></div>
<div class="forth dot"></div>
<div class="forth dot"></div>
</div>
<!-- 5点 -->
<div class="container dice5">
<div class="five dot"></div>
<div class="five dot"></div>
<div class="five dot"></div>
<div class="five dot"></div>
<div class="five dot"></div>
</div>
<!-- 6点 -->
<div class="container dice6">
<div class="six dot"></div>
<div class="six dot"></div>
<div class="six dot"></div>
<div class="six dot"></div>
<div class="six dot"></div>
<div class="six dot"></div>
</div>
</div>
<script>//随机出现点数
var container = document.querySelector('.box').querySelectorAll('.container')
var suijishu = Math.floor(Math.random() * 6 )//形成1-6随机数
for (var i = 0; i <6; i++) {
container[i].setAttribute('index', i );
}
container[suijishu].style.display = 'flex';
console.log( suijishu);
</script>
</div>
扫一扫
1115
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
