网页特效（背景特效代码）:点击按钮切换背景颜色的JavaScript

【简介】感谢网友“多加香菜”参与投稿，下面就是小编给大家带来的网页特效（背景特效代码）:点击按钮切换背景颜色的JavaScript(共5篇），希望大家喜欢，可以帮助到有需要的朋友!

篇1：网页特效（背景特效代码）:点击按钮切换背景颜色的JavaScript

点击按钮后切换网页的背景颜色，不点击的时候会自动变换，处于待命状态，当然你还可以控制它不让他自动播放，点击按钮后可以获取当前的十六进制颜色值，你直接复制就可以使用了，

网页特效（背景特效代码）:点击按钮切换背景颜色的JavaScript

。 <meta content=“width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;” name=“viewport”> <meta content=“yes” name=“apple-mobile-web-app-capable”> <meta content=“telephone=no” name=“format-detection”> 按钮切换背景<form. name=“FM”><input nclick=“counter” type=“BUTTON” value=“开始变色”><input nclick=“window.clearTimeout(TMR)” type=“BUTTON” value=“暂停变色”><input nclick=“colourWrite()” type=“BUTTON” value=“获取颜色值”><input name=“box” type=“hidden”></form.>     

提示：您可以先修改部分代码再运行，复制代码和保存代码功能在Firefox下无效，

篇2：网页特效（背景特效代码）:JavaScript荧光文字遮罩特效

很酷的背景特效，像萤火虫一样的发光，又像一个手电筒的光照效果一样，用做背景比较酷，

网页特效（背景特效代码）:JavaScript荧光文字遮罩特效

。如果你对这种颜色不太满意，可以自己试着调一下。 <meta. content=“text/html; charset=gb2312” http-equiv=“Content-Type”> <meta content=“width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;” name=“viewport”> <meta content=“yes” name=“apple-mobile-web-app-capable”> <meta content=“telephone=no” name=“format-detection”> 荧光鼠标遮罩<meta. content=“Microsoft FrontPage 5.0” name=“GENERATOR”><h4></h4> 荧光遮罩特效很酷的背景特效，像萤火虫一样的发光，又像一个手电筒的光照效果一样，用做背景比较酷。如果你对这种颜色不太满意，可以自己试着调一下，电脑资料。//图层移动函数function move_layer(){Layer1.style.left=event.clientX+document.body.scrollLeft-50;Layer1.style.top=event.clientY+document.body.scrollTop-20;}//鼠标移动时调用“move_layer”函数document.onmousemove =move_layer;</meta.></meta.>     

提示：您可以先修改部分代码再运行，复制代码和保存代码功能在Firefox下无效。

篇3：网页特效（背景特效代码）:适时变换网页背景和文字颜色

类似于无刷新切换网页风格，本代码意在学习这种切换技术，实际使用时候很少这样用，对于学习DW的朋友会有帮助，当你选择了网页背景色和文字颜色，点击确认按钮JavaScript 函数会帮你适时将网页变换为你想要的颜色，

网页特效（背景特效代码）:适时变换网页背景和文字颜色

。 <meta content=“width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;” name=“viewport”> <meta content=“yes” name=“apple-mobile-web-app-capable”> <meta content=“telephone=no” name=“format-detection”> 适时变换网页背景和文字颜色<form. name=“colc”>背景颜色背景色:<select name=“cc” size=“1”><option value=“black”>Black</option><option value=“blue”>Blue</option><option value=“green”>Green</option><option value=“skyblue”>Light Blue</option><option value=“orange”>Orange</option><option value=“purple”>Purple</option><option value=“red”>Red</option><option value=“silver”>Silver</option><option value=“Yellow”>Yellow</option><option selected value=“white”>White</option></select>文字颜色:<select name=“tc” size=“1”><option selected value=“black”>Black</option><option value=“blue”>Blue</option><option value=“green”>Green</option><option value=“skyblue”>Light Blue</option><option value=“orange”>Orange</option><option value=“purple”>Purple</option><option value=“red”>Red</option><option value=“silver”>Silver</option><option value=“Yellow”>Yellow</option><option value=“white”>White</option></select><center><input name=“button” nclick=“color” type=“button” value=“改变颜色”></center></form.>     

提示：您可以先修改部分代码再运行，复制代码和保存代码功能在Firefox下无效，

篇4：网页特效（背景特效代码）:用选项卡控制DIV层切换改变背景颜色

用选项卡控制DIV层的切换从页适时改变网页指定区域的背景颜色，并利用CSS的滤镜将背景颜色填充为渐变色，从这个实例我们可以学到不少东西哦，

网页特效（背景特效代码）:用选项卡控制DIV层切换改变背景颜色

。 <meta. content=“text/html; charset=gb2312” http-equiv=“Content-Type”></meta.> <meta content=“width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;” name=“viewport”> <meta content=“yes” name=“apple-mobile-web-app-capable”> <meta content=“telephone=no” name=“format-detection”> 层切换<style. a.tabs=“a.tabs{” a.tabs:hover=“a.tabs:hover{” background-color:0000fffilter=“1,startColorStr=skyblue,endColorStr=darkblue);” background-color:003399=“background-color:#003399;” background-color:00ff00filter=“1,startColorStr=white,endColorStr=green);” background-color:666666=“background-color:#666666;” background-color:ff0000filter=“1,startColorStr=white,endColorStr=deeppink);” blue=“#blue{” bodyfilter:progid=“1,startColorStr=white,endColorStr=orange);}” color:ffff00=“color:#ffff00;” color:ffffff=“color:#ffffff;” cursor:pointer=“cursor:pointer;” display:block=“display:block;” display:none=“display:none;” float:left=“float:left;” font-size:12px=“font-size:12px;” green=“#green{” height:28px=“height:28px;” height:30px=“height:30px;” height:336px=“height:336px;” margin:0=“margin:0;” padding:8px=“padding:8px” position:absolute=“position:absolute;” red=“#red{” switch=“#switch” text-decoration:none=“text-decoration:none;” text-decoration:nonetext-align=“text-decoration:none;text-align” top:336px=“top:336px;” width:100px=“width:100px;” width:336px=“width:336px;”></style.>红色绿色蓝色     

提示：您可以先修改部分代码再运行，复制代码和保存代码功能在Firefox下无效，

篇5：网页特效（背景特效代码）:斜向移动落叶背景

<meta content=“width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;” name=“viewport”> <meta content=“yes” name=“apple-mobile-web-app-capable”> <meta content=“telephone=no” name=“format-detection”> 网页特效--背景斜向移动<meta. content=“text/html; charset=gb2312” http-equiv=“Content-Type”><!--var background = “/edu/img/js/0910/bg.gif”;var speed = 0;browserName = navigator.appName;browserVer = parseInt(navigator.appVersion);if (browserName != “Netscape” || browserVer >= 4.5) {function moveback(movert,movedn,hPos,vPos) {if (arguments[4])document.body.style.backgroundImage = “url(”“ + arguments[4] + ”“)”;if (arguments[5])document.body.style.backgroundRepeat = arguments[5]if (!isNaN(hPos)) {if ((movert!=0) && (hPos>0)) hPos=-100000hPos += movert}if (!isNaN(vPos)) {if ((movedn!=0) && (vPos>0)) vPos=-100000vPos+= movedn}document.body.style.backgroundPosition= hPos + “ ” + vPosif (isNaN(hPos)) hPos = “”“ + hPos + ”“”if (isNaN(vPos)) vPos = “”“ + vPos + ”“”setTimeout(“moveback(”+movert+“,”+movedn+“,”+hPos+“,”+vPos+“)”,speed)}moveback(1,1,0,0, background);}//--></meta.>     

提示：您可以先修改部分代码再运行，复制代码和保存代码功能在Firefox下无效，

网页特效（背景特效代码）:斜向移动落叶背景

，