【javascript30】Day3------CSS Variables_综合

今天的效果图如下：

在这里插入图片描述

在这个效果中，我们通过手动移动调节按钮来调整图片的边框宽度、模糊度以及边框颜色，话不多说，直接开始吧~

首先，我们仍然将该效果分为CSS和JS两个部分，分别实现如下的静态页面和动态调节。

在这里插入图片描述

CSS部分

我们首先来分析一下总体的布局：

最上面的文字可以用h2来做
中间的调节部分可以在一个div盒子放置三个input，前两个类型为range，第三个类型为color
下面的图片放在一个div盒子中，设置其初始的边框等状态，然后调整其大小合适即可

JS部分

我们首先来分析我们需要实现的功能是什么：

移动按钮调节Spacing、Blur和color时，下方图片对应的边框宽度、模糊度和边框颜色会发生变化

接着我们来看实现：

对于前两个调节宽度和模糊度的input来说，我们只需要监听onmousemove，通过value来获取鼠标移动按钮改动的值，然后修改对应图片的borderWidth或者filter就可以了。
对于修改边框颜色的input来说，我们需要监听的是onchange，当input的值发生变化时，我们通过value获取修改后的颜色值，然后修改对应图片的边框颜色为该value值即可。

其实这个效果实现起来很简单，代码如下咯：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>*{
    margin:0;padding: 0;}body{
    background-color: rgb(25, 53, 73);display: flex;justify-content: center;align-items: center;flex-direction: column;}#top{
    font-size:75px;color:white;margin:64px auto;}#mid{
    font-size: 50px;color:white;font-weight: 300;}img{
    margin:45px auto;width: 800px;height: 500px;border: 10px solid white;filter: blur(18px);}input{
    width: 100px;}</style>
</head>
<body><h2 id="top">Update CSS Variables with JS</h2><div id="mid"><label for="Spacing">Spacing:</label><input type="range" name="Spacing" id="Spacing" min="10" max="200" value="10"><label for="Blur">Blur:</label><input type="range" name="Blur" id="Blur" min="0" max="36" value="18"><label for="Base">Base Color</label><input type="color" name="Base" id="Base" value="#fcfcfc"></div><div id="img"><img src="../img/night.jpg" alt="" id="i"></div><script>let s=document.getElementById("Spacing");let b=document.getElementById("Blur");let c=document.getElementById("Base");let img=document.getElementById("i");s.onmousemove=function(){
    console.log(s.value)img.style.borderWidth=s.value+"px";}b.onmousemove=function(){
    img.style.filter=`blur(${
      b.value}px)`;}c.onchange=function(){
    img.style.borderColor=`${
      c.value}`;}</script>
</body>
</html>