30天JS挑战（第三天）

第三天挑战(滑动修改)

地址：https://javascript30.com/

所有内容均上传至gitee，答案不唯一，仅代表本人思路

中文详解：https://github.com/soyaine/JavaScript30

该详解是Soyaine及其团队整理编撰的，是对源代码的详解，强烈推荐大家观看学习!!!

本人gitee：https://gitee.com/thats-all-right-ha-ha/30-days—js-challenge

效果

• 样式分析

  • 组件整体居中，分为标题、操作栏、内容栏三个部分
  • 操作栏由滑动组件和颜色组件组成

• 逻辑分析

  • 通过滑动组件控制图片的模糊效果和边框效果

  • 通过颜色组件控制图片边框颜色和上方JS文字颜色

本人代码及思路分析

仅提供布局及逻辑代码

结构：

<div class="main">
  <div class="title">
    <h1>Update CSS Variables with <span id="change">JS</span></h1>
  </div>
  <div class="setting">
    <div>
      <span>Spacing</span>
      <input id='spacing' type="range" max="30" min="0" value>
    </div>
    <div>
      <span>Blur</span>
      <input id='blur' type="range" max="10" min="0" value>
    </div>
    <div>
      <span>Base Color</span>
      <input id='color' type="color">
    </div>
  </div>
  <div class="img">
    <img src="img.jpg" alt="">
  </div>
</div>

逻辑：

const input = document.querySelectorAll('input')
const img = document.querySelector('img')
const span = document.querySelector('#change')
const obj = {
  blur(e){
    img.style.filter = `blur(${e.target.value}px)`
  },
  spacing(e){
    img.style.borderWidth = `${e.target.value}px`
  },
  color(e){
    img.style.borderColor = e.target.value
    span.style.color = e.target.value
  }
}
input.forEach((item) => {
  item.addEventListener('input',(e) => {
    obj[e.target.id](e)
  })
})

分析：

• 整体思路：首先要实时获取滑动组件和颜色组件的值，并且要获取到图片元素和文字元素，根据组件的值去修改相应的样式

• 具体实现：

  • 首先通过querySelectorAll和querySelector选定需要监听和修改的元素
  • 创建执行对象，根据id创建对应的方法以供执行
  • 为所有的input元素注册input事件（input事件可以响应的获取到值的变化）
  • 通过e.target.id获取当前被操控对象的ID，根据ID执行对象中匹配的操作

• 弊端分析(与官方方法对比)：

  • 额外抓取了img 和 span 元素，浪费性能

• 函数式写法

  上述逻辑使用对象的方法写的，接下来提供函数式的写法

  function active(e){
    if(e.target.id === 'blur'){
      img.style.filter = `blur(${e.target.value}px)`
    }
    if(e.target.id === 'spacing'){
      img.style.borderWidth = `${e.target.value}px`
    }
    if(e.target.id === 'color') {
      img.style.borderColor = e.target.value
      span.style.color = e.target.value
    }
  }
  

官方代码

官方代码仅代表该案例原作者思路，不唯一

结构

<h2>Update CSS Variables with <span class='hl'>JS</span></h2>
<div class="controls">
  <label for="spacing">Spacing:</label>
  <input id="spacing" type="range" name="spacing" min="10" max="200" value="10" data-sizing="px">

  <label for="blur">Blur:</label>
  <input id="blur" type="range" name="blur" min="0" max="25" value="10" data-sizing="px">

  <label for="base">Base Color</label>
  <input id="base" type="color" name="base" value="#ffc600">
</div>
<img src="https://source.unsplash.com/7bwQXzbF6KE/800x500">

逻辑

:root {
--base: #ffc600;
--spacing: 10px;
--blur: 10px;
}

img {
padding: var(--spacing);
background: var(--base);
filter: blur(var(--blur));
}

.hl {
color: var(--base);
}

const inputs = document.querySelectorAll('.controls input');
function handleUpdate() {
  const suffix = this.dataset.sizing || '';
  document.documentElement.style.setProperty(`--${this.name}`, this.value + suffix);
}
inputs.forEach(input => input.addEventListener('change', handleUpdate));
inputs.forEach(input => input.addEventListener('mousemove', handleUpdate));

分析

仅代表本人对该代码的分析

建议直接去看Soyaine的中文详解 建议直接去看Soyaine的中文详解 建议直接去看Soyaine的中文详解

• **整体思路：**通过修改全局css变量进而修改元素的效果

• 具体实现：

  • 创建全局css变量，并将变量应用到对应的元素上
  • 通过dataset获取自定义属性data-sizing=“px”，为需要添加px单位的元素添加单位
  • 通过document.documentElement.style.setProperty 获取根元素并修改变量
  • 获取元素，监听鼠标移动和数值改变事件

• 优点：

  • 通过修改全局css变量的方法修改样式，极大地节省了性能的开销

​