html爱心特效代码怎么改花瓣的颜色

html-css018

html爱心特效代码怎么改花瓣的颜色,第1张

html爱心特效代码改花瓣颜色的方法如下:

1、获取花瓣,所有调色条,以及用来显示rgb值的div盒子。

2、给花瓣循环绑定点击事件,这里需要一个匿名的自调用函数来储存i的值,不然事件绑定不上,i值会变为最终长度值。

3、利用"排他思想"循环遍历将所有花瓣的selected类名去掉,然后给当前点击的花瓣添加被选中的类名"selected"将边框变为虚线,表示被选中。

4、下面一个for循环同样利用了匿名的自调用函数存储i值,然后给所有的调色条绑定input事件。

5、判断一下是否有被选中的元素,通过判断之后获取带有selected类名的花瓣,然后将其背景颜色改为三个input输入的value值,最后将三个rgb值渲染到显示rgb值的div盒子中,这样一个彩色花瓣的效果就完成了。

1、你的那段放在<body></body>之间

2、要把文章内容放在<p id="ccon"></div>中间,并接在你那段后面;

2、再就是将这段代码放到<head></head>之间

<script language="javascript">

//保存背景颜色和字号

function setSz()

{

var va = document.getElementById("bjColor").value

setCookie("bjColor", va, 30)

va = document.getElementById("wzSize").value

setCookie("wzSize", va, 30)

va = document.getElementById("wzColor").value

setCookie("wzColor", va, 30)

va = document.getElementById("gd").value

setCookie("gd", va, 30)

alert("保存成功!")

return

}

//设置背景颜色和字号

function getSz()

{

var bjColor = getCookie('bjColor')

var wzSize = getCookie('wzSize')

var wzColor = getCookie('wzColor')

var gd = getCookie('gd')

if(bjColor != null)

{

document.getElementById("ccon").style.background=bjColor

setSelect(bjColor,"bjColor")

}

if(wzSize != null)

{

document.getElementById("ccon").style.fontSize=wzSize

setSelect(wzSize,"wzSize")

}

if(wzColor != null)

{

document.getElementById("ccon").style.color=wzColor

setSelect(wzColor,"wzColor")

}

if(gd != null)

{

SetScrollValue(gd)

setSelect(gd,"gd")

}

}

/*

* 设置滚动速度

*/

var currentpos,timer

var scrollValue = 100

function SetScrollValue(value)

{

scrollValue = value * 20

}

function initialize()

{

timer = window.setInterval("scrollwindow()",scrollValue)

}

function sc()

{

clearInterval(timer)

}

function scrollwindow()

{

currentpos = document.documentElement.scrollTop

window.scroll(0,++currentpos)

window.status = currentpos

if (currentpos != document.documentElement.scrollTop) sc()

}

document.ondblclick = function()

{

initialize()

}

document.onmousedown = function()

{

sc()

}

</script>