用JS实现变换背景和字体颜色,分别保存红、蓝、绿三种颜色,每隔一秒钟变换一个颜色,颜色从数组中获取

用JS实现变换背景和字体颜色,分别保存红、蓝、绿三种颜色,每隔一秒钟变换一个颜色,颜色从数组中获取,第1张

<!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>

试试这个代码,在IE,OPERA,FF下测试通过:

<html>

<head>

<meta >

实现思路是取一个随机数,颜色值保存在数组中,然后依次给标签css样式赋值

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=10">

<meta >

javascript的style属性只能获取内联样式,对于外部样式和嵌入式样式需要用currentStyle属性。但是,currentStyle在FIrefox和Chrome下不支持,需要使用如下兼容性代码

HTMLElementprototype__defineGetter__("currentStyle", function () { 

    return thisownerDocumentdefaultViewgetComputedStyle(this, null); 

});

接下来就可以直接使用currentStyle属性来获取元素的样式了,下面实例演示获取页面body的背景色:

1、HTML结构

<input type='button' value='点击按钮获取页面背景色' onclick="fun()"/>

2、CSS样式

body{background: RGB(222,222,2);}

3、javascript代码

HTMLElementprototype__defineGetter__("currentStyle", function () { 

return thisownerDocumentdefaultViewgetComputedStyle(this, null); 

});

function fun(){

var color = documentbodycurrentStylebackgroundColor;

alert(color);

}

4、效果演示

你的数组长度只有12个,result += arr[Mathfloor(Mathrandom()16)],这里用了16,超出了数组范围,所有就undefined,改为result += arr[Mathfloor(Mathrandom()12)]就可以了

以上就是关于用JS实现变换背景和字体颜色,分别保存红、蓝、绿三种颜色,每隔一秒钟变换一个颜色,颜色从数组中获取全部的内容,包括:用JS实现变换背景和字体颜色,分别保存红、蓝、绿三种颜色,每隔一秒钟变换一个颜色,颜色从数组中获取、JAVASCRIPT随机改变字符颜色和大小、JS怎么给5个随机字体赋5个随机不同的颜色等相关内容解答,如果想了解更多相关内容,可以关注我们,你们的支持是我们更新的动力!

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/web/9830250.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-02
下一篇 2023-05-02

发表评论

登录后才能评论

评论列表(0条)

保存