Home > Developer > JavaScript
Html code
Copy codeThe Code is as follows:
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Title> background switching </title>
<Link href = "css/bgchage.css" type = "text/css" rel = "Stylesheet"/>
</Head>
<Body>
<Div> <ul> <li> </ul> </ div>
<! -- <Div> 1 </div> <div> 2 </div> <div> 3 </div> <div> 4 </div> -->
</Body>
<Script src = "js/bgchage. js" type = "text/javascript"> </script>
</Html>
Because the javascript logic sequence is strong, consider referencing the js location.
Css code
Copy codeThe Code is as follows:
Body {font-size: 12px ;}
Div {width: 950px; height: 800px; margin: 0 auto; border: solid 1px # d0d0d0 ;}
Li {list-style-type: none; border: solid 1px # d0d0; float: left; margin: 1px; padding: 0 5px; height: 12px; width: 10px ;}
/* Div {width: 6px; height: 14px; margin: 1px; padding: 0 5px; float: left; border: solid 1px # d0d0d0 ;}*/
Javascript code:
Copy codeThe Code is as follows:
Window. onload = init;
Var element = document. getElementsByTagName ("li ");
Function init () // initialize the background color
{
Var element = document. getElementsByTagName ("li ");
For (var I = 0; I <4; I ++)
{
Var k = I + 1;
Element [I]. style. background = "url (images/" + k. toString () + ". jpg )";
}
}
Function addclick ()
{
For (var I = 0; I <4; I ++)
{
Var k = I + 1;
If (window. attachEvent)
Element [I]. attachEvent ("onclick", new Function ("bgchage (" + k + ");"); // you cannot directly create an event. onclick. attachEvent ("Event", new Function ("called Function (" + parameter + ");"); IE6 passes
Else
Element [I]. addEventListener ("click", new Function ("bgchage (" + k + ");"), false );
}
}
Function bgchage (t) // change the background color based on the Color Block
{
Document. getElementsByTagName ("body") [0]. style. background = "url (images/" + t + ". jpg )";
}
Addclick ();
The js part should pay attention to the compatibility of writing events. In fact, the idea of jq is to write many functions into plug-ins for your own use. It can be written in javascript to write your own class libraries for repeated use, and does not need to bear the burden of jquery class libraries. In fact, I am not saying that jquery is not good. In the big aspect, jquery's plug-in size does not have a big impact. The front-end events saw the videos of Baidu's front-end exchange meetings, I found that all other class libraries are written by js itself, which gave me the motivation to continue to learn about js.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
