1、在桌机上新建文本文档,命名为晓博JavaScript特效测试.txt,在文本文档里中入HTML文档的基本元素如下,并保存。<html><head><title媪青怍牙>晓博JavaScript特效测试</title></head><body><div id="zy"> <div id="login"></div> <div id="daohang"> <ul> <li><a href="index.html">首页</a></li> <li><a href="jianjie.html">七夕简介</a></li> <li><a href="#">七夕节传说</a></li> <li><a href="#">七夕节习俗</a></li> <li><a href="#">诗词& 歌谣</a></li> <li><a href="#">七夕节寄语</a></li> </ul> </div></div></body></html>
![Javascript脚本特效示例:[16]按钮驱动背景](https://exp-picture.cdn.bcebos.com/a99a494afa32939cad6ddf065719ce2c5a1b1532.jpg)
![Javascript脚本特效示例:[16]按钮驱动背景](https://exp-picture.cdn.bcebos.com/92dd32f7dfb2dc194ab65baf95def4dca1391032.jpg)
2、第一步:把如下代码加入<head>区域中<script language屏顿幂垂="Javascript媪青怍牙"><!--function backcolor(form){ temp = "" for (var i = 0; i < 16; i++) { temp = form.color[i].value if (form.color[i].checked){ document.bgColor = temp } } }function randombackground(){ document.bgColor = getColor() }function getColor(){ currentdate = new Date() backgroundcolor = currentdate.getSeconds() if (backgroundcolor > 44) backgroundcolor = backgroundcolor - 45 else if (backgroundcolor > 29) backgroundcolor = backgroundcolor - 30 else if (backgroundcolor > 15) backgroundcolor = backgroundcolor - 16 if (backgroundcolor == 0 ) return "olive"; else if (backgroundcolor == 1 ) return "teal"; else if (backgroundcolor == 2 ) return "red"; else if (backgroundcolor == 3 ) return "blue"; else if (backgroundcolor == 4 ) return "maroon"; else if (backgroundcolor == 5 ) return "navy"; else if (backgroundcolor == 6 ) return "lime"; else if (backgroundcolor == 7 ) return "fuschia"; else if (backgroundcolor == 8 ) return "green"; else if (backgroundcolor == 9 ) return "purple"; else if (backgroundcolor == 10 ) return "gray"; else if (backgroundcolor == 11 ) return "yellow"; else if (backgroundcolor == 12 ) return "aqua"; else if (backgroundcolor == 13 ) return "black"; else if (backgroundcolor == 14 ) return "white"; else if (backgroundcolor == 15 ) return "silver"; }// --></script>
3、第二步:把如下代码加入<body>区域中<FORM><input type="button" value="晓博变换背景" onClick="randombackground()"></form>
4、用IE浏览器打开晓博JavaScript特效测试.html文件,可以看到按钮驱动背景特效,如下图
![Javascript脚本特效示例:[16]按钮驱动背景](https://exp-picture.cdn.bcebos.com/dd58d02c5b1b1ede7346a08d981fceecd2d90f32.jpg)
![Javascript脚本特效示例:[16]按钮驱动背景](https://exp-picture.cdn.bcebos.com/a1780d1fceecd3d9e5eff2706799594305010832.jpg)
![Javascript脚本特效示例:[16]按钮驱动背景](https://exp-picture.cdn.bcebos.com/edd84743040148fe8cd85ddf8fd149299b880232.jpg)
![Javascript脚本特效示例:[16]按钮驱动背景](https://exp-picture.cdn.bcebos.com/059057299a883913707fec5a26bcbe2f46707c32.jpg)
![Javascript脚本特效示例:[16]按钮驱动背景](https://exp-picture.cdn.bcebos.com/acfda02f477046184140e48fb08602214e577632.jpg)
![Javascript脚本特效示例:[16]按钮驱动背景](https://exp-picture.cdn.bcebos.com/3ac71c214f579356f721f894effb960b30217032.jpg)
![Javascript脚本特效示例:[16]按钮驱动背景](https://exp-picture.cdn.bcebos.com/65ba880b31210561ae39555d08aee8d7582a6a32.jpg)
![Javascript脚本特效示例:[16]按钮驱动背景](https://exp-picture.cdn.bcebos.com/586bfdefe07814316d2c32d8dc6699cf03536232.jpg)
![Javascript脚本特效示例:[16]按钮驱动背景](https://exp-picture.cdn.bcebos.com/031231632385e036580b475cb8e039723c035a32.jpg)