JavaScript实现简单生成随机颜色的方法
时间:2019-04-07
本文章向大家介绍JavaScript实现简单生成随机颜色的方法,主要包括JavaScript实现简单生成随机颜色的方法使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
本文实例讲述了JavaScript实现简单生成随机颜色的方法。分享给大家供大家参考,具体如下:
如果要做出如下效果,每次刷新网页则产生一种颜色
其实非常简单,产生随机颜色的根本核心就是随机构造出一个六位数,JavaScript的随机数的问题
而且这个六位数的每一个数位0~f之内,因此就有了如下的方法:
1、首先是一个HTML布局,p标签是是用来放当前颜色的,div的背景颜色就是这个颜色
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>randomColor</title> </head> <body> <p id="colorStr"></p> <div id="div1" style="width:100px;height:100px"></div> </body> </html>
2、之后是核心的脚本:
<script> //颜色字符串 var colorStr=""; //字符串的每一字符的范围 var randomArr=['0','1','2','3','4','5','6','7','8','9','a','b','c','d','e','f']; //产生一个六位的字符串 for(var i=0;i<6;i++){ //15是范围上限,0是范围下限,两个函数保证产生出来的随机数是整数 colorStr+=randomArr[Math.ceil(Math.random()*(15-0)+0)]; } document.getElementById("colorStr").innerHTML="颜色为:#"+colorStr; document.getElementById("div1").style.backgroundColor="#"+colorStr; </script>
PS:这里再为大家提供几款功能类似的在线工具供大家参考:
在线随机数字/字符串生成工具:
http://tools.jb51.net/aideddesign/suijishu
在线随机字符/随机密码生成工具:
http://tools.jb51.net/aideddesign/rnd_password
在线RGB、HEX颜色代码生成器:
http://tools.jb51.net/color/rgb_color_generator
RGB颜色查询对照表_颜色代码表_颜色的英文名称大全:
http://tools.jb51.net/color/jPicker
更多关于JavaScript相关内容感兴趣的读者可查看本站专题:《JavaScript数学运算用法总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript数组操作技巧总结》、《JavaScript排序算法总结》、《JavaScript遍历算法与技巧总结》、《JavaScript查找算法技巧总结》及《JavaScript错误与调试技巧总结》
希望本文所述对大家JavaScript程序设计有所帮助。
- CentOs7.3 安装 MySQL 5.7.19 二进制版本
- Retrofit2.0通俗易懂的学习姿势,Retrofit2.0 + OkHttp3 + Gson + RxJava
- 3.Linux用户权限管理之三(文件与权限的设定)
- CentOs7.3 搭建 MySQL 5.7.19 主从复制,以及复制实现细节分析
- 1.Linux操作系统安装的5种方法以及心得
- 我(作为一名开发者)所犯过的错误
- Hadoop-2.7.4 集群快速搭建
- Scala-2.13.0 安装及配置
- HBase-1.3.1 集群搭建
- CentOs7.3 Hadoop 用户 ssh 免密登录
- 手把手教你用Mysql-Cluster-7.5搭建数据库集群
- 简单的java开源图床
- 调度器Quartz的简述与使用总结
- 使用 RecyclerView 实现 Gallery 画廊效果,并控制 Item 停留位置
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Centos7 mqtt集群安装
- CentOS7 mysql5.7安装并配置主主同步
- CentOS7 nginx安装并负载mysql
- CentOS7 zabbix安装并实现其它服务器服务监控报警与自动恢复
- CentOS7 Zookeeper安装
- 【STM32F429开发板用户手册】第38章 STM32F429的FMC总线应用之是32路高速IO扩展
- 【STM32F429开发板用户手册】第39章 STM32F429的FMC总线应用之SDRAM
- react项目搭建
- 深入理解Java泛型(三)-泛型擦除及其相关内容
- webpack实战——预处理器(loader)【下篇】
- JAVA位运算等运算符总结
- 算法实现,用机器学习模拟一个opencv的边缘识别算法
- 开源公共组件仓库的更新日志应该如何写
- 判断ABAP代码是否处于update模式下运行的工具类
- SAP CRM WebClient UI异常的持久化机制