分别设置颜色、字体大小、用定位来实现不能重叠功能

设置字体大小

Math.floor(Math.random()*10)+10
setColor() {
  var r=Math.floor(Math.random()*256);
  var g=Math.floor(Math.random()*256);
  var b=Math.floor(Math.random()*256);
  return "rgb("+r+','+g+','+b+")";
},
setLeft() {
  return Math.random() * 100 * 3 + 200
},
setTop() {
  if (this.words.length == this.randomTopArr.length) return
  let randomTxt = Math.random() * 100 * 3
  randomTxt = randomTxt > 230 ? randomTxt / 3 : randomTxt
  this.randomTopArr.length && this.randomTopArr.forEach(res => {
    if (Math.abs(res - randomTxt) < 30) {
      randomTxt = res > randomTxt ? randomTxt - 20 : res - 20
    }
  })
  this.randomTopArr.push(randomTxt)
  return randomTxt
}
不能重叠的主要思路是设置top值,只要在一定范围内的区间,就不会重叠,用每个随机生成的top值跟已经存起来的数组每一项进行对比,如果距离太近,做一下改变

Mark
52 声望4 粉丝

用心分享,做有梦想的攻城狮;