In the previous article , I mentioned that we should create multiple styles for my microblog and then randomly load the style on each visit to keep Weibo fresh. Although the idea and implementation are relatively simple, but still want to record down, and share with you.
"Clear Demand"
"The realization of ideas"
"Implementation Code"
Relatively simple, I will be directly attached to the code, which slightly commented:
var Init = {
// stylesheet file directory path
baseSkinUrl: "/ blog / css / skin /",
// style sheet file name list
styles: ["default", "skin1", "skin2", "skin3"],
// key value of style cookie
cookieKey: "css9_blog_random_css",
// Define the method to get a random number between min and max, including min and max
getRandomNum: function (min, max) {
return min + Math.floor (Math.random () * (max-min + 1));
},
// Define method to get cookie value
getCookie: function (name) {
var arr = document.cookie.match (new RegExp ("(^)" + name + "= ([^;] *) (; $)"));
if (arr! = null) {
return unescape (arr [2]);
}
return null;
},
// define method, set cookie value
setCookie: function (sName, sValue, objHours, sPath, sDomain, bSecure) {
var sCookie = sName + "=" + encodeURIComponent (sValue);
if (objHours) {
var date = new Date ();
var ms = objHours * 3600 * 1000;
date.setTime (date.getTime () + ms);
sCookie + = "; expires =" + date.toGMTString ();
}
if (sPath) {
sCookie + = "; path =" + sPath;
}
if (sDomain) {
sCookie + = "; domain =" + sDomain;
}
if (bSecure) {
sCookie + = "; secure";
}
document.cookie = sCookie;
},
// Define method to load CSS randomly by getting random numbers
loadCSS: function () {
var length = this.styles.length,
random = this.getRandomNum (0, length-1),
cookieStyle = this.getCookie (this.cookieKey),
currentStyle = "default";
// If the currently randomly obtained style is the same as the style in the cookie, recalculate the random number
while (this.styles [random] == cookieStyle)
{
random = this.getRandomNum (0, length-1)
}
currentStyle = this.styles [random];
// Save the new style in the cookie, the cookie is valid for 24 hours
this.setCookie (this.cookieKey, currentStyle, 24, "/", "css9.net", false);
// If the style name is not "default", write a custom style to the <head /> tag
if (currentStyle! = "default")
{
document.write ('<link rel = "stylesheet" type = "text / css"
href = "'+ this.baseSkinUrl + this.styles [random] +' .css" /> ');
}
}
}
Init.loadCSS (); // Perform random load CSS method
Save the above js code as an Init.js file and load the js file in <head />.
[View effect]
You can go to my micro-blog to check the effect. Multiple refreshes are better. There are only three styles now, and more styles will be added gradually in the future.
Tip: If you already use jquery in your webpage, you can use the jQuery cookie operation plug-in I introduced to realize the reading and writing of cookies without having to define the setCookie and getCookie methods in the code.
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
