求js中颜色值变浅的算法,类似于下图

JavaScript027

求js中颜色值变浅的算法,类似于下图,第1张

首先你的了解颜色的概念

下面我简单介绍下颜色概念在32位系统上我们所看到的颜色由RGB三原色显示再加上一个透明度通道就形成了多种多样的颜色

多的我就不多说了下面直接写一份演示代码

<!DOCTYPE html>

<html>

<head>

<title>test</title>

<style>

.tsetDiv{

width:40px

height: 40px

border-radius: 100%

font-size: 0

display: inline-block

margin-left: 10px

vertical-align: middle

}

#boxF{

width:300px

font-size: 0

height: auto

}

</style>

</head>

<body>

<div id="boxF"></div>

<script type="text/javascript">

var boxf=document.getElementById("boxF")

var divC=null

var r=0

var g=0

var b=0

for(var i=0i<10i++){

for(var j=0j<10j++){

divC=document.createElement("div")

divC.style.backgroundColor="rgb("+r+","+g+","+b+")"

divC.setAttribute("class","tsetDiv")

boxf.appendChild(divC)

}

//修改r g b加的不同值可以得到不同的效果 rgb最大值为255 所以不用担心超过不显示

r+=15

g+=25

b+=35

}

</script>

</body>

</html>

运行效果为下图 

使用Math.floor(Math.random()*10+1)函数实现。

1、floor():返回小于等于x的最大整数。

2、函数返回一个浮点,  伪随机数在范围[0,1),也就是说,从0(包括0)往上,但是不包括1(排除1)。实现将初始种子选择到随机数生成算法,它不能被用户选择或重置。

实例演示如下:

1、html代码如下,绑定生成函数:

2、函数代码如下:

2、随机演示效果如下:均为1-10之内的整数。

扩展资料:

生成不重复的10个随机数,可以用数组存储已经生成的数,新生成的数据若不在数组中就满足条件。

1、函数代码如下:

2、同理,绑定一个button用于测试:

2、演示:点击按钮直到产生10个数字。一次随机数据生产如下:(10个不重复)

参考资料:

百度百科--math.random()

本文实例讲述了JavaScript实现计算多边形质心的方法。分享给大家供大家参考,具体如下:

最近要基于百度地图显示多边形的标注,所以就研究了下计算Polygon的质心,代码如下:

function

Area(p0,p1,p2)

{

var

area

=

0.0

area

=

p0.lng

*

p1.lat

+

p1.lng

*

p2.lat

+

p2.lng

*

p0.lat

-

p1.lng

*

p0.lat

-

p2.lng

*

p1.lat

-

p0.lng

*

p2.lat

return

area

/

2

}

//line

249

计算polygon的质心

function

getPolygonAreaCenter(points)

{

var

sum_x

=

0

var

sum_y

=

0

var

sum_area

=

0

var

p1

=

points[1]

debugger

for

(var

i

=

2

i

<

points.length

i++)

{

p2=points[i]

area

=

Area(points[0],p1,p2)

sum_area

+=

area

sum_x

+=

(points[0].lng

+

p1.lng

+

p2.lng)

*

area

sum_y

+=

(points[0].lat

+

p1.lat

+

p2.lat)

*

area

p1

=

p2

}

var

xx

=

sum_x

/

sum_area

/

3

var

yy

=

sum_y

/

sum_area

/

3

return

new

BMap.Point(xx,

yy)

}

标注文字的效果如下:

更多关于JavaScript相关内容感兴趣的读者可查看本站专题:《JavaScript数学运算用法总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript数组操作技巧总结》、《JavaScript事件相关操作与技巧大全》、《JavaScript操作DOM技巧总结》及《JavaScript字符与字符串操作技巧总结》

希望本文所述对大家JavaScript程序设计有所帮助。

您可能感兴趣的文章:js浮点数精确计算(加、减、乘、除)javascript

计算两个整数的百分比值js中精确计算加法和减法示例根据经纬度计算地球上两点之间的距离js实现代码js计算精度问题小结html+js实现简单的计算器代码(加减乘除)如何根据百度地图计算出两地之间的驾驶距离(两种语言js和C#)jsvascript图像处理—(计算机视觉应用)图像金字塔Javascript计算两个marker之间的距离(Google

Map

V3)javascript图像处理—边缘梯度计算函数