原生js练手小项目-鼠标跟随调色板

最新推荐文章于 2023-02-06 09:32:34 发布

Akimoto Hiroshi

最新推荐文章于 2023-02-06 09:32:34 发布

阅读量167

点赞数

分类专栏： javascript css 文章标签： css html js javascript css3

本文链接：https://blog.csdn.net/dyw3390199/article/details/105210368

版权

javascript 同时被 2 个专栏收录

83 篇文章 3 订阅

订阅专栏

css

20 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="mystyle.css">
    <title>Color Board2</title>
</head>
<body>
    <div id="container">
    </div>
    <script src="myscript.js"></script>
</body>
</html>

*{
    box-sizing: border-box;
}
/* 用flex方便居中 */
body{
    margin: 0;
    background: #111;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
}
/* 设置容器最大宽度400px,内部所有item居中显示 */
#container{
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 400px;
    flex-wrap: wrap;
}
/* 设置小方块的背景，大小，设置动画时长和ease效果 */
.square{
    background: rgb(39, 37, 37);
    width: 16px;
    height: 16px;
    margin: 2px;
    box-shadow: 0 0 2px black;
    transition: 2s ease;
}
/* 设置小方块悬停伪类的变换时间是立马变换 */
.square:hover{
    transition-duration: 0s;
}

// 获取节点
const container = document.getElementById("container");

//颜色列表
const colors = ['#363062','#ef962d','#fde2e2','#00bdaa','#00a8cc','#d8ebb5','#fbcffc','#f8615a','#a6b1e1','#f6eec7'];
//小方块个数
const squareNum = 400;

//生成小方块方法
function squareGenerator(){
    for(let i=0;i<squareNum;i++){
        const square = document.createElement('div');
        square.classList.add('square');
        //对每一个square绑定监听事件
        //mouseover事件
        square.addEventListener('mouseover',() => {
            const color = getRandomColor();
            square.style.background = color;
            square.style.boxShadow = `0 0 2px ${color} 0 0 10px ${color}`;
        })
        //mouseout事件
        square.addEventListener('mouseout',() => {
            square.style.background = 'rgb(39, 37, 37)';
            square.style.boxShadow = `0 0 2px black`;
        })

        container.append(square);
    }
}
//获取随机颜色的方法
function getRandomColor(){
    return colors[Math.floor(Math.random()*colors.length)];
}

squareGenerator()

在这里插入图片描述

Akimoto Hiroshi

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
原生js练手小项目-鼠标跟随调色板

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet...
复制链接

扫一扫

专栏目录