实现思路是取一个随机数，颜色值保存在数组中，然后依次给标签css样式赋值
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=10">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<p>颜色</p>
<p>颜色</p>
<p>颜色</p>
<p>颜色</p>
<p>颜色</p>
<script>
let color = [' #000000', '#FF0000', '#00FF00', '#0000FF', '#FFFF00'];
function random() {
let i = Mathfloor(Mathrandom() (colorlength - 1));
let text = colorsplice(i, 1)[0];
return text;
}
let p = documentgetElementsByTagName('p');
for (let i = 0; i < plength; i++) {
p[i]stylecolor = random();
}
</script>
</body>
</html>
昨天在做js
从10种颜色中随机取色，并每次取出的颜色不同的时候，考虑了很多，最终用如下来实现：
复制代码
代码如下:
var
colorList
=
["#FFFF99","#B5FF91","#94DBFF","#FFBAFF","#FFBD9D","#C7A3ED","#CC9898","#8AC007","#CCC007","#FFAD5C"];
for(var
i=0;i<lineListlength;i++){
var
bgColor
=
getColorByRandom(colorList);
}
function
getColorByRandom(colorList){
var
colorIndex
=
Mathfloor(Mathrandom()colorListlength);
var
color
=
colorList[colorIndex];
colorListsplice(colorIndex,1);
return
color;
}
这样便能每次取出的颜色是随机的且都不一样
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="jquery-151js"></script>
<script>
//setTimeout
var colors = new Array("red","green","blue");
function changeColor(){
//var colorIndex = Mathround(Mathrandom()3);
var color_div=colors[Mathround(Mathrandom()3)];
var color_font=colors[Mathround(Mathrandom()3)];
documentgetElementById("div_c")stylebackground=color_div;
documentgetElementById("font_c")stylecolor=color_font;
//documentwirte(colorIndex);
setTimeout("changeColor()",1000);
}
</script>
</head>
<body onload="changeColor()">
<div id="div_c" align="center" style="height:1000px;width:100%">
<br/>
<br/>
<br/>
<font id="font_c" size="20px" >自动变换颜色</font>
</div>
</body>
</html>
调用的例子：
consolelog(ColorLuminance(colorRGB(),05)); //先自动生成16进制颜色，在转成比原有颜色轻50%；
//16进制随机颜色
function colorRGB(){
return '#' + (function (h) {
return new Array(7 - hlength)join("0") + h
})((Mathrandom() 0x1000000 << 0)toString(16))
}
ColorLuminance接受两个参数：
参数1： 十六进制颜色值，例如“#abc”或“＃123456”（散列是可选的）
参数2： 亮度因数，即，-01是10％更暗，02是轻20％等。
function ColorLuminance(hex, lum) {
// validate hex string
hex = String(hex)replace(/[^0-9a-f]/gi, '');
if (hexlength < 6) {
hex = hex[0]+hex[0]+hex[1]+hex[1]+hex[2]+hex[2];
}
lum = lum || 0;
// convert to decimal and change luminosity
var rgb = "#", c, i;
for (i = 0; i < 3; i++) {
c = parseInt(hexsubstr(i2,2), 16);
c = Mathround(Mathmin(Mathmax(0, c + (c lum)), 255))toString(16);
rgb += ("00"+c)substr(clength);
}
return rgb;
}
相关资源：https://blogcsdnnet/dingshi7798/article/details/105829757
你好，我看了界面之后确实很神奇
documentwrite(l + '<v:rect style="width:50px; height:50px; behavior:URL(#default#VML);" coordsize="21600, 21600" fillcolor="#' + (Mathrandom() 4096)toString(16) + '" O:SpT=' + l + ' onclick="fillon=0" />');
颜色是随机产生的 Mathrandom()4096 这里你可以改变一下试试
style：代表的风格其中width为宽度 height 为高度 用px计量
coordsize:代表调协的尺寸 数字越小 所占页面比例越大
fillcoclor 代表填充的颜色
O:Spt :关键地方 来了 这里如果去掉的话 你会看到页面上的形状是一样的 它这里是根据for 循环
Behavior:特性URL中的#VML#很重要 入去掉的话 就不会显示 也就是说没有任何特性
里面来变化形状的
谢谢！
欢迎分享，转载请注明来源：表白网
微信扫一扫
支付宝扫一扫
评论列表（0条）