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 相关文章推荐
jquery select下拉框操作的一些说明
Apr 02 Javascript
基于jquery的模态div层弹出效果
Aug 21 Javascript
iframe 父窗口和子窗口相互的调用方法集锦
Dec 15 Javascript
js函数的引用, 关于内存的开销
Sep 17 Javascript
JS链式调用的实现方法
Mar 07 Javascript
jquery加载图片时以淡入方式显示的方法
Jan 14 Javascript
jQuery遍历json中多个map的方法
Feb 12 Javascript
JS动态改变表格边框宽度的方法
Mar 31 Javascript
jQuery实现的模拟弹出窗口功能示例
Nov 24 Javascript
jQuery实现Table表格隔行变色及高亮显示当前选择行效果示例
Feb 14 Javascript
es6学习笔记之Async函数基本教程
May 11 Javascript
Angularjs中date过滤器失效的问题及解决方法
Jul 06 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创建PDF中文文档
2006/10/09 PHP
《PHP边学边教》(04.编写简易的通讯录――视频教程1)
2006/12/13 PHP
PHP中怎样保持SESSION不过期 原理及方案介绍
2013/08/08 PHP
一个显示效果非常不错的PHP错误、异常处理类
2014/03/21 PHP
php合并数组中相同元素的方法
2014/11/13 PHP
PHP 读取文本文件内容并分页显示
2016/01/02 PHP
Thinkphp5 微信公众号token验证不成功的原因及解决方法
2017/11/12 PHP
jQuery+PHP实现图片上传并提交功能
2020/07/27 PHP
BOOM vs RR BO5 第四场 2.14
2021/03/10 DOTA
Open and Print a Word Document
2007/06/15 Javascript
使用jQuery的将桌面应用程序引入浏览器
2010/11/19 Javascript
js 字符串转化成数字的代码
2011/06/29 Javascript
文字不间断滚动(上下左右)实例代码
2013/04/21 Javascript
node.js实现逐行读取文件内容的代码
2014/06/27 Javascript
js实现使用鼠标拖拽切换图片的方法
2015/05/04 Javascript
jquery中val()方法是从最后一个选项往前读取的
2015/09/06 Javascript
js实现二级菜单渐隐显示
2015/11/03 Javascript
JavaScript如何获取数组最大值和最小值
2015/11/18 Javascript
JS实现关闭当前页而不弹出提示框的方法
2016/06/22 Javascript
JavaScript九九乘法口诀表的简单实现
2016/10/04 Javascript
JavaScript数组去重的6个方法
2017/01/21 Javascript
jQuery实现的弹幕效果完整实例
2017/09/06 jQuery
JavaScript 数组的进化与性能分析
2017/09/18 Javascript
vue 项目中使用Loading组件的示例代码
2018/08/31 Javascript
Vue中的基础过渡动画及实现原理解析
2018/12/04 Javascript
vue 实现input表单元素的disabled示例
2019/10/28 Javascript
nodejs使用Sequelize框架操作数据库的实现
2020/10/21 NodeJs
[02:58]魔廷新尊——痛苦女王至宝语音台词节选
2020/06/14 DOTA
pymongo实现控制mongodb中数字字段做加法的方法
2015/03/26 Python
python+PyQT实现系统桌面时钟
2020/06/16 Python
使用pyecharts生成Echarts网页的实例
2019/08/12 Python
Python如何使用bokeh包和geojson数据绘制地图
2020/03/21 Python
基于python实现地址和经纬度转换
2020/05/19 Python
什么是Deployment descriptors;都有什么类型的部署描述符
2015/07/28 面试题
pytorch 中autograd.grad()函数的用法说明
2021/05/12 Python
CSS实现切角+边框+投影+内容背景色渐变效果
2021/11/01 HTML / CSS