菁英数字科技（猩码）-猩码学苑-专注软件开发人才菁英教育

标题: 前端-王卓凡-20230526 [打印本页]

作者: 王卓凡 时间: 2023-6-13 18:13
标题: 前端-王卓凡-20230526
案例：随机生成小方块#box {
  width: 800px;
  height: 600px;
  background: #ccc;
  position: relative;
} <div id="box"></div>
//随机数方法
function getRandom(min, max) {
min = Math.ceil(min);
max = Math.floor(max);
return Math.floor(Math.random() * (max - min + 1)) + min; //含最大值，含最小值
}// 创建一个构造函数，抽象出小方块对象
// parent 父元素
function Block(parent, width, height, background, x, y) {
  this.parent = parent
  this.width = width
  this.height = height
  this.background = background
  this.x = x
  this.y = y
}

// 创建div元素
Block.prototype.render = function () {
  // 创建div
  this.el = document.createElement('div')
  this.parent.appendChild(this.el)
  // 把div放到父元素里面去
  this.el.style.position = 'absolute'
  // 设置div的宽
  this.el.style.width = this.width + 'px'
  this.el.style.height = this.height + 'px'
  this.el.style.background = this.background
  this.el.style.left = this.x + 'px'
  this.el.style.top = this.y + 'px'
}
// 随机位置的方法
Block.prototype.positionXY = function () {
  this.x = getRandom(0, this.parent.offsetWidth / this.el.offsetWidth - 1) * this.width;
  this.y = getRandom(0, this.parent.offsetHeight / this.el.offsetHeight - 1) * this.height;
  // 重新赋值
  this.el.style.left = this.x + 'px'
  this.el.style.top = this.y + 'px'
}
var box = document.getElementById('box')

// 创建一个空数组，添加生成div元素
var arr = []
for (var i = 0; i < 10; i++) {
  var b1 = new Block(box, 50, 50, 'rgb(' + getRandom(0, 255) + ',' + getRandom(0, 255) + ',34)')
  b1.render()
  b1.positionXY()
  arr.push(b1)
}
console.log(arr)
// 开启定时器
setInterval(function () {
  arr.forEach(v => {
v.positionXY()
  })
}, 500)案例：选项卡-面向对象.contant {
width: 400px;
height: 400px;
background: #999;
}

.contant .tops {
display: flex;
}

.contant .tops span {
flex: 1;
}

.current {
background: orange;
}

.contant .bottoms div {
display: none;
}

.contant div.show {
display: block;
}
<div class="box1">
<div class="contant">
      <div class="tops">
         <span class="current">1</span>
         <span>2</span>
         <span>3</span>
         <span>4</span>
      </div>
      <div class="bottoms">
         <div class="show">1</div>
         <div>2</div>
         <div>3</div>
         <div>4</div>
      </div>
</div>
</div>


<div class="box2">
<div class="contant">
      <div class="tops">
         <span class="current">1</span>
         <span>2</span>
         <span>3</span>
         <span>4</span>
      </div>
      <div class="bottoms">
         <div class="show">1</div>
         <div>2</div>
         <div>3</div>
         <div>4</div>
      </div>
</div>
</div>//面向过程

// const box1 = document.querySelector('.box1')
// const content = box1.querySelector('.contant')
// const spans = content.querySelectorAll('span')
// const divs = content.children[1].children

// for (let i = 0; i < spans.length; i++) {
// spans.onclick = function () {
//    console.log(i)
//    for (var j = 0; j < spans.length; j++) {
//    spans[j].className = ''
//    divs[j].className = ''
//    }

//    this.className = 'current'
//    divs.className = 'show'
// }
// }

//面向对象
function Tabs(select) {
const box1 = document.querySelector(select)
const content = box1.querySelector('.contant')

this.spans = content.querySelectorAll('span')
this.divs = content.children[1].children
console.log(this.spans)
console.log(this.divs)
//添加调用，实例化可以不需要再次调用
this.change()
}

Tabs.prototype.change = function () {
for (let i = 0; i < this.spans.length; i++) {
      this.spans.onclick = () => {
         console.log(i)
         for (var j = 0; j < this.spans.length; j++) {
            this.spans[j].className = ''
            this.divs[j].className = ''
         }
         this.spans.className = 'current'
         this.divs.className = 'show'
      }
}
}
let t1 = new Tabs('.box1')
//t1.change()

let t2 = new Tabs('.box2')
//t2.change()window.onload = () => {
  function Tabs(select, eventType) {
const box1 = document.querySelector(select)
const content = box1.querySelector('.content')
this.spans = content.children[0].children
this.divs = content.children[1].children
//添加不同的事件类型
this.eventType = eventType
this.change()
  }
  Tabs.prototype.change = function () {
for (let i = 0; i < this.spans.length; i++) {
   this.spans.addEventListener(this.eventType, () => {
      for (let j = 0; j < this.spans.length; j++) {
      this.spans[j].className = ''
      this.divs[j].className = ''
      }
      this.spans.className = 'current'
      this.divs.className = 'show'
   })
}
  }
  let tab1 = new Tabs('.box1', 'click')
  let tab2 = new Tabs('.box2', 'mouseover')
  let tab3 = new Tabs('.box3', 'dblclick')
  }

欢迎光临菁英数字科技（猩码）-猩码学苑-专注软件开发人才菁英教育 (http://www.xingmaxueyuan.com/) Powered by Discuz! X3.4