js ​

// 1.获取元素
var hourEl = document.querySelector(".hour")
var minuteEl = document.querySelector(".minute")
var secondEl = document.querySelector(".second")

// 2.获取24:00:00的时间戳
// 🚚 直接设置 不推荐 ❌
// var endDate = new Date("2023-06-07T00:00:00").valueOf()

// ✈️ 先获取当前时间戳,再设置24:00:00
var endDate = new Date()
endDate.setHours(24, 0, 0, 0)
endDate = endDate.getTime()

// 3.封装工具类函数 ---- 解决长度不足的情况
function padLeft(content, count, padStr) {
  // 3.1 如果没有传入参数,默认使用当前值
  count = count || 2
  padStr = padStr || "0"

  // 3.2 保证传入的类型是String,可以使用 xx.toString() / String(xx)
  content = content.toString()

  // 3.3 调用函数 padStart 方法实现填充操作，并返回结果
  return content.padStart(count, padStr)
}

// 4.定义函数 ---- 设置倒计时
function setCountdown() {
  // 4.1 获取当前时间戳
  var nowDate = Date.now()

  // 4.2 获取剩下的时间戳 1s = 1000ns
  var time = Math.floor((endDate - nowDate) / 1000)

  // 4.3 获取具体的 时 / 分 / 秒
  var hour = Math.floor(time / 3600)
  var minute = Math.floor(time / 60) % 60
  var second = time % 60

  // 4.4 设置内容
  hourEl.textContent = padLeft(hour)
  minuteEl.textContent = padLeft(minute)
  secondEl.textContent = padLeft(second)
}

// 5.保证第一次进来就调用
setCountdown()

// 6.设置定时器,每隔1s刷新一次
setInterval(setCountdown, 1000)

// 1.获取元素
var btnEl = document.querySelector(".backTop")

// 2.默认返回顶部按钮隐藏
btnEl.hidden = true

// 3.监听window的滚动事件
window.onscroll = function () {
  // 如果出现拉动滚动条,显示返回顶部按钮,否则隐藏返回顶部按钮
  if (this.scrollY > 0) {
    btnEl.hidden = false

    // 监听返回按钮的点击事件
    btnEl.onclick = function () {
      // scrollTo(pageX,pageY) 将页面滚动至 绝对坐标
      window.scrollTo(0, 0)
      // 隐藏返回顶部按钮
      this.hidden = true
    }
  } else {
    // 在拉动滚动条位置为0时,保证隐藏返回顶部按钮
    btnEl.hidden = true
  }
}

// 1.获取元素
var boxEl = document.querySelector(".box")

// 2.记录鼠标是否点击下去
var isDown = false

// 3.监听boxEl元素的鼠标按下事件
boxEl.onmousedown = function() {
  console.log("鼠标按下去")
  isDown = true
}

// 4.监听boxEl元素的鼠标弹起事件
boxEl.onmouseup =  function() {
  console.log("鼠标弹起")
  isDown = false
}

// 5.监听boxEl元素的鼠标被移动事件
boxEl.onmousemove = function() {
  if (isDown) {
    console.log("鼠标在box上移动")
  }
}

// 1.获取元素
var body = document.body

// 2.创建元素
var boxEl = document.createElement("div")

// 3.设置类
boxEl.className = "container"

// 4.插入到body中
body.append(boxEl)

// 5.封装工具类函数 --- 实现随机颜色
function randomColor() {
  return `rgb(${Math.floor(Math.random() * 256)},${Math.floor(Math.random() * 256)},${Math.floor(Math.random() * 256)})`
}

// 6.循环遍历元素
for (var i = 0; i < 4; i++) {
  // 6.1 创建元素
  var divEl = document.createElement("div")
  // 6.2 设置类
  divEl.className = "item"
  // 6.3 设置内容
  divEl.textContent = i + 1
  // 6.4设置随机颜色
  divEl.style.backgroundColor = randomColor()
  // 6.5 插入到boxEl中
  boxEl.append(divEl)

  // 🚚 监听的对象是divEl元素本身
  // 6.6 监听divEl元素的鼠标移动事件
  divEl.onmouseenter = function (event) {
    // console.log(this) // divEl
    // event.target 事件发生的对象 <-> 鼠标移动哪个元素上
    // event.currentTarget 当前处理的对象 <-> 绑定的点击事件
    // console.log(event.target === event.currentTarget) // true
    console.log(event.target.textContent)
  }
}

// ✈️ 事件委托 推荐使用 ✅
// 7.监听鼠标移动到divEl元素上显示该元素的内容
boxEl.onmouseover = function (event) {
  // console.log(this) // boxEl
  // event.target 事件发生的对象 <-> 鼠标移动哪个元素上
  // event.currentTarget 当前处理的对象 <-> 绑定的点击事件
  // console.log(event.target === event.currentTarget) // false
  console.log(event.target.textContent)
}

// 1.获取元素
var boxEl = document.querySelector("div")

// 2.封装工具类函数 --- 实现随机颜色
function randomColor() {
  return `rgb(${Math.floor(Math.random() * 256)},${Math.floor(Math.random() * 256)},${Math.floor(Math.random() * 256)})`
}

// 3.循环遍历元素
for (var divEl of boxEl) {
  // 3.1 创建元素
  divEl.textContent = i + 1

  // 3.2 设置随机颜色
  divEl.style.backgroundColor = randomColor()

  // 🚚 监听的对象是divEl元素本身 onmouseenter 不支持冒泡(不能使用事件委托)
  // 3.3 监听divEl元素的鼠标移动事件
  divEl.onmouseenter = function (event) {
    // console.log(this) // divEl
    // event.target 事件发生的对象 <-> 鼠标移动哪个元素上
    // event.currentTarget 当前处理的对象 <-> 绑定的点击事件
    // console.log(event.target === event.currentTarget) // true
    console.log(event.target.textContent)
  }
}

// ✈️ 事件委托 推荐使用 ✅  onmouseover 支持冒泡(不能使用事件委托)
// 4.监听鼠标移动到divEl元素上显示该元素的内容
boxEl.onmouseover = function (event) {
  // console.log(this) // boxEl
  // event.target 事件发生的对象 <-> 鼠标移动哪个元素上
  // event.currentTarget 当前处理的对象 <-> 绑定的点击事件
  // console.log(event.target === event.currentTarget) // false
  console.log(event.target.textContent)
}

// 1.从服务器拿到数据 ajax/fetch请求
var tipList = [
  {
    icon: "https://tse4-mm.cn.bing.net/th/id/OIP-C.0KvO81VQ-QeWbGVRhT8E8wHaHa?w=209&h=209&c=7&r=0&o=5&dpr=2&pid=1.7",
    title: "167***348对这件商品感兴趣"
  },
  {
    icon: "https://p.qqan.com/up/2021-2/16123225767181974.jpg",
    title: "183***138对这件商品感兴趣"
  },
  {
    icon: "https://tse3-mm.cn.bing.net/th/id/OIP-C.aQRoVI_BQCO4ua8drGqu-gHaFj?w=257&h=193&c=7&r=0&o=5&dpr=2&pid=1.7",
    title: "193***788对这件商品感兴趣"
  }
]

// 2.动态切换数据

// 2.1 获取元素
var tipbarEl = document.querySelector(".tip-bar")
var imgEl = tipbarEl.querySelector("img")
var spanEl = tipbarEl.querySelector("span")

// 2.2 记住当前索引变量
var currentIndex = Math.floor(Math.random() * tipList.length)

// 2.2 每隔3s刷新一次数据
setInterval(function () {

  // 2.2.1 如果当前索引 等于 数组长度,默认当前索引为0
  if (currentIndex === tipList.length) {
    currentIndex = 0
  }

  // 2.2.2 更新数据
  imgEl.src = tipList[currentIndex].icon
  spanEl.textContent = tipList[currentIndex].title

  // 2.2.3 当前索引自增
  currentIndex++
}, 3000)

// 1.从服务器拿到数据 ajax/fetch请求
var tipList = [
  {
    icon: "https://tse4-mm.cn.bing.net/th/id/OIP-C.0KvO81VQ-QeWbGVRhT8E8wHaHa?w=209&h=209&c=7&r=0&o=5&dpr=2&pid=1.7",
    title: "167***348对这件商品感兴趣"
  },
  {
    icon: "https://p.qqan.com/up/2021-2/16123225767181974.jpg",
    title: "183***138对这件商品感兴趣"
  },
  {
    icon: "https://tse3-mm.cn.bing.net/th/id/OIP-C.aQRoVI_BQCO4ua8drGqu-gHaFj?w=257&h=193&c=7&r=0&o=5&dpr=2&pid=1.7",
    title: "193***788对这件商品感兴趣"
  }
]

// 2.动态切换数据

// 2.1 获取元素
var tipbarEl = document.querySelector(".tip-bar")
var imgEl = tipbarEl.querySelector("img")
var spanEl = tipbarEl.querySelector("span")

// 2.2 每隔3s刷新一次数据
setInterval(function () {
  // 2.2.1 记住当前随机生成的索引
  var currentIndex = Math.floor(Math.random() * tipList.length)

  // 2.2.2 如果当前索引 等于 数组长度,默认当前索引为0
  if (currentIndex === tipList.length) {
    currentIndex = 0
  }

  // 2.2.3 更新数据
  imgEl.src = tipList[currentIndex].icon
  spanEl.textContent = tipList[currentIndex].title

  // 2.2.4 当前索引自增
  currentIndex++
}, 3000)

// 1.获取元素
var topbarEl = document.querySelector(".top-bar")
var closeEl = topbarEl.querySelector(".close")

// 2.监听closeEl元素的点击事件
closeEl.onclick = function () {
  // 删除元素
  topbarEl.remove() 
}

// 1.获取元素
var topbarEl = document.querySelector(".top-bar")
var closeEl = topbarEl.querySelector(".close")

// 2.监听closeEl元素的点击事件
closeEl.onclick = function () {

  // 2.1 有动画效果,需要设置高度为0
  topbarEl.style.height = 0

  // 2.2 定时器移除,但是定时器的时间必须跟动画保持一致
  setTimeout(function () {
    topbarEl.remove()
  }, 300)      
}

// 1.获取元素
var topbarEl = document.querySelector(".top-bar")
var closeEl = topbarEl.querySelector(".close")

// 2.监听closeEl元素的点击事件
closeEl.onclick = function () {

  // 1.有动画效果,需要设置高度为0
  topbarEl.style.height = 0
}

// ✈️: 2.利用动画结束事件 transitionend事件的事件处理函数，在某个CSS过渡完成时触发。
topbarEl.ontransitionend = function() {
  // 删除元素
  this.remove()
}

// 1.获取元素
var toolbarEl = document.querySelector(".tool-bar")
var iconEls = document.querySelectorAll(".icon")

// 2.循环遍历元素,给每个 icon 设置 background-position
for (var i = 0; i < iconEls.length; i++) {
  iconEls[i].style.backgroundPosition = `-48px ${-50 * i}px`
}

// 1.获取元素
var toolbarEl = document.querySelector(".tool-bar")

// 2.监听toolbarEl的鼠标经过事件
toolbarEl.onmouseover = function (event) {
  handleMouseEvent(event, "#cd1926", "62px")
}

// 3.监听toolbarEl的鼠标离开事件
toolbarEl.onmouseout = function (event) {
  handleMouseEvent(event, "#7a6e6e")
}

// 4.封装工具类函数 ---- 实现鼠标在元素上经过和离开
function handleMouseEvent(event, backgroundColor, width) {
  // event.target 事件发生的对象 <-> 鼠标移动哪个元素上
  // event.currentTarget 当前处理的对象 <-> 绑定的点击事件

  if (event.target !== this) {
    /* // 获取唯一的item
    var itemEl = null
    if (event.target.classList.contains("item")) {
      itemEl = event.target
    } else {
      itemEl = event.target.parentElement
    } */

    // 获取itemEl元素(// 等价于👆🏻 如果当前元素有item这个类,就直接返回当前元素,如果没有,就返回当前元素的父元素)
    var itemEl = event.target.classList.contains("item") ? event.target : event.target.parentElement

    // 获取iconEl元素
    var iconEl = itemEl.children[0]

    // 获取nameEl元素
    var nameEl = itemEl.children[1]

    // 设置iconEl的背景颜色
    iconEl.style.backgroundColor = backgroundColor

    // 设置nameEl的背景颜色
    nameEl.style.backgroundColor = backgroundColor

    // 设置nameEl的宽度(将值设置为空字符串,那么会使用CSS的默认样式),如果不传入参数,使用默认值 输入
    nameEl.style.width = width || ""
  }
}

// 1.获取元素
var itemEls = document.querySelectorAll(".item")


// 2.循环遍历元素
for (var itemEl of itemEls) {
  // 2.1 监听itemEl元素的鼠标经过事件
  itemEl.onmouseenter = function (event) {
    handleMouseEvent(event, "#cd1926", "62px")
  }

  // 2.2 监听itemEl元素的鼠标离开事件
  itemEl.onmouseleave = function (event) {
    handleMouseEvent(event, "#7a6e6e")
  }

  // 2.3 封装工具类函数 --- 实现在元素的鼠标经过/离开
  function handleMouseEvent(event, backgroundColor, width) {
    // 获取iconEl,nameEl元素
    var iconEl = this.children[0]
    var nameEl = this.children[1]

    // 设置iconEl,nameEl的背景颜色
    iconEl.style.backgroundColor = backgroundColor
    nameEl.style.backgroundColor = backgroundColor

    // 设置nameEl的宽度(将值设置为空字符串,那么会使用CSS的默认样式)
    nameEl.style.width = width || ""
  }
}

// 1.获取元素
var tabControlEl = document.querySelector(".tab_control")
var activeEl = tabControlEl.querySelector(".active")

// 2.监听tabControlEl元素在鼠标上经过的事件(事件委托)
tabControlEl.onmouseover = function (event) {
  // 2.1 确定发生鼠标经过的元素
  var itemEl = event.target
  if (!itemEl.classList.contains("item")) return

  // 2.2 移除之前的active
  activeEl.classList.remove("active")

  // 2.3 将active添加到鼠标经过的元素
itemEl.classList.add("active")

  // 2.4 让activeEl指向最新的元素
  activeEl = itemEl
}