javascript es6 的简单调色板应用案例

最新推荐文章于 2024-05-14 09:51:45 发布

ye_zzzz

最新推荐文章于 2024-05-14 09:51:45 发布

阅读量328

点赞数 1

文章标签： es6 html5 javascript css3

本文链接：https://blog.csdn.net/weixin_44333019/article/details/115384426

版权

ES6网页调色板案例

1.主要的效果布局如下

当拖动拖动条到不同的数值，就会在方块上显示不同数值的颜色

第一步：网页布局

    <!-- 网页静态布局 -->
<div class="box">
    <!-- 黑色的小盒子 -->
   <main></main>
    <!-- 三个表单元素范围条 -->
    <p>
        <!--value="0" 初始值为0  -->
        R <input type="range" min="0" max="255" value="0" name="R"> <span>0</span>
    </p>
    <p>
        G <input type="range" min="0" max="255" value="0" name="G"> <span>0</span>
    </p>
    <p>
        B <input type="range" min="0" max="255" value="0" name="B"> <span>0</span>
    </p>
</div>

这里主要用到了h5的新特性，input输入框类型为range，然后可以设置range的具体最大值最小值的范围

第二步：css样式

    <style>
/* 清除默认样式 */
*{
    margin: 0;
    padding: 0;
}
html,body{
    width: 100%;
    height: 100%;
    /* 渐进 渐变颜色 */
    background-image: linear-gradient(to right,rgb(161, 101, 101),pink);
    /* 调用animation */
    /* animation: donghua 2s linear 0s infinite; */

}
.box{
    width: 600px;
    height: 400px;
    margin: 30px auto;
    text-align: center;
}
.box main{
width: 80%;
height: 250px;
background-color: black;
margin: 10px auto;
}
p{
    padding: 10px;
}
/* css3中新增动画 */
@keyframes donghua{
    from{
    filter: hue-rotate(0deg);
    }
    to{
    filter: hue-rotate(360deg);
    }
}

这里的background-image: linear-gradient(to right,rgb(161, 101, 101),pink);也是css3的新特性，设置背景颜色渐变，如果向右渐变则是to right 然后不同的颜色值，如果向左渐变则是to left；

第三步通过DOM方法获取所有的input ，span ，main

    // 通过dom方法获取全部input ，span
    // 获取所有的input  并返回一个类数组
 let input =   document.querySelectorAll("input");
 let span = document.querySelectorAll("span");
//  获取main标签
let main = document.querySelector("main");

第四步：声明一个变量存储json数据格式存储响应三色素

let obj = {
    R:0,
    G:0,
    B:0
}

最后通过循环语句遍历数组，并且批量添加事件

for(let i = 0; i < input.length; i++){
    // 通过循环语句遍历数组,给每一个标签绑定事件
// oninput事件，
    input[i].addEventListener("input",function(){
// 修改相应的span文本
// 范围为0-255
span[i].innerHTML = input[i].value;
// 通过条件语句区分到底是哪个表单元素触发事件，
switch(this.name){
    case "R":
        obj.R = this.value;
        break;
    case "G":
        obj.G = this.value;
        break;
    case "B":
        obj.B = this.value;
        break;
}
// 三色素的数值作为main的背景颜色
// ES6对象的结构
// 模板字符串解释变量
let {R,G,B} = obj;
main.style.background = `rgb(${R},${G},${B})`;
//颜色变动时变换盒子的角度
// main.style.transform = `rotateX(${R}deg) rotateY(${G}deg) rotateZ(${B}deg)`
    })
}

本案例最主要是练习如何运用ES6做具体的案例，有什么不理解的可以互相讨论看看。
完整代码：

<!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;
}
html,body{
    width: 100%;
    height: 100%;
    /* 渐进 渐变颜色 */
    background-image: linear-gradient(to right,rgb(161, 101, 101),pink);
    /* 调用animation */
    /* animation: donghua 2s linear 0s infinite; */

}
.box{
    width: 600px;
    height: 400px;
    margin: 30px auto;
    text-align: center;
}
.box main{
width: 80%;
height: 250px;
background-color: black;
margin: 10px auto;
}
p{
    padding: 10px;
}
/* css3中新增动画 */
@keyframes donghua{
    from{
    filter: hue-rotate(0deg);
    }
    to{
    filter: hue-rotate(360deg);
    }
}
    </style>
</head>
<body>
    <!-- 网页静态布局 -->
<div class="box">
    <!-- 黑色的小盒子 -->
   <main></main>
    <!-- 三个表单元素范围条 -->
    <p>
        <!--value="0" 初始值为0  -->
        R <input type="range" min="0" max="255" value="0" name="R"> <span>0</span>
    </p>
    <p>
        G <input type="range" min="0" max="255" value="0" name="G"> <span>0</span>
    </p>
    <p>
        B <input type="range" min="0" max="255" value="0" name="B"> <span>0</span>
    </p>
</div>
<script>
    // 通过dom方法获取全部input ，span
    // 获取所有的input  并返回一个类数组
 let input =   document.querySelectorAll("input");
 let span = document.querySelectorAll("span");
//  获取main标签
let main = document.querySelector("main");
// 声明一个变量存储json数据格式===>存储响应三色素
let obj = {
    R:0,
    G:0,
    B:0
}
//  通过循环语句遍历数组 ===>批量添加事件
// 遍历数组
for(let i = 0; i < input.length; i++){
    // 通过循环语句遍历数组,给每一个标签绑定事件
// oninput事件，
    input[i].addEventListener("input",function(){
// 修改相应的span文本
// 范围为0-255
span[i].innerHTML = input[i].value;
// 通过条件语句区分到底是哪个表单元素触发事件，
switch(this.name){
    case "R":
        obj.R = this.value;
        break;
    case "G":
        obj.G = this.value;
        break;
    case "B":
        obj.B = this.value;
        break;
}
// 三色素的数值作为main的背景颜色
// ES6对象的结构
// 模板字符串解释变量
let {R,G,B} = obj;
main.style.background = `rgb(${R},${G},${B})`;
// main.style.transform = `rotateX(${R}deg) rotateY(${G}deg) rotateZ(${B}deg)`
    })
}
 console.log(span);
</script>
</body>
</html>