JavaScript实现简单生成随机颜色的方法


Posted in Javascript onSeptember 21, 2017

本文实例讲述了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>
Javascript 相关文章推荐
JS 实现双色表格实现代码
Nov 24 Javascript
jcrop基本参数一览
Jul 16 Javascript
YUI模块开发原理详解
Nov 18 Javascript
JS实现的最简Table选项卡效果
Oct 14 Javascript
JavaScript对HTML DOM使用EventListener进行操作
Oct 21 Javascript
jQuery表格的维护和删除操作
Feb 03 Javascript
H5图片压缩与上传实例
Apr 21 Javascript
详解jQuery中的easyui
Sep 02 jQuery
vue-cli脚手架引入弹出层layer插件的几种方法
Jun 24 Javascript
Vue配置marked链接添加target=&quot;_blank&quot;的方法
Jul 19 Javascript
layer.open的自适应及居中及子页面标题的修改方法
Sep 05 Javascript
vue使用keep-alive实现组件切换时保存原组件数据方法
Oct 30 Javascript
JavaScript实现单击网页任意位置打开新窗口与关闭窗口的方法
Sep 21 #Javascript
shiro授权的实现原理
Sep 21 #Javascript
AngularJS 的$timeout服务示例代码
Sep 21 #Javascript
JS路由跳转的简单实现代码
Sep 21 #Javascript
JS实现的简单标签点击切换功能示例
Sep 21 #Javascript
使用JavaScript实现一个小程序之99乘法表
Sep 21 #Javascript
React-Native左右联动List的示例代码
Sep 21 #Javascript
You might like
上传多个文件的PHP脚本
2006/11/26 PHP
php实现随机显示图片方法汇总
2015/05/21 PHP
Yii使用技巧大汇总
2015/12/29 PHP
PHPExcel简单读取excel文件示例
2016/05/26 PHP
js下用gb2312编码解码实现方法
2009/12/31 Javascript
一行代码告别document.getElementById
2012/06/01 Javascript
JavaScript输入邮箱自动提示实例代码
2014/01/13 Javascript
两个多选select(multiple左右)添加、删除选项和取值实例
2014/05/12 Javascript
JavaScript实现为input与textarea自定义hover,focus效果的方法
2015/08/21 Javascript
jQuery Ajax 全局调用封装实例代码详解
2016/06/02 Javascript
Bootstrap modal使用及点击外部不消失的解决方法
2016/12/13 Javascript
快速解决vue动态绑定多个class的官方实例语法无效的问题
2018/09/05 Javascript
微信小程序中button去除默认的边框实例代码
2019/08/01 Javascript
Layer组件多个iframe弹出层打开与关闭及参数传递的方法
2019/09/25 Javascript
[08:53]DOTA2-DPC中国联赛 正赛 PSG.LGD vs LBZS 选手采访
2021/03/11 DOTA
Python urllib模块urlopen()与urlretrieve()详解
2013/11/01 Python
Python 爬虫爬取指定博客的所有文章
2016/02/17 Python
python采集微信公众号文章
2018/12/20 Python
pytorch AvgPool2d函数使用详解
2020/01/03 Python
python matplotlib画盒图、子图解决坐标轴标签重叠的问题
2020/01/19 Python
使用Django搭建网站实现商品分页功能
2020/05/22 Python
基于K.image_data_format() == 'channels_first' 的理解
2020/06/29 Python
Crocs美国官方网站:卡骆驰洞洞鞋
2017/08/04 全球购物
英国电气世界:Electrical World
2019/09/08 全球购物
世界上最大的乐谱选择:Sheet Music Plus
2020/01/18 全球购物
ASICS印度官方网站:日本专业运动品牌
2020/06/20 全球购物
如何反序的迭代一个序列?how do I iterate over a sequence in reverse order
2012/02/04 面试题
四种会话跟踪技术
2015/05/20 面试题
中专自我鉴定范文
2013/10/16 职场文书
给导游的表扬信
2014/01/10 职场文书
给公司的建议书范文
2014/05/13 职场文书
公司经营目标责任书
2015/01/29 职场文书
埃及王子观后感
2015/06/16 职场文书
用Python写一个简易版弹球游戏
2021/04/13 Python
Springboot配置suffix指定mvc视图的后缀方法
2021/07/03 Java/Android
vue动态绑定style样式
2022/04/20 Vue.js