Sometimes, we can provide users with very considerate functions, such as determining when the user will access the service, and then giving a greeting, such as good evening and good afternoon. In addition, you can change the background color of the webpage. For example, you can use the background of a star in the sky at night, the sun is shining during the day, or the background of the topic is used for a specific holiday, it makes your website very flexible and not boring.
The following describes how to implement background replacement:
How to Implement
The JQuery code is as follows:
Copy codeThe Code is as follows:
Function doChangeBkg ()
{
Var bkgUrl = $ ("# inputBkgUrl"). val ();
Var repeateMode = $ ("# inputRepeatMode"). val ();
Var s = "<style type = 'text/css '> body {background-repeat:" + repeateMode + "; background-image: url (\ "" + bkgUrl + "\") ;}</style> ";
$ ("# OutputDiv" ).html (s );
}
Native JavaScript code:
Copy codeThe Code is as follows:
Function doChangeBkg ()
{
Var bkgUrl = $ ("# inputBkgUrl"). val ();
Var repeateMode = $ ("# inputRepeatMode"). val ();
Var s = "<style type = 'text/css '> body {background-repeat:" + repeateMode + "; background-image: url (\ "" + bkgUrl + "\") ;}</style> ";
$ ("# OutputDiv" ).html (s );
}
Front-end code:
Copy codeThe Code is as follows:
<Div>
Background image URL: <input type = "text" size = "60" id = "inputBkgUrl"/> <br/>
Duplicate background image: <select id = "inputRepeatMode"> <option value = "repeat" selected = "selected"> repeat </option> <option value = "no-repeat"> no-repeat </option> <option value = "repeat-x"> repeat-x </option> <option value = "repeat-y"> repeat-y </option> </select>
<Input type = "button" onclick = "doChangeBkg ()" value = "Confirm replacement"/>
</Div>
<Div id = "outputDiv"> </div>