先上效果

明天就要端午节假期了，今天没啥事就打算整理一下磁盘里内容然后看到了一个尘封的文件夹：

这里面都是当时上学的时候老师发的一些页面案例，然后我就打开看了看发现了一些老一代开发者的思想(有点夸张了 也就2017年的代码而已啦)感觉比较有意思就发出来给大家分享一下

现在可能有更好的方式来实现这些页面但偶尔回顾一下之前的开发思路也是很有意思的，你比如说下面这段核心代码就全程都是原型原型链的应用，要是让我来写我肯定不会这么写的

function MoveDiv(div,i) {
  this.div=div;
  this.div.bool=false;
  this.div.style.left="0px";
  this.div.style.top=i*60+"px";
  this.div.style.opacity=1;
  this.div.addEventListener("click",this.clickHandler)
}
MoveDiv.prototype={
  clickHandler:function (e) {
    if(!e){
      e=window.event;
    }
    this.bool=!this.bool;
  },
  update:function () {
    if(this.div.bool) return;
    this.div.style.left=parseFloat(this.div.style.left)+1+"px";
    this.div.style.opacity=parseFloat(this.div.style.opacity)-0.001;
  }
};
function HitCircle(div) {
  this.div=div;
  this.div.style.left=Math.random()*450+"px";
  this.div.style.top=Math.random()*450+"px";
  this.div.style.display="none";
  var str="#";
  for(var i=0;i<3;i++){
    var color=Math.floor(Math.random()*256).toString(16);
    if(color.length<2){
      color="0"+color;
    }
    str+=color;
  }
  this.div.style.backgroundColor=str;
  this.abx=1;
  this.aby=1;
  this.speedx=5;
  this.speedy=3;
}
HitCircle.prototype={
  begin:false,
  update:function () {
    if(!this.begin) return;
    this.div.style.display="block";
    if(parseFloat(this.div.style.left)>500){
      this.abx=-1;
    }else if(parseFloat(this.div.style.left)<0){
      this.abx=1;
    }
    if(parseFloat(this.div.style.top)>500){
      this.aby=-1;
    }else if(parseFloat(this.div.style.top)<0){
      this.aby=1;
    }
    this.div.style.left=parseFloat(this.div.style.left)+this.speedx*this.abx+"px";
    this.div.style.top=parseFloat(this.div.style.top)+this.speedy*this.aby+"px";
  }

};
var divs=document.getElementsByTagName("div");
var list=[];
for(var i=0;i<divs.length;i++){
  var obj=new HitCircle(divs[i])
  list.push(obj);
}
animation();
var time=60;
var num=0;
function animation() {
  requestAnimationFrame(animation);
  showDiv();
  for(var i=0;i<list.length;i++){
    list[i].update();
  }
}
function showDiv() {
  if(time==0){
    list[num].begin=true;
    num++;
    if(num!=list.length){
      time=60;
    }
  }
  time--;
}

代发实现我放在了代码片段里大家有兴趣的可以研究一下。 然后再说明一下这不是我写的是之前老师的教学案例，要是涉及到了什么抄袭啥的麻烦联系我，感谢！