1. 爱易网页
2. JS特效
3. 背景颜色随机产生

日期：2014-05-18　 浏览次数：22119 次

欢迎光临爱易网网页脚本特效中心，点击运行按钮演示特效：

以下是程序代码

要完成此效果需要两个步骤 第一步：把如下代码加入到<head>区域中 <SCRIPT LANGUAGE="JavaScript"> <!-- color=new Array("0","3","6","9","C","F"); speed=250; document.bgColor="FFFFFF"; bg=new Array("FFFFFF","FFFFFF","FFFFFF"); function begin() { document.form.col1.value=" X "; document.form.col2.value=" X "; document.form.col3.value=" X "; i=0; roll(speed); } function roll(speedB) //轮子滚动 { if (document.form.col1.value==" X ") { document.form.c1.value=document.form.b1.value; document.form.b1.value=document.form.a1.value; document.form.a1.value= color[Math.round(Math.random()*10)%6]+ color[Math.round(Math.random()*10)%6]; //利用随机函数产生轮子上的颜色值 } if (document.form.col2.value==" X ") { document.form.c2.value=document.form.b2.value; document.form.b2.value=document.form.a2.value; document.form.a2.value= color[Math.round(Math.random()*10)%6]+ color[Math.round(Math.random()*10)%6]; } if (document.form.col3.value==" X ") { document.form.c3.value=document.form.b3.value; document.form.b3.value=document.form.a3.value; document.form.a3.value= color[Math.round(Math.random()*10)%6]+ color[Math.round(Math.random()*10)%6]; } setTimeout("roll("+speedB+")",speedB); } function stop(col) //轮子停止滚动 { if (col==1) {document.form.col1.value=" ";i++;} if (col==2) {document.form.col2.value=" ";i++;} if (col==3) {document.form.col3.value=" ";i++;} if (i==3) { bg[0]=document.form.a1.value+ document.form.a2.value+ document.form.a3.value; bg[1]=document.form.b1.value+ document.form.b2.value+ document.form.b3.value; bg[2]=document.form.c1.value+ document.form.c2.value+ document.form.c3.value; speedB=500000;roll(speedB); } } function view(letter) //颜色预览 { document.bgColor=bg[letter]; document.form.color.value="#"+bg[letter]; } --> </script> 第二步：把如下代码加入到<body>区域中 <form name="form"> <table cellpadding=2 border=1 align="center"> <tr><td align=center> <input type=text name="a1" size=3 onFocus="this.blur()" value=" "> <input type=text name="a2" size=3 onFocus="this.blur()" value=" "> <input type=text name="a3" size=3 onFocus="this.blur()" value=" "> <input type=button onClick="view(0)" value="预览"><br> <input type=text name="b1" size=3 onFocus="this.blur()" value=" "> <input type=text name="b2" size=3 onFocus="this.blur()" value=" "> <input type=text name="b3" size=3 onFocus="this.blur()" value=" "> <input type=button onClick="view(1)" value="预览"><br> <input type=text name="c1" size=3 onFocus="this.blur()" value=" "> <input type=text name="c2" size=3 onFocus="this.blur()" value=" "> <input type=text name="c3" size=3 onFocus="this.blur()" value=" "> <input type=button onClick="view(2)" value="预览"><br> <input type=button onClick="stop(1)" value=" X " name="col1"> <input type=button onClick="stop(2)" value=" X " name="col2"> <input type=button onClick="stop(3)" value=" X " name="col3"> </td> <td valign=middle align=center> <input type=button onClick="begin()&quo</div></div> <div class="clearfix"></div> </div> <nav aria-label="..."> <ul class="pager"> <li class="previous"><a href="4667">上一篇：狡猾的按钮特效</a></li> <li class="next"><a href="4638">下一篇：用按钮来实现背景色的闪烁</a></li> </ul> </nav> <div class="alert alert-warning" role="alert"> <strong>免责声明：</strong> 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。 </div> <div class="panel panel-default"> <div class="panel-heading"> <h3 class="panel-title">相关资料<span><a target="_blank" class="pull-right" href="/ItNews/">更多></a></span></h3> </div> <div class="panel-body row"> <ol> <div class="col-md-6 col-xs-12"> <li class="articleAbout"><a href='/ItNews/34317' title='中移动“重启”自有品牌手机成败难料' target="_blank"> 中移动“重启”自有品牌手机成败难料</a></li></div> <div class="col-md-6 col-xs-12"> <li class="articleAbout"><a href='/ItNews/34323' title='MIUI，有了它小米就无惧对手' target="_blank"> MIUI，有了它小米就无惧对手</a></li></div> <div class="col-md-6 col-xs-12"> <li class="articleAbout"><a href='/ItNews/34249' title='美剧讲硅谷创业者：远不及现实荒诞？' target="_blank"> 美剧讲硅谷创业者：远不及现实荒诞？</a></li></div> <div class="col-md-6 col-xs-12"> <li class="articleAbout"><a href='/ItNews/34277' title='阿里巴巴IPO难掩的四个现实问题：天猫销售额成谜、淘宝拖后腿、营收迅猛其他不行和投资者未必买账' target="_blank"> 阿里巴巴IPO难掩的四个现实问题：天猫销售额成谜、淘宝拖后腿、营收迅猛其他不行和投资者未必买账</a></li></div> <div class="col-md-6 col-xs-12"> <li class="articleAbout"><a href='/ItNews/34356' title='FDD牌照短期不会发放 联通电信暗自提速建网' target="_blank"> FDD牌照短期不会发放 联通电信暗自提速建网</a></li></div> <div class="col-md-6 col-xs-12"> <li class="articleAbout"><a href='/ItNews/34400' title='只有切到刚需痛点，漫画APP才能走下去' target="_blank"> 只有切到刚需痛点，漫画APP才能走下去</a></li></div> <div class="col-md-6 col-xs-12"> <li class="articleAbout"><a href='/ItNews/392' title='团购网站存活率仅18.6% 剩余缺乏千家' target="_blank"> 团购网站存活率仅18.6% 剩余缺乏千家</a></li></div> <div class="col-md-6 col-xs-12"> <li class="articleAbout"><a href='/ItNews/6919' title='原万网CTO周雷加盟亿玛 出任CTO一职' target="_blank"> 原万网CTO周雷加盟亿玛 出任CTO一职</a></li></div> <div class="col-md-6 col-xs-12"> <li class="articleAbout"><a href='/ItNews/34372' title='从旗下三大业务BG发展看华为的过去现在和未来' target="_blank"> 从旗下三大业务BG发展看华为的过去现在和未来</a></li></div> </ol> </div> </div> </div> <div class="col-lg-4 hidden-sm hidden-xs"> <!--右边的内容--> <a id="AdPageRight1_AdPageRight" href="http://www.tdyun.com/cloud/?aiyiweb" target="_blank"><img class="img-responsive" src="/images/TdPageAd/vps1.png" alt="香港云服务器 免备案 云主机VPS 国内 独立IP 独享15M 月付SSD" /></a> <script src='/Scripts/AdContentPage300_1.js' language='javascript'></script> <script src='/Scripts/AdContentPage300_2.js' language='javascript'></script> <script src='/Scripts/AdContentPage300_3.js' language='javascript'></script> <div class="panel panel-default"> <div class="panel-heading"> <h3 class="panel-title">推荐阅读<span><a target="_blank" class="pull-right" href="/ItNews/">更多></a></span></h3> </div> <div class="panel-body"> <ol> <li class="articleAbout"><a href=/ItNews/6897 title='苹果6月20日发布iPhone5S 触摸屏概念股生动' target="_blank"> 苹果6月20日发布iPhone5S 触摸屏概念股生动</a></li> <li class="articleAbout"><a href=/ItNews/34388 title='看蜗牛如何放水养鱼，盘活生态系统' target="_blank"> 看蜗牛如何放水养鱼，盘活生态系统</a></li> <li class="articleAbout"><a href=/ItNews/10838 title='打车App就是下一个团购骗局！？' target="_blank"> 打车App就是下一个团购骗局！？</a></li> <li class="articleAbout"><a href=/ItNews/34332 title='《归来》遭视频网盗播 乐视网状告小米盒子侵权' target="_blank"> 《归来》遭视频网盗播 乐视网状告小米盒子侵权</a></li> <li class="articleAbout"><a href=/ItNews/34358 title='世界杯让耐克阿迪大打出手 谁能劈开用户大脑？' target="_blank"> 世界杯让耐克阿迪大打出手 谁能劈开用户大脑？</a></li> <li class="articleAbout"><a href=/ItNews/16154 title='Facebook财报前瞻：投资者仍信心不足' target="_blank"> Facebook财报前瞻：投资者仍信心不足</a></li> <li class="articleAbout"><a href=/ItNews/34092 title='电话用户9月实名制：运营商监管受质疑' target="_blank"> 电话用户9月实名制：运营商监管受质疑</a></li> <li class="articleAbout"><a href=/ItNews/34390 title='微信企业号必须搬走四座大山，否则只能铩羽而归！' target="_blank"> 微信企业号必须搬走四座大山，否则只能铩羽而归！</a></li> <li class="articleAbout"><a href=/ItNews/34129 title='宽带中国战略明确 运营商建设成本超6000亿' target="_blank"> 宽带中国战略明确 运营商建设成本超6000亿</a></li> <li class="articleAbout"><a href=/ItNews/10819 title='网易云音乐能否为丁磊拿到移动互联网门票？ ' target="_blank"> 网易云音乐能否为丁磊拿到移动互联网门票？ </a></li> <li class="articleAbout"><a href=/ItNews/10805 title='摩托罗拉中国区将再裁员 助力公司变身 ' target="_blank"> 摩托罗拉中国区将再裁员 助力公司变身 </a></li> <li class="articleAbout"><a href=/ItNews/34136 title='首批四款“官方”打车软件发布：均为安卓版本' target="_blank"> 首批四款“官方”打车软件发布：均为安卓版本</a></li> <li class="articleAbout"><a href=/ItNews/34382 title='二维码支付大战的号角注定已经吹响，尚需标准发放' target="_blank"> 二维码支付大战的号角注定已经吹响，尚需标准发放</a></li> <li class="articleAbout"><a href=/ItNews/10822 title='360涉足搜索范围 百度市场份额面临应战' target="_blank"> 360涉足搜索范围 百度市场份额面临应战</a></li> <li class="articleAbout"><a href=/ItNews/34238 title='微软与摩托罗拉授权协议涵盖Android和Chrome设备' target="_blank"> 微软与摩托罗拉授权协议涵盖Android和Chrome设备</a></li> <li class="articleAbout"><a href=/ItNews/428 title='支付宝被曝严重破绽 隐私平安再受质疑' target="_blank"> 支付宝被曝严重破绽 隐私平安再受质疑</a></li> <li class="articleAbout"><a href=/ItNews/16166 title='戴尔新CEO名单曝光:惠普甲骨文高管在列' target="_blank"> 戴尔新CEO名单曝光:惠普甲骨文高管在列</a></li> <li class="articleAbout"><a href=/ItNews/10813 title='历史惊人相似：如今的库克 曾经的鲍尔默' target="_blank"> 历史惊人相似：如今的库克 曾经的鲍尔默</a></li> <li class="articleAbout"><a href=/ItNews/34255 title='盛大游戏走向衰落的根源：免费游戏模式惹的祸' target="_blank"> 盛大游戏走向衰落的根源：免费游戏模式惹的祸</a></li> <li class="articleAbout"><a href=/ItNews/34456 title='解析2014年阿里百度等五大互联网巨头深度布局' target="_blank"> 解析2014年阿里百度等五大互联网巨头深度布局</a></li> </ol> </div> </div> </div> </div> <div class="clearfix"></div> <footer class=" footer navbar-bottom"> <em>友情链接：</em> <a href="http://www.aiyiweb.com/" target="_blank">爱易网 </a> <a href="http://www.aiyiweb.com/" target="_blank">云虚拟主机技术 </a> <a href="http://www.aiyiweb.com/" target="_blank">云服务器技术 </a> <a href="http://www.aiyiweb.com/" target="_blank">程序设计技术 </a> <a href="http://www.aiyiweb.com/" target="_blank">开发网站 </a> <a href="http://www.aiyiweb.com/" target="_blank">APP开发教程 </a> <br /> <script type="text/javascript">(function(){document.write(unescape('%3Cdiv id="bdcs"%3E%3C/div%3E'));var bdcs = document.createElement('script');bdcs.type = 'text/javascript';bdcs.async = true;bdcs.src = 'http://znsv.baidu.com/customer_search/api/js?sid=15239353030108964139' + '&plate_url=' + encodeURIComponent(window.location.href) + '&t=' + Math.ceil(new Date()/3600000);var s = document.getElementsByTagName('script')[0];s.parentNode.insertBefore(bdcs, s);})();</script> Copyright © 2013-2026 爱易网页 当前在线：353人　 网站在12时9分5秒内访问总人数：112248人 当前 57.74% 　<a href="https://beian.miit.gov.cn" target="_blank">粤ICP备18100884号-2 </a> <script charset="UTF-8" id="LA_COLLECT" src="//sdk.51.la/js-sdk-pro.min.js"></script> <script>LA.init({ id: "JszEmKrtpbU59dY5", ck: "JszEmKrtpbU59dY5" })</script> </footer> </div> </body> </html>