很遗憾今天没有干货分享出来,不过明天就考试了,衷心希望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 有点意思,要是我应该会写更复杂的逻辑。
还用到了递归,有点复杂,分析一下又觉得还好,明天自己再实现一下吧。还是要多敲才行,自己不敲,完全看老师敲没啥软用。。。╮(╯▽╰)╭