原生JS代码实现随机产生一个16进制的颜色值使用帮助_颜色小白指南

封装一个函数function getColor() {var str = “#”;//一个十六进制的值的数组var arr = [“0”, “1”, “2”, “3”, “4”, “5”, “6”, “7”, “8”, “9”, “a”, “b”, “c”, “d”, “e”, “f”];for (var i = 0; i < 6; i++) {//产生的每

原生JS代码实现随机产生一个16进制的颜色值使用帮助

封装一个函数

原生JS代码实现随机产生一个16进制的颜色值使用帮助_颜色小白指南

function getColor() {
      var str = "#";
      //一个十六进制的值的数组
      var arr = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "a", "b", "c", "d", "e", "f"];
      for (var i = 0; i < 6; i++) {
        //产生的每个随机数都是一个索引,根据索引找到数组中对应的值,拼接到一起
        var num = parseInt(Math.random() * 16);
        str += arr[num];
      }
      return str;
}

调用函数getColor()就能随机获取一个16进制的颜色值

海计划公众号
(0)
上一篇 2020/03/24 05:44
下一篇 2020/03/24 05:44

您可能感兴趣的内容

  • reselect是怎样提升react组件渲染性能的?小白教程_渲染小白帮助

    reselect是什么?reselect是配合redux使用的一款轻量型的状态选择库,目的在于当store中的state重新改变之后,使得局部未改变的状态不会因为整体的state变化而全部重新渲染,功能有点类似于组件中的生命周期函数shouldComponentDidUpdate,但是它们并不是一个东西。下面是官方的一些简介:Selectors can co

    2020/03/22
  • CSS如何实现背景透明教程视频css设置背景色透明度_透明小白攻略

    实现透明的css方法通常有以下3种方式,以下是不透明度都为80%的写法:css3的opacity:x,x 的取值从 0 到 1,如opacity: 0.8css3的rgba(red, green, blue, alpha),alpha的取值从 0 到 1,如rgba(255,255,255,0.8)IE专属滤镜 filter:Alpha(opacity=x)

    2020/04/05
  • 为什么使用Vuex入门基础_vuex小白帮助

    在学习Vuex之前,先了解一下“单向数据流”这个状态自管理应用包含以下几个部分:state,驱动应用的数据源; view,以声明方式将 state 映射到视图; actions,响应在 view 上的用户输入导致的状态变化。(比如请求数据或者修改数据会导致数据源状态改变) 但是遇到多个组件共享状态时,单向数据流的简洁性很容易被破坏,而且特别不方便。如果坚持

    2020/04/06
  • node适合用于什么项目?小白基础_项目指南教程

    Node是一个基于Chrome JavaScript运行时建立的平台, 可以方便地搭建响应速度快、易于扩展的网络应用。Node 使用事件驱动, 非阻塞I/O 模型而得以轻量和高效,非常适合在分布式设备上运行数据密集型的实时应用。首先,node新开一个http连接的开销,相当于一个大函数调用,相比php的新开线程动辄花费2MB内存和上下文切换的漫长时间,已经很

    2020/03/22
  • js实现图片转base64格式,并压缩上传零基础入门_图片入门基础

    需求: 需要用户上传身份证,并识别身份证的编号存储在后端,这里要求实现图片上传,并转为base64的格式,传给服务器识别图片的身份证号码。由于很多用户用手机拍摄的照片,出现尺寸比较大的情况,因此需要进行压缩处理,比如:图片宽或者高大于1000px,就进行等比例压缩后再进行上传。 思路: 1) 调用 FileReader的 reader.readAsDataU

    2020/03/26
  • bash快捷键整理菜鸟指南_快捷键入门教程

    今天敲命令行时想在单词间移动,竟然不记得快速移动的快捷键。试了Ctrl + W和Ctrl + B/F均不凑效,于是怀念之前某博主分享的终端快捷键说明图。好在很快好在很快从浏览记录中找到了链接。原博主(@linuxtoy)分享的终端跳转解说图为:虽然命令难记,但解说图清晰易懂,让人印象深刻。趁热打铁,马上找了篇解说bash快捷键的文章温习一下。博主Alan S

    2020/03/31
  • CSS3的all属性菜鸟教程_属性使用攻略

    一、兼容性如下图:兼容性还行, 除了IE不支持,其他浏览器基本上都绿油油,目前自娱自乐,内网项目什么的都是可以用用的。二、all是干嘛用的all属性实际上是所有CSS属性的缩写,表示,所有的CSS属性都怎样怎样,但是,不包括unicode-bidi和direction这两个CSS属性。为什么会有这个CSS属性呢?我们可能知道,有些CSS属性值基本上所有CSS

    2020/03/23
  • 程序员的幽默基础知识入门_幽默入门百科

    某程序员结婚第一年有了一个女儿, 他想了一下,起名叫玲玲(00), 后来第二个女儿,起名叫玲依(01), 第三个女儿,起名叫依玲(10), 第四个女儿,起名叫依依(11)。 然后…..他有了个儿子,起名的时候难住他了。 于是他想了很久,最后决定叫逸初。一个电脑工程师,一个系统分析师,一个程序员,他们开车下山,突然刹车失灵。只听着他们尖叫着冲下山,速度越来

    2020/03/24
  • img.top入门知识_智能在线图片压缩

    img.top入门知识 官方网址:https://img.top/ 简介描述:智能在线图片压缩 为图像体积瘦身,让你的图片加载飞快!  极致的压缩效果 使用聪明的有损压缩…

    2020/03/10
  • marko使用指南_一个快速、友好的 UI 库

    marko使用指南 官方网址:https://markojs.com/ GitHub:https://github.com/marko-js/marko 简介描述:一个快速、友好的…

    2020/03/06
  • Vue2Editor小白指南_基于 Quill 的 Vue.js 2.0 富文本编辑器组件

    Vue2Editor小白指南 官方网址:https://www.vue2editor.com/ GitHub:https://github.com/davidroyer/vue2-…

    2020/03/06
  • Js中的命名空间(namespace) 小白基础_js知识零基础入门

    全局变量应该由有系统范围相关性的对象们保留,并且它们的命名应该避免含糊并尽量减少命名冲突的风险。在实践中,这意味着你应该避免创建全局对象,除非它们是绝对必须的。不过,恩,这些你早都知道了……所以你对此是怎么做的?传统方法告诉我们,最好的消除全局策略是创建少数作为潜在模块和子系统的实际命名空间的全局对象。我将探索几种有关命名空间的方式,并以我基于 James

    2020/04/03
  • ES6 Promise实战练习题目基础入门_Promise小白知识

    俗话说得好,一动不动是王八,上一篇文章学习了那么久Promise,是时候大显身手了!基础题题一const promise = new Promise((resolve, reject) => {console.log(1)resolve()console.log(2)
    })
    promise.then(() => {console.log(3)
    })
    cons

    2020/03/23
  • JavaScript中的执行上下文和堆栈是什么?小白教程_堆栈使用帮助

    在这篇文章中,我将深入研究JavaScript最基本的部分之一,即执行上下文。在这篇文章的最后,您应该更清楚地了解解释器要做什么,为什么在声明一些函数/变量之前可以使用它们,以及它们的值是如何确定的。什么是执行上下文?当代码在JavaScript中运行时,执行它的环境是非常重要的,并被评估为以下之一:1:全局代码——第一次执行代码的默认环境。2:函数代码——

    2020/03/30
  • Drop.js基础知识入门一款JavaScript和CSS实用下拉弹出层插件

    Drop.js基础入门 官方网址:http://github.hubspot.com/drop/ GitHub:https://github.com/HubSpot/drop/ 简…

    2020/03/05
  • 理解css中Grid布局,在项目中如何实现grid页面布局入门攻略_布局基础知识教程

    简介CSS中Grid是一种二维网格式布局方式。我们常规使用table、float、position、inline-block等布局,但它们遗漏了很多功能,例如垂直居中。后来css3中flexbox的出现解决了很多布局问题,但是它也是一维布局,而不是复杂的二维布局,Grid是为了解决二维布局问题而创建的CSS模块。使用Gird的好处1.布局清晰明了,摆脱了模板

    2020/04/06