Phiên bản đầy đủ: jsB@nk » Biểu mẫu » Hộp đổi màu khi nhấp
URL: https://www.javascriptbank.com/animate-your-form-elements.html
Nút nhấn và các đối tượng biểu mẫu khác sẽ lần lượt đổi sang các màu khác nhau khi bạn nhấp chuột vào chúng trong hiệu ứng JavaScript này.
Phiên bản đầy đủ: jsB@nk » Biểu mẫu » Hộp đổi màu khi nhấp
URL: https://www.javascriptbank.com/animate-your-form-elements.html
<SCRIPT>// Animate your form elements///////////////////////////////////////////////////////////////////////////// CONFIGURATION STARTS HERE///////////////////////////////////////////////////////////////////////////// Choose a coloring effect by configuering the variable fade-effect below:// Set 1 if the background should fade from dark to medium and back to dark// Set 2 if the background should fade from light to medium and back to light// Set 3 if the background should fade from light to dark and back to light// Set 4 if the background should fade from light to very light and back to light// Set 5 if the background should fade from dark to very dark and back to darkvar fade_effect=4///////////////////////////////////////////////////////////////////////////// CONFIGURATION ENDS HERE///////////////////////////////////////////////////////////////////////////var eventobj=falsevar timervar previouscolorvar ns6=document.getElementById&&!document.allif (fade_effect==1) {var darkmax=1var lightmax=127}if (fade_effect==2) {var darkmax=127var lightmax=254}if (fade_effect==3) {var darkmax=1var lightmax=254}if (fade_effect==4) {var darkmax=180var lightmax=254}if (fade_effect==5) {var darkmax=1var lightmax=80}var hexc = new Array('0','1','2','3','4','5','6','7','8','9','A','B','C','D','E','F')var redrgb=lightmaxvar greenrgb=lightmaxvar bluergb=lightmaxvar redcol_1var redcol_2 var greencol_1 var greencol_2 var bluecol_1 var bluecol_2 var stepmax=15var stepred=Math.ceil(stepmax*Math.random())var stepgreen=Math.ceil(stepmax*Math.random())var stepblue=Math.ceil(stepmax*Math.random())function setrandomstep() {stepred=Math.ceil(stepmax*Math.random())stepgreen=Math.ceil(stepmax*Math.random())stepblue=Math.ceil(stepmax*Math.random())}function makedarker() {redrgb-=stepredgreenrgb-=stepgreenbluergb-=stepblueif (redrgb<darkmax) {redrgb=darkmax}if (greenrgb<darkmax) {greenrgb=darkmax}if (bluergb<darkmax) {bluergb=darkmax}if (redrgb>darkmax || greenrgb>darkmax || bluergb>darkmax) { redcol_1 = hexc[Math.floor(redrgb/16)]; redcol_2 = hexc[redrgb%16]; greencol_1 = hexc[Math.floor(greenrgb/16)]; greencol_2 = hexc[greenrgb%16]; bluecol_1 = hexc[Math.floor(bluergb/16)]; bluecol_2 = hexc[bluergb%16]; var backcolor="#"+redcol_1+redcol_2+greencol_1+greencol_2+bluecol_1+bluecol_2 eventobj.style.backgroundColor=backcolortimer=setTimeout("makedarker()",20); } else { clearTimeout(timer)setrandomstep()setTimeout("makelighter()",20) }}function makelighter() {redrgb+=stepredgreenrgb+=stepgreenbluergb+=stepblueif (redrgb>=lightmax) {redrgb=lightmax}if (greenrgb>=lightmax) {greenrgb=lightmax}if (bluergb>=lightmax) {bluergb=lightmax}if (redrgb<lightmax || greenrgb<lightmax || bluergb<lightmax) { redcol_1 = hexc[Math.floor(redrgb/16)]; redcol_2 = hexc[redrgb%16]; greencol_1 = hexc[Math.floor(greenrgb/16)]; greencol_2 = hexc[greenrgb%16]; bluecol_1 = hexc[Math.floor(bluergb/16)]; bluecol_2 = hexc[bluergb%16]; var backcolor="#"+redcol_1+redcol_2+greencol_1+greencol_2+bluecol_1+bluecol_2 eventobj.style.backgroundColor=backcolortimer=setTimeout("makelighter()",20); } else { clearTimeout(timer)setrandomstep()setTimeout("makedarker()",20) }}function animate(e) { if (document.all) { if (eventobj) { eventobj.style.backgroundColor=previouscolor } clearTimeout(timer) eventobj= event.srcElement previouscolor= eventobj.style.backgroundColor makedarker() }}function stopit() { if (document.all) { clearTimeout(timer) eventobj.style.backgroundColor=previouscolor }}</SCRIPT><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com--><INPUT onblur=stopit() onfocus=animate(event) style="FONT-SIZE: 8pt" type=button value="Test the highlight-animation on this button"><BR><BR><TEXTAREA cols=30 onblur=stopit() onfocus=animate(event) rows=4 style="FONT-SIZE: 8pt">Test the highlight-animation on this form element. Test the highlight-animation on this form element. Test the highlight-animation on this form element. </TEXTAREA><BR><BR><INPUT onblur=stopit() onfocus=animate(event) size=60 style="FONT-SIZE: 8pt" value="Test the highlight-animation on this textfield"><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->