编程 Javascript

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

Posted in Javascript onSeptember 21, 2017

本文实例讲述了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实现简单生成随机颜色的方法

- Author -

yongh701

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

深入理解JavaScript系列(9) 根本没有“JSON对象”这回事！

Jan 15 Javascript

基于jQuery的遍历同id元素并响应事件的代码

Jun 14 Javascript

jquery表单验证框架提供的身份证验证方法(示例代码)

Dec 27 Javascript

JS中FRAME的操作问题实例分析

Oct 21 Javascript

js光标定位文本框回车表单提交问题的解决方法

May 11 Javascript

JavaScript知识点总结(十)之this关键字

May 31 Javascript

原生js实现回复评论功能

Jan 18 Javascript

解决浏览器会自动填充密码的问题

Apr 28 Javascript

Angular 4依赖注入学习教程之ClassProvider的使用（三）

Jun 04 Javascript

vue mintui-Loadmore结合实现下拉刷新和上拉加载示例

Oct 12 Javascript

webpack手动配置React开发环境的步骤

Jul 02 Javascript

vue基于viewer实现的图片查看器功能

Apr 12 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