很遗憾今天没有干货分享出来，不过明天就考试了，衷心希望SQL Server数据库可以过啊！！！
白天状态都不怎么好，也不知道是快考试了还是怎么，反正都不是很好。
下午自己找了很多鸡汤读，还打印出来了，希望能对自己有点帮助吧。
发现跟录播真是会漏掉很多知识点啊，上次那个小球随机移动的，老师给了一段很风骚的代码，大家可以看看。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
html,body{
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
#box{
width: 50px;
height: 50px;
background-color: #abcdef;
border-radius: 50%;
position: fixed;
left: 1px;
top: 1px;
cursor: pointer;
}
</style>
</head>
<body>
<div id="box"></div>
<script>
var maxWidth = document.body.offsetWidth-50;
var maxHeight = document.body.offsetHeight-50;
function randomMove(){
var box = document.getElementById("box");
var left = parseInt(box.style.left)||0;
var top = parseInt(box.style.top)||0;
var nleft = (Math.ceil(Math.random()*1000)%maxWidth);
var ntop = (Math.ceil(Math.random()*1000)%maxHeight);
var leftInterval = setInterval(function(){
if(left<nleft){
box.style.left = (++left)+"px";
}else if(left>nleft){
box.style.left = (--left)+"px";
}else{
clearInterval(leftInterval);
clearInterval(topInterval);
randomMove();
}
},10);
var topInterval = setInterval(function(){
if(top<ntop){
box.style.top = (++top)+"px";
}else if(top>ntop){
box.style.top = (--top)+"px";
}else{
clearInterval(topInterval);
clearInterval(leftInterval);
randomMove();
}
},10);
}
randomMove();
// setInterval(randomMove,1000);
</script>
</body>
</html>
这个缓慢移动的动画效果的确很厉害，不过没录播上没有细讲，现在也只能根据代码来理解了。
这个|| 0 有点意思，要是我应该会写更复杂的逻辑。
还用到了递归，有点复杂，分析一下又觉得还好，明天自己再实现一下吧。还是要多敲才行，自己不敲，完全看老师敲没啥软用。。。╮(╯▽╰)╭
原文地址：https://www.cnblogs.com/xiaoliutongxue/p/8326024.html
时间： 2024-08-29 03:49:52