jQuery+cookie achieves skin change effect
This time I will bring you jQuery cookie to achieve the skin-changing effect. What are the precautions for jQuery cookie to achieve the skin-changing effect? The following is a practical case, let's take a look.
Skin change, you can always see these two words (also called skin) when you use QQ, browser, Kugou and other software. However, skin changing can indeed solve the tastes of many people. Skin changing may seem like an insignificant function, but it can actually attract users. Okay, without further ado, let’s start class. Attached is my code:<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>cookie的使用</title>
<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
<style>
.huanFu{
float:right;
}
.huanFu ul li{
width:30px;height:30px;
list-style:none;
margin:0 5px;
float:left;
cursor:pointer;
border:1px solid #000;
}
.fu1{background-color:#F00;}
.fu2{background-color:#0F0;}
.fu3{background-color:#00F;}
.fu4{background-color:#FF0;}
.huanFu ul li.select{border:3px solid #000;margin-top:-3px;}
</style>
<script>
$(function(){
var cookieClass=getCookie('class');//读取本地的Cookie
if(cookieClass){
$("body").attr("class",cookieClass);//把页面的背景恢复成Cookie保存的颜色
}else{
$("body").attr("class","fu1");
}
$(".huanFu ul li").on("click",function(){
$(this).addClass("select").siblings().removeClass("select");//标示出选中的样式
var fuName=$(this).attr("fuName");//取得class名。讲解:起了一个fuName属性,在里面存了fu1,现在取出来而已
$("body").attr("class",fuName);//改变body的class属性来达到背景换色的效果
function SetCookie(name,value,day){//三个传值,名字、值、保存天数
var exp = new Date();//取得本机当前时间(含日期)
exp.setTime(exp.getTime() + day*24*60*60*1000);//把天数变成毫秒保存起来
document.cookie = name + "="+ escape (value) + ";expires=" + exp.toGMTString();//以name=fu1;expires=Date {Thu Jun 26 2014 23:23:25 GMT+0800}这一长串的字符串保存到本机的cookie中
}
SetCookie("class",fuName,7);//设置Cookie过程
});
function getCookie(name){//读取本地的Cookie过程
var nameTit=name+"=";//此时的name值就是"class",nameTit="class="
var ca=document.cookie.split(';');//读取本地cookie的内容是"xxx.xxx;xxx.xxx",所以我们去掉';'后，它会以数组的形式保存入ca内。
for(var i=0;i<ca.length;i++){//循环ca数组
var c=ca[i];
while(c.charAt(0)==' '){//如果开头第一个字符是空格的话，读取就从第二位到最后一位
c=c.substring(1,c.length);
}
if(c.indexOf(nameTit)==0){//判断是否存在,并是否第一位开始的"class="
return c.substring(nameTit.length,c.length);//取得class=fu1中的"fu1"
}
return null;
}
}
});
</script>
</head>
<body class="fu1">
<p class="huanFu">
<ul>
<li class="fu1" fuName="fu1"></li>
<li class="fu2" fuName="fu2"></li>
<li class="fu3" fuName="fu3"></li>
<li class="fu4" fuName="fu4"></li>
</ul>
</p>
</body>
</html>jQuery determines whether to browse to the bottom of the web page
jquery selects the value in the drop-down box and counts it to the text box
The above is the detailed content of jQuery+cookie achieves skin change effect. For more information, please follow other related articles on the PHP Chinese website!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
1387
52
How to implement dual WeChat login on Huawei mobile phones?
Mar 24, 2024 am 11:27 AM
How to implement dual WeChat login on Huawei mobile phones? With the rise of social media, WeChat has become one of the indispensable communication tools in people's daily lives. However, many people may encounter a problem: logging into multiple WeChat accounts at the same time on the same mobile phone. For Huawei mobile phone users, it is not difficult to achieve dual WeChat login. This article will introduce how to achieve dual WeChat login on Huawei mobile phones. First of all, the EMUI system that comes with Huawei mobile phones provides a very convenient function - dual application opening. Through the application dual opening function, users can simultaneously
PHP Programming Guide: Methods to Implement Fibonacci Sequence
Mar 20, 2024 pm 04:54 PM
The programming language PHP is a powerful tool for web development, capable of supporting a variety of different programming logics and algorithms. Among them, implementing the Fibonacci sequence is a common and classic programming problem. In this article, we will introduce how to use the PHP programming language to implement the Fibonacci sequence, and attach specific code examples. The Fibonacci sequence is a mathematical sequence defined as follows: the first and second elements of the sequence are 1, and starting from the third element, the value of each element is equal to the sum of the previous two elements. The first few elements of the sequence
How to implement the WeChat clone function on Huawei mobile phones
Mar 24, 2024 pm 06:03 PM
How to implement the WeChat clone function on Huawei mobile phones With the popularity of social software and people's increasing emphasis on privacy and security, the WeChat clone function has gradually become the focus of people's attention. The WeChat clone function can help users log in to multiple WeChat accounts on the same mobile phone at the same time, making it easier to manage and use. It is not difficult to implement the WeChat clone function on Huawei mobile phones. You only need to follow the following steps. Step 1: Make sure that the mobile phone system version and WeChat version meet the requirements. First, make sure that your Huawei mobile phone system version has been updated to the latest version, as well as the WeChat App.
What should I do if win11 cannot use ie11 browser? (win11 cannot use IE browser)
Feb 10, 2024 am 10:30 AM
More and more users are starting to upgrade the win11 system. Since each user has different usage habits, many users are still using the ie11 browser. So what should I do if the win11 system cannot use the ie browser? Does windows11 still support ie11? Let’s take a look at the solution. Solution to the problem that win11 cannot use the ie11 browser 1. First, right-click the start menu and select "Command Prompt (Administrator)" to open it. 2. After opening, directly enter "Netshwinsockreset" and press Enter to confirm. 3. After confirmation, enter "netshadvfirewallreset&rdqu
How to implement exact division operation in Golang
Feb 20, 2024 pm 10:51 PM
Implementing exact division operations in Golang is a common need, especially in scenarios involving financial calculations or other scenarios that require high-precision calculations. Golang's built-in division operator "/" is calculated for floating point numbers, and sometimes there is a problem of precision loss. In order to solve this problem, we can use third-party libraries or custom functions to implement exact division operations. A common approach is to use the Rat type from the math/big package, which provides a representation of fractions and can be used to implement exact division operations.
Master how Golang enables game development possibilities
Mar 16, 2024 pm 12:57 PM
In today's software development field, Golang (Go language), as an efficient, concise and highly concurrency programming language, is increasingly favored by developers. Its rich standard library and efficient concurrency features make it a high-profile choice in the field of game development. This article will explore how to use Golang for game development and demonstrate its powerful possibilities through specific code examples. 1. Golang’s advantages in game development. As a statically typed language, Golang is used in building large-scale game systems.
PHP Game Requirements Implementation Guide
Mar 11, 2024 am 08:45 AM
PHP Game Requirements Implementation Guide With the popularity and development of the Internet, the web game market is becoming more and more popular. Many developers hope to use the PHP language to develop their own web games, and implementing game requirements is a key step. This article will introduce how to use PHP language to implement common game requirements and provide specific code examples. 1. Create game characters In web games, game characters are a very important element. We need to define the attributes of the game character, such as name, level, experience value, etc., and provide methods to operate these
How to cancel the automatic jump to Edge when opening IE in Win10_Solution to the automatic jump of IE browser page
Mar 20, 2024 pm 09:21 PM
Recently, many win10 users have found that their IE browser always automatically jumps to the edge browser when using computer browsers. So how to turn off the automatic jump to edge when opening IE in win10? Let this site carefully introduce to users how to automatically jump to edge and close when opening IE in win10. 1. We log in to the edge browser, click... in the upper right corner, and look for the drop-down settings option. 2. After we enter the settings, click Default Browser in the left column. 3. Finally, in the compatibility, we check the box to not allow the website to be reloaded in IE mode and restart the IE browser.
