01 - javascript的小实例(随机拼图动画效果)
实现的效果
当刷新网页时,在一个div盒子里,由100个小div盒子随机飞入组成一张完整的图片;
用到的知识点有
1.css
- positon的相对定位(relative)和绝对定位(absolute);
- background属性;
2.js
- 动态获取标签和静态获取标签
静态获取标签的方法只有三种:
1.let div = document.getElementById(" ")
2.let div1 = document.querySelector(" ")
3.let div2 = document.querySelectorAll(" ")
静态获取标签就是获取一次之后,之后就不会刷新标签里的内容了;而动态获取标签的内容就是会动态的去获取标签,并且实时刷新。
- Math API
Math.trunc() //就是去除一个数的小数部分。
详情请点击
代码展示
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>fan-js</title>
<style>
* {
margin: 0;
padding: 0;
}
.box {
position: relative;
margin: 50px auto;
width: 500px;
height: 500px;
background: #f9f9f9;
border: 1px solid #c9c6c6;
}
.box>div {
position: absolute;
width: 50px;
height: 50px;
box-sizing: border-box;
}
</style>
</head>
<body>
<div class="box">
<div></div