用按钮随意变换背景色的JS代码怎们写

2025-09-25 03:10:23

1、打开sublime_text网页编辑器,然后写入用户界面代码,也就是DIV+CSS,代码如下所示:

<form name="form1" method="post" action="">

<p> <input type="button" name="Submit" value="变换背景" onClick="turncolors()"></p>

<p>用按钮随意变换背景颜色</p>

</form>

用按钮随意变换背景色的JS代码怎们写

2、接下来就该看JS啦,首先新建一个数组,数组里面是多种颜色,然后构造一个函数,该函数实现颜色变化的功能。代码如下所示:

var Arraycolor=new Array("#000","#123","red","#124","#333","#456",

"#123456","#123789","#125478","#555","#666","#888","#999","#CCC");

var n=0;

function turncolors(){

if(n==(Arraycolor.length-1))

n=0;

    n++;

    document.bgColor=Arraycolor[n];     

}

用按钮随意变换背景色的JS代码怎们写

3、在这里说一下,数组里面的颜色可以写成“red”形式的,也可以写成“#f00”形式,这就需要看大家的爱好了。

用按钮随意变换背景色的JS代码怎们写

4、写好之后,我们需要用浏览器看一下代码有没有错误,这是浏览器刚打开的效果。

用按钮随意变换背景色的JS代码怎们写

5、点击按钮,我们发现背景颜色变成了黑色。

用按钮随意变换背景色的JS代码怎们写

6、继续点击背景颜色变成了红色,表明我们所写的功能实现了。

用按钮随意变换背景色的JS代码怎们写

声明:本网站引用、摘录或转载内容仅供网站访问者交流或参考,不代表本站立场,如存在版权或非法内容,请联系站长删除,联系邮箱:site.kefu@qq.com。
猜你喜欢