js+css随机生成十六进制颜色

js+css随机生成十六进制颜色

一、效果图

二、实现

1.实现代码

代码如下（示例）：

<template>
    <div>
        <div class="year_area">
            <div class="year_list">
                <el-row :span="24">
                    <div v-loading="awardYearLoading">
                        <el-col :span="5" v-for="(item, index) in defaultAwardYearList" :key="index"
                            class="year_list_content" :style="{ borderLeft: item.color }">
                            <div @click="handleClick(item)" class="year-model">
                                <div class="year_text">
                                    <div class="year_text_font">{{ item.year }}
                                    </div>
                                </div>
                            </div>
                        </el-col>
                        <div class="search_fload" @click="handFload">
                            <i :class="showAll ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"></i>
                            <span class="fload_is_show"> {{ showAll ? "收起" : "展开更多" }}
                            </span>
                        </div>
                    </div>
                </el-row>
            </div>
        </div>
    </div>
</template>

<script>
import { getAllYear } from "@/api/year.js";
export default {
    data() {
        return {
            defaultAwardYearList: [], //默认展示项
            AwardYearList: [],  //所有展示项     
            showAll: false,  //展开或收起
            awardYearLoading: false,
        }
    },
    mounted() {
        this.initData();
    },
    methods: {
        /**
        * 初始化列表数据
        */
        initData() {
            // 获取年份列表：默认仅展示15个
            this.awardYearLoading = true
            getAllYear().then((res) => {
                this.showAll = false;
                res.data.forEach((e) => {
                    this.AwardYearList.push({
                        year: e.split("-")[0],
                        color: this.randomHexColor(),
                    });
                });
                this.defaultAwardYearList = this.AwardYearList.slice(0, 15)
                this.awardYearLoading = false
            });
        },


        /**
         * 展开或合并
         */
        handFload() {
            this.showAll = !this.showAll;
            if (this.showAll) {
                this.defaultAwardYearList = this.AwardYearList;
            } else {
                this.defaultAwardYearList = this.AwardYearList.slice(0, 15);
            }
        },


        /**
         * 左侧边框：随机生成十六进制颜色
         */
        randomHexColor() {
            return (
                "8px solid #" +
                ("00000" + ((Math.random() * 0x1000000) << 0).toString(16)).substr(-6)
            );
        },
    }
}
</script>

<style lang="less" scoped>
.year_area {
    min-height: calc(100vh - 72px - 300px);
    margin-top: 70px;
    background-color: #f3f5f9;
    padding-bottom: 17px;
    
    .year_list {
        display: flex;
        width: 1024px;
        padding: 12px;
        flex-direction: column;
        // gap: 12px;
        border-radius: 5px;
        background: #fff;
        margin-top: 12px;

        .year_list_content {
            // padding: 16px 24px;
            border-radius: 5px;
            // border-left: 8px solid #6490ff;
            border-bottom: 1px solid #eee;
            border-top: 1px solid #eee;
            border-right: 1px solid #eee;
            background: #fff;
            margin: 10px 20px;
            height: 56px;
            box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);

            .year-model {
                width: 100%;
                height: 100%;
                display: flex;
                justify-content: center;

                .year_text {
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    gap: 8px;
                    align-self: stretch;

                    cursor: pointer;

                    .year_text_font {
                        color: #333;
                        font-family: "Source Han Sans CN";
                        font-size: 18px;
                        font-style: normal;
                        font-weight: 500;
                        line-height: 24px;
                        /* 133.333% */
                    }
                }
            }
        }
    }
    
    .search_fload {
        text-align: center;
        cursor: pointer;

        .fload_is_show {
            display: inline-block;
            margin-top: 25px;
            margin-left: 10px;
        }
    }
}
</style>

2.数据结构

代码如下（示例）：

[
    "2021",
    "2020",
    "2019",
    "2018",
    "2017",
    "2016",
    "2015",
    "2014",
    "2013",
    "2012",
    "2011",
    "2010",
    "2009",
    "2008",
    "2007",
    "2006",
    "2005",
    "2004",
    "2003",
    "2002",
    "2001"
]

---

总结

本文主要运用了js返回随机颜色的方法。
返回随机颜色：
return '#'+('00000'+(Math.random()*0x1000000<<0).toString(16)).slice(-6);