{"id":3908,"date":"2016-01-13T07:37:49","date_gmt":"2016-01-13T07:37:49","guid":{"rendered":"http:\/\/www.hostingnotes.com\/?p=3908"},"modified":"2017-10-07T14:20:23","modified_gmt":"2017-10-07T14:20:23","slug":"background-effects-a-cool-javascript-tip","status":"publish","type":"post","link":"https:\/\/www.webdevelopersnotes.com\/background-effects-a-cool-javascript-tip","title":{"rendered":"Background effects &#8211; A cool JavaScript tip"},"content":{"rendered":"<p>Here is a cool Javascript tip that will change the background color over time. With a few modifications, you can use this tip to display all the colors of the rainbow in the background. This tip describes how to create a fading web page background.<\/p>\n<p><a href=\"\/\/www.webdevelopersnotes.com\/tips\/html\/background-effects-a-cool-javascript-tip.html\" target=\"_blank\">Click here to see this script in action<\/a><\/p>\n<p>Using the <span class=\"codeword\">bgColor<\/span> property of the JavaScript window object, we can change the background color. Here is the code:<\/p>\n<pre>\r\nvar c = new Array(\"00\", \"11\", \"22\", \"33\", \"44\", \"55\",\r\n\"66\", \"77\", \"88\", \"99\", \"AA\", \"BB\", \"CC\", \"DD\", \"EE\", \"FF\");\r\n\r\nx = 0;\r\n\r\nfunction bg_eff()\r\n   {\r\n   col_val = \"#FFFF\" + c[x];\r\n   document.bgColor=col_val;\r\n   x++;\r\n   if (x == 16)\r\n      {\r\n      clearInterval(change_bg);\r\n      }\r\n   }\r\n\r\nchange_bg = setInterval(\"bg_eff()\", 250);\r\n\r\n<\/pre>\n<p>The color values are stored in an array <strong>c<\/strong>. The function <span class=\"codeword\">bg_eff()<\/span> assigns a color value to variable <span class=\"codeword\"><strong>col_val<\/strong><\/span> and then sets the <span class=\"codeword\">bgColor<\/span> property to this value. The function is called after every 250 milliseconds using the <span class=\"codeword\">setInterval()<\/span> method. On each call to the function the value of variable <strong>x<\/strong> is increased by one. When <strong>x<\/strong> equals 15, the <span class=\"codeword\">clearInterval()<\/span> method is invoked that stops the <span class=\"codeword\">setInternval()<\/span> method.<\/p>\n","protected":false},"excerpt":{"rendered":"Here is a cool Javascript tip that will change the background color over time. With a few modifications, you can use this tip to display all the colors of the rainbow in the background. This tip describes how to create a fading web page background. Click here to see this script in action Using the [&hellip;]","protected":false},"author":1,"featured_media":20766,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[56],"tags":[],"class_list":["post-3908","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-javascript"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.webdevelopersnotes.com\/wp-json\/wp\/v2\/posts\/3908","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.webdevelopersnotes.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.webdevelopersnotes.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.webdevelopersnotes.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.webdevelopersnotes.com\/wp-json\/wp\/v2\/comments?post=3908"}],"version-history":[{"count":0,"href":"https:\/\/www.webdevelopersnotes.com\/wp-json\/wp\/v2\/posts\/3908\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.webdevelopersnotes.com\/wp-json\/wp\/v2\/media\/20766"}],"wp:attachment":[{"href":"https:\/\/www.webdevelopersnotes.com\/wp-json\/wp\/v2\/media?parent=3908"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.webdevelopersnotes.com\/wp-json\/wp\/v2\/categories?post=3908"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.webdevelopersnotes.com\/wp-json\/wp\/v2\/tags?post=3908"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}