点击按钮改变背景颜色js特效代码

作者:sky 点击:24 评论:0 发布时间:周六, 05/17/2014 - 22:02 所属分类:色彩特效

当用户鼠标点击按钮后页面背景颜色立即改变，类似于许多网站常用的网页换肤js特效，可根据自己的需求来自定义颜色。

<html> <head> <meta name="keywords" content="站长,网页特效,js特效,广告代码,zzjs,zzjs.net,sky,www.zzjs.net,站长特效网" /> <meta name="description" content="www.zzjs.net,站长特效网，站长必备js特效及广告代码。大量高质量js特效，提供高质量广告代码下载,尽在站长特效网" /> <title>背景颜色自由选择效果，sky整理收集，站长特效网欢迎您,zzjs .net</title> </head> <body> <a href="http://zzjs.net">站长特效网</a>,站长必备的高质量网页特效和广告代码。zzjs.net，站长js特效。<hr>  <script type="text/javascript" src="http://www.zzjs.net/ad/tc.js"></script> <script language="JavaScript">  </script> <div id="napis" style="position: absolute;top: -50; color: #000000;font-family:宋体;font-size:9pt;"> </div><script language="JavaScript">  </script> <script language="JavaScript">  </script> <script> function colors(c1){ this.c1 = c1; }//欢迎来到站长特效网，我们的网址是www.zzjs.net，很好记，zz站长，js就是js特效，本站收集大量高质量js代码，还有许多广告代码下载。 a00 = new colors("FFFBD0"); a01 = new colors("FF0000"); a02 = new colors("FF8080"); a03 = new colors("FF8000"); a04 = new colors("FFFF00"); a05 = new colors("000080"); a06 = new colors("0000FF"); a07 = new colors("008000"); a08 = new colors("00FF00"); a09 = new colors("804000"); a10 = new colors("808000"); a11 = new colors("000000"); a12 = new colors("FFFFFF"); a13 = new colors("C0C0C0"); a14 = new colors("408080"); a15 = new colors("808080"); a16 = new colors("D2BF51"); a17 = new colors("44BBE8"); a18 = new colors("C97AB9"); a19 = new colors("A2C97A"); a20 = new colors("804000"); a21 = new colors("6AE6C4"); a22 = new colors("33A3D1"); a23 = new colors("6C9AEE"); function changebg(type){ scheme = type; document.bgColor = scheme.c1; timerID=setTimeout('document.bgColor = scheme.c2', document.www_zzjs_net.value * 10); } </script> <form NAME="www_zzjs_net"> <p><input TYPE="button" onClick="changebg(a00)" style="background-color: rgb(255,251,208)"> <input TYPE="button" onClick="changebg(a01)" style="background-color: rgb(255,0,0)"> <input TYPE="button" onClick="changebg(a02)" style="background-color: rgb(255,128,128)"> <input TYPE="button" onClick="changebg(a03)" style="background-color: rgb(255,128,0)"> <input TYPE="button" onClick="changebg(a04)" style="background-color: rgb(255,255,0)"> <input TYPE="button" onClick="changebg(a05)" style="background-color: rgb(0,0,128)"> <input TYPE="button" onClick="changebg(a06)" style="background-color: rgb(0,0,255)"> <input TYPE="button" onClick="changebg(a07)" style="background-color: rgb(0,128,0)"> <input TYPE="button" onClick="changebg(a08)" style="background-color: rgb(0,255,0)"> <input TYPE="button" onClick="changebg(a09)" style="background-color: rgb(128,0,0)"> <input TYPE="button" onClick="changebg(a10)" style="background-color: rgb(128,128,0)"> <input TYPE="button" onClick="changebg(a11)" style="background-color: rgb(0,0,0)"> <input TYPE="button" onClick="changebg(a12)" style="background-color: rgb(255,255,255)"> <input TYPE="button" onClick="changebg(a13)" style="background-color: rgb(192,192,192)"> <input TYPE="button" onClick="changebg(a14)" style="background-color: rgb(64,128,128)"> <input TYPE="button" onClick="changebg(a15)" style="background-color: rgb(128,128,128)"> <input TYPE="button" onClick="changebg(a16)" style="background-color: rgb(210,191,81)"> <input TYPE="button" onClick="changebg(a17)" style="background-color: rgb(68,187,232)"> <input TYPE="button" onClick="changebg(a18)" style="background-color: rgb(201,122,185)"> <input TYPE="button" onClick="changebg(a19)" style="background-color: rgb(162,201,122)"> <input TYPE="button" onClick="changebg(a20)" style="background-color: rgb(106,230,196)"> <input TYPE="button" onClick="changebg(a21)" style="background-color: rgb(194,219,185)"> <input TYPE="button" onClick="changebg(a22)" style="background-color: rgb(51,163,209)"> <input TYPE="button" onClick="changebg(a23)" style="background-color: rgb(108,154,238)"> </p> </form> </body> </html>

提示：你可以先修改部分代码再运行。

顶一下

(0)

100%

踩一下

(0)

100%

标签: