生成随机颜色JS

平时自己练习时,经常会加点颜色以突显效果,我觉得很麻烦,而且自己能记住的颜色并不多,而且也不好选择,所以就自制了如下生成随机颜色的JS代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>两栏三栏自适应布局</title>
<style type="text/css">

/* 两栏三栏自适应布局 */

/* 两栏布局 主栏左 侧栏右 */
.g-mn1{float:left;width:100%;margin-right:-200px;}
.g-mnc1{margin-right:210px;}
.g-sd1{float:right;width:200px;}

/* 两栏布局 主栏右 侧栏左*/
.g-mn2{float:right;width:100%;margin-left:-200px;}
.g-mnc2{margin-left:210px;}
.g-sd2{float:left;width:200px;}

/* 三栏布局 主栏右 两侧栏左*/
.g-mn3{float:right;width:100%;margin-left:-520px;}
.g-mnc3{margin-left:520px;}
.g-sd3a{float:left;width:300px;margin-right:10px;}
.g-sd3b{float:left;width:200px;}

/* 三栏布局 主栏中 两侧栏分居左右*/
.g-mn4{float:right;width:100%;margin-left:-200px;}
.g-mnc4{margin-left:210px;}
.g-sd4{float:left;width:200px;}
.g-mn5{float:left;width:100%;margin-right:-200px;}
.g-mnc5{margin-right:210px;}
.g-sd5{float:right;width:200px;}

</style>
</head>
<body>

<div class="g-bd">
<div class="g-mn1">
<div class="g-mnc1">
<p>主栏1内容区</p>
</div>
</div>
<div class="g-sd1">
<p>侧栏1内容区</p>
</div>
</div>
<div class="g-bd">
<div class="g-mn2">
<div class="g-mnc2">
<p>主栏2内容区</p>
</div>
</div>
<div class="g-sd2">
<p>侧栏2内容区</p>
</div>
</div>
<div class="g-bd">
<div class="g-mn4">
<div class="g-mnc4">
<div class="g-mn5">
<div class="g-mnc5">
<p>主栏5内容区</p>
</div>
</div>
<div class="g-sd5">
<p>侧栏5内容区</p>
</div>
</div>
</div>
<div class="g-sd4">
<p>侧栏4内容区</p>
</div>
</div>
<div class="g-bd">
<div class="g-mn3">
<div class="g-mnc3">
<p>主栏3内容区</p>
</div>
</div>
<div class="g-sd3a">
<p>侧栏a内容区</p>
</div>
<div class="g-sd3b">
<p>侧栏b内容区</p>
</div>
</div>

</body>
<script>

function productColor(ele){

for(i=0; i<ele.length; i++){
var Addition = [];

for(var k=0; k<3; k++){
for(j=0; j<2000; j++){
if(Addition.length == 3){
break;
}
var rdm1 = Math.random().toFixed(1) * 10;
var rdm2 = Math.random().toFixed(1) * 10;
var rdm3 = Math.random().toFixed(1) * 10;
var Addit = Number(rdm1.toString() + rdm2.toString() + rdm3.toString());
if(Addit > 0 && Addit < 255){
Addition.push(Addit);
}else{
continue;
}
}
}
ele[i].style.backgroundColor = "rgb(" + Addition.toString() + ")";
}
}

productColor(document.getElementsByTagName("div")); /*生成颜色函数,参数为需要生成颜色的元素数组*/

</script>
</html>

时间: 2024-10-02 22:18:34

生成随机颜色JS的相关文章

随机颜色-js

function ramColor() {            return '#' + ('00000' + (Math.random() * 0x1000000 << 0).toString(16)).slice(-6);        } 随机颜色-js,布布扣,bubuko.com

js生成随机颜色

方法一: var getRandomColor = function(){ return '#' + (function(color){ return (color += '0123456789abcdef'[Math.floor(Math.random()*16)]) && (color.length == 6) ? color : arguments.callee(color); })(''); } 随机生成6个字符然后再串到一起,闭包调用自身与三元运算符让程序变得内敛. 方法二: v

获取随机颜色js

获取随机颜色方法一: function randomColor1() { var rand = Math.floor(Math.random() * 0xFFFFFF).toString(16); if(rand.length == 6){ return rand; }else{ return randomColor(); } } 方法二: function randomColor2(){ return '#'+('00000'+(Math.random()*0x1000000<<0).toS

js生成随机固定长度字符串的简便方法

概述 碰到一个需求:用js生成固定长度的字符串.在网上查了很多资料,网上的方法都比较麻烦.我自己灵光一现,实现了一个比较简单的方法.记录下来,供以后开发时参考,相信对其他人也有用. js生成随机字符串 js生成随机字符串有一个奇妙的写法: //输出随机字符串 const randStr = () => Math.random().toString(36).substr(2); 浏览器开发者工具输入5次,输出如下: "4cc9gd4sbwd" "ox9r8g6g7h&qu

JS一行代码,生成一个随机颜色,简单粗暴。

var r = '#'+ Math.random().toString(16).substr(-6); Dont believe, just try. Math.random().toString(16) 随机生成一个随机数,然后转为16进制字符串,截取后6位,now 就是随机颜色的后6位了. 原文地址:https://www.cnblogs.com/hill-foryou/p/8954452.html

JS中取整以及随机颜色问题

前言:感觉自己已经好久好久没有写博客了,最近都是在写在线笔记比较多.现在来到新公司了,昨天刚刚完成一个项目所以今天有空研究研究一下前端方面的技术.下午在看一个游戏代码的时候,发现了几个别人留下的不错的代码小技巧.譬如说取整问题,随机颜色问题.其实这些问题都不大,但是仔细研究一下还是别有洞天,对于提高前端开发方面的理解还是很有帮助的. 取整问题: 1.常规方法: Math.floor(x),返回小于等于x,且最接近x的整数:   Math.floor(1.2);//1 Math.floor(-2.

swift 随机生成背景颜色

swift是一门新语言,相关的文档资料现在基本上还不是很完整.在尝试开发过程中,走了不少弯路.在这里记录一下自己的”路“,希望以后能少走弯路. 生成随机背景颜色使用的语法和C#或者JAVA基本一致. UIView.backgroundColor = UIColor 其中UIView是在设备上显示出来的从UIView继承到的对象,都会有这个属性. 其属性值是UIColor对象,而UIColor对象的构造函数有: init(white: CGFloat, alpha: CGFloat) init(h

PHP生成随机的HTML颜色代码

实用的6位颜色代码生成小程序,适用于标签云中,以下是我 最近在做标签云的效果中,生成了随机的颜色效果,在此使用一下: <?php function randomColor() {     $str = '#';     for($i = 0 ; $i < 6 ; $i++) {         $randNum = rand(0 , 15);         switch ($randNum) {             case 10: $randNum = 'A'; break;     

利用纯JS和HTML Canvas生成随机迷宫过程中产生的有趣的事情

上效果图: #先看生成随机迷宫的代码吧↓ 1 <html> 2 <head> 3 <title>生成随机迷宫v1.0</title> 4 </head> 5 <body> 6 <center style="margin-top: 20px;"> 7 <canvas id="myCan1" title="作者:谢辉"></canvas> 8