您现在的位置: 万盛学电脑网 >> 程序编程 >> 网络编程 >> 安卓开发 >> 正文

如何让html5换背景颜色?

作者:佚名    责任编辑:admin    更新时间:2022-06-22

点击按钮后切换网页的背景颜色,不点击的时候会自动变换,处于待命状态,当然你还可以控制它不让他自动播放,点击按钮后可以获取当前的十六进制颜色值,你直接复制就可以使用了。 下面我们给大家介绍一下html5换背景颜色的制作方法吧!

<html>

<head>

<title>按钮切换背景</title>

<style type="text/css">

.grigg{

position:relative;

font-family:Verdana;

font-size:16px;color:#ffffff;

}

</style>

<script language="JavaScript">

y=" ";

function colourWrite(){

y=document.bgColor;

if (document.layers)

{x=document.FM.box.value}

if (document.all)

{x=document.all.kurt.innerHTML}

r=x+=y.toUpperCase();

Wrte=r+" ";

if (document.layers)

{

document.FM.box.value=Wrte;

document.layers.kurt.document.open();

document.layers.kurt.document.write("<div style='position:absolute;top:0px;left:0px;font-family:Verdana;font-size:16px;color:#ffffff;'>"+Wrte+"</div>");

document.layers.kurt.document.close();

}

if (document.all)

document.all.kurt.innerHTML= Wrte;

}

</script>

<script language="JavaScript">

var amount=0;

function counter(){

var colourElements="0123456789ABCDEF";

var Split=colourElements.split('');

for (i=0; i < Split.length; i++)

var a=Math.round(Math.random()*[i]);

var b=Math.round(Math.random()*[i]);

var c=Math.round(Math.random()*[i]);

var d=Math.round(Math.random()*[i]);

var e=Math.round(Math.random()*[i]);

var f=Math.round(Math.random()*[i]);

var G=Split[a];

var H=Split[b];

var I=Split[c];

var J=Split[d];

var K=Split[e];

var L=Split[f];

//stop error!

if ((G == null)||(H == null)||(I == null)||(J == null)||(K == null)||(L == null))

counter();

else

{

var RandomColour=G+H+I+J+K+L;

document.bgColor=RandomColour;

amount++;

TMR=setTimeout('counter()',1500)

}

}

//-->

</script>

</head>

<body>

<FORM NAME=FM>

<INPUT TYPE=BUTTON value="开始变色" onClick="counter()">

<INPUT TYPE=BUTTON value="暂停变色" onClick="window.clearTimeout(TMR)">

<INPUT TYPE=BUTTON value=" 获取颜色值 " onClick="colourWrite()">

<INPUT TYPE=hidden name=box>

</FORM>

<div id=kurt class=grigg></div>

</body>

</html>

以上就是我们给大家介绍的html5换背景颜色的制作方法了。希望大家继续关注我们的网站!