需要屏幕上输出一个范围的数字,并同时实现数字出现在屏幕中央的思路
首先在页面动态的创建一个标签用于输出数字,至于屏幕中央的数字在html中设一个div,使用定位居中
当遇到偶数时,需要将数字从屏幕中央移出且消失的思路
当遇到偶数时,我们动态创建一个div,使它的位置与原来在中央的div的位置与大小一样,然后将偶数值再赋值 给div,同样的颜色必须保持与原来的屏幕中的颜色一致
关于移动时注意的问题
首先我们需要动态求出div移动的距离,然后在设置div移动的步长使其移动,当div超过所求的距离时,就停止移动,同时删除这个div,
在移动过程中需要注意的点
1 因为移动到消失这样子会很突然,所以设置一个透明度让其慢慢的变透明,直至消失,这样子才自然些
2 在移动的时候方向不同,所以我们需要分明讨论左上 、左下、右上、右下这几个方向,但同时里面会有一些相同的操作,所以封装一个函数,否则代码会过于冗余,但是我封装函数之后还是有些冗余,所以以前在想办法变得简单些
最后当数字结束之后需要将中央的div隐藏
效果显示(视频加载有点慢哦)
数字飘移
代码区
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>动态数字显示</title>
<style>
*{
margin: 0;
padding: 0;
}
body{
background-color: violet;
}
.box{
width: 100%;
height: 100%;
}
.center,.change{
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
padding: 10px;
min-width: 50px;
min-height: 60px;
text-align: center;
line-height: 60px;
font-weight: 700;
background-color: rgba(0,0,0,.1);
border-radius: 10px;
font-size: 80px;
}
.text{
display: inline-block;
margin: 5px;
padding: 0;
min-width: 40px;
min-height: 30px;
text-align: center;
line-height: 50px;
font-size: 26px;
}
</style>
</head>
<body>
<div class="center"></div>
<script>
var div = document.querySelectorAll('div')[0];
var change = document.querySelector('.change');
// 获取窗口的高度
var docHeight = document.documentElement.clientHeight||document.body.clientHeight;
console.log(docHeight)
// 设置一个移动的距离
var step = [-100,-110,-120,-130,-140,-150,160,-170,-180,100,110,120,130,140,150,160,170,180];
// 设置一个变量,用来输出数字
var index = 1;
// color 用来获取颜色
var color;
// 动态的添加元素,
// 需要封装一个函数,并设置一个形参,这时就可以输出形参以内的所有数
function createDiv(num){
var timer = setInterval(function(){
// 创建div元素,设置其样式,
var span = document.createElement('span');
span.className = 'text';
// 设置div的文本值
span.innerText = index;
// 数字改变颜色,
color = getColor();
span.style.color = color;
// 同时将数字出添加到中间去
div.innerText = index;
div.style.color = color;
// 当遇到偶数中,实现飘移
if(index % 2 == 0){
var newDiv = document.createElement('div');
newDiv.className = 'change';
// 给change里面添加数字及颜色并将其添加到document中
newDiv.innerText = index;
newDiv.style.color = color;
document.body.appendChild(newDiv);
move(newDiv);
}
// 添加到屏幕中
document.body.appendChild(span);
index++;
if(index > num){
clearInterval(timer);
div.style.display = 'none';
};
},100);
}
createDiv(300);
// 获取随机颜色
function getColor(){
var r = Math.floor(Math.random() * (255));
var g = Math.floor(Math.random() * (255));
var b = Math.floor(Math.random() * (255));
return 'rgba('+r+','+g+','+b+')';
}
// 当数字为偶数时,实现飘移
// 设置一个div,其位置与原本在中央的div一样
// 当飘移的时候。设置移动的步长,因为会向四个方向移动,所以需要分别判断,
// 因为会一些操作重复,所以会封装一个函数
function move(obj){
// 设置移动的的距离
var x = step[Math.floor(Math.random() * step .length)];
var y = step[Math.floor(Math.random() * step .length)];
// var y = step[Math.floor(Math.random() * step .length)];
// 获取盒子当前可以移动的最大距离,
var width = obj.offsetLeft + x;
var height = obj.offsetTop + y;
// 设置透明度
obj.style.opacity = 1;
// 判断右下方向
if(x > 0 && y > 0){
obj.timer = setInterval(function(){
var num = 1;
common(obj,width,height,num);
},50);
}
// 判断右上方向
if(x > 0 && y < 0){
obj.timer = setInterval(function(){
var num = 2;
common(obj,width,height,num);
},50);
}
// 判断左上
if(x < 0 && y < 0){
obj.timer = setInterval(function(){
var num = 3;
common(obj,width,height,num);
},50);
}
// 判断左下
if(x < 0 && y > 0){
obj.timer = setInterval(function(){
var num = 4;
common(obj,width,height,num);
},50);
}
}
function common(obj,width,height,num){
// x > 0 y > 0
// newstep代表移动的步长
var newstep = 3;
if(num == 1){
// 如果当前移动的距离超过了最大的移动范围,则停止移动,并将其元素从document文档中删除
if(obj.offsetLeft >= width && obj.offsetTop >=height)
remove(obj);
else{
obj.style.left = obj.offsetLeft + newstep + 'px';
obj.style.top = obj.offsetTop + newstep + 'px';
if(obj.offsetLeft % 20 == 0)
obj.style.opacity -= 0.1;
}
}
// x > 0 y < 0
if(num == 2){
if(obj.offsetLeft >= width && obj.offsetTop <= height)
remove(obj);
else{
obj.style.left = obj.offsetLeft + newstep + 'px';
obj.style.top = obj.offsetTop - newstep + 'px';
if(obj.offsetLeft % 20 == 0)
obj.style.opacity -= 0.1;
}
}
// x < 0 && y < 0
if(num == 3){
if(obj.offsetLeft <= width && obj.offsetTop <= height)
remove(obj);
else{
obj.style.left = obj.offsetLeft - newstep + 'px';
obj.style.top = obj.offsetTop - newstep + 'px';
if(obj.offsetLeft % 20 == 0)
obj.style.opacity -= 0.1;
}
}
// x<0 y>0
if(num == 4){
if(obj.offsetLeft <= width && obj.offsetTop >=height)
remove(obj);
else{
obj.style.left = obj.offsetLeft - newstep + 'px';
obj.style.top = obj.offsetTop + newstep + 'px';
if(obj.offsetLeft % 20 == 0)
obj.style.opacity -= 0.1;
}
}
}
// 移除操作与透明度设置的函数封装
function remove(obj){
obj.style.opacity = 0;
clearInterval(obj.timer);
document.body.removeChild(obj);
}
</script>
</body>
</html>