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 相关文章推荐
尽可能写&quot;友好&quot;的&quot;Javascript&quot;代码
Jan 09 Javascript
IE 条件注释详解总结(附实例代码)
Aug 29 Javascript
jQuery中width()方法用法实例
Dec 24 Javascript
JS实现模拟风力的雪花飘落效果
May 13 Javascript
JQuery中属性过滤选择器用法实例分析
May 18 Javascript
javascript实现全角半角检测的方法
Jul 23 Javascript
jQuery树形下拉菜单特效代码分享
Aug 15 Javascript
jquery 无限极下拉菜单的简单实例(精简浓缩版)
May 31 Javascript
JQuery和html+css实现带小圆点和左右按钮的轮播图实例
Jul 22 jQuery
ES6学习教程之模板字符串详解
Oct 09 Javascript
微信小程序云开发之数据库操作
May 18 Javascript
JavaScript实现随机点名小程序
Oct 29 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 define()函数以及defined()函数的用法详解
2013/06/05 PHP
php比较两个绝对时间的大小
2014/01/31 PHP
PHP字符串word末字符实现大小写互换的方法
2014/11/10 PHP
PHP安全上传图片的方法
2015/03/21 PHP
php cookie工作原理与实例详解
2016/07/18 PHP
PHP双向链表定义与用法示例
2018/01/31 PHP
jquery实现智能感知连接外网搜索
2013/05/21 Javascript
动态加载JS文件的三种方法
2013/11/08 Javascript
JS+CSS实现带有碰撞缓冲效果的竖向导航条代码
2015/09/15 Javascript
javascript实现省市区三级联动下拉框菜单
2015/11/17 Javascript
AngularJS 最常用的功能汇总
2016/02/17 Javascript
Function.prototype.apply()与Function.prototype.call()小结
2016/04/27 Javascript
jQuery AJAX timeout 超时问题详解
2016/06/21 Javascript
利用jQuery实现打字机字幕效果实例代码
2016/09/02 Javascript
详解vue 模版组件的三种用法
2017/07/21 Javascript
浅谈Koa服务限流方法实践
2017/10/23 Javascript
node.js命令行教程图文详解
2019/05/27 Javascript
JavaScript单线程和任务队列原理解析
2020/02/04 Javascript
简单文件操作python 修改文件指定行的方法
2013/05/15 Python
Python多线程编程(四):使用Lock互斥锁
2015/04/05 Python
Python3非对称加密算法RSA实例详解
2018/12/06 Python
pyqt5 tablewidget 利用线程动态刷新数据的方法
2019/06/17 Python
html5桌面通知(Web Notifications)实例解析
2014/07/07 HTML / CSS
Watchshop德国:欧洲在线手表No.1
2019/06/20 全球购物
用C语言实现文件读写操作
2013/10/27 面试题
护理专业本科生自荐信
2013/10/01 职场文书
信息专业本科生个人的自我评价
2013/10/28 职场文书
临床医师个人自我评价
2014/04/06 职场文书
厉行勤俭节约倡议书
2014/05/16 职场文书
校长师德师风自我剖析材料
2014/09/29 职场文书
县长群众路线对照检查材料思想汇报
2014/10/02 职场文书
2014年银行柜员工作总结
2014/11/12 职场文书
2014年预算员工作总结
2014/12/05 职场文书
护士求职自荐信
2015/03/25 职场文书
2015年党员发展工作总结
2015/05/13 职场文书
pytorch 6 batch_train 批训练操作
2021/05/28 Python