随机数 ==

清水兮兮

已于 2022-02-21 08:19:17 修改

阅读量219

点赞数

CC 4.0 BY-SA版权

文章标签： elementui vue.js javascript

于 2021-12-30 11:10:49 首次发布

本文链接：https://blog.csdn.net/jia632133535/article/details/122231958

本文介绍了如何使用JavaScript为网页元素动态设置随机颜色，包括清水组件中的颜色变化和头部遮罩层的随机背景色。通过Math.random()生成随机RGB值，展示了前端开发中颜色变换的基本技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<div v-nclor='colcor' @click="Btn">清水</div>




<script>
export default {
  name: "Home",
  data() {
    return {
      colcor:'red'
    };
  },
  directives:{
    nclor(el,binding,vnode){
      el.style.color  = binding.value
    }
  },
  methods: {
    // 随机数
    Btn(){
      // 随机数 Math.random()          向下取整Math.floor()  向上取整 Math.ceil()
     
      this.colcor = 'rgb('+Math.floor( Math.random()*255)+','+Math.floor( Math.random()*255)+','+Math.floor( Math.random()*255)+')'
      console.log(111);
    },
   
  },
  components: {}
};
</script>

//随机颜色===================

<template >
    <div class='hearder' @click.stop="btn" :style="{background:colorRender}">
        <span></span>
        <span class="size">学习记事本</span>
        <span class="rigth">|||</span>

         <!-- 遮罩层 -->
    </div>
</template>

<script>
export default {
  data() {
    return {
      colorRender: "#f29794"
    };
  },

  mounted() {},
  methods: {
    btn() {
      this.colorRender =
        "rgb(" +
        Math.floor(Math.random() * 255) +
        "," +
        Math.floor(Math.random() * 255) +
        "," +
        Math.floor(Math.random() * 255) +
        ")";
      console.log(this.colorRender);

      this.$emit("btn");
    }
  },
  components: {}
};
</script>