溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

jquery cookie插件輕松實(shí)現(xiàn)切換背景顏色

發(fā)布時(shí)間：2020-07-22 04:20:16 來(lái)源：網(wǎng)絡(luò) 閱讀：813 作者：大大果 欄目：web開發(fā)

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>更換背景顏色</title>

<style type="text/css">

#bg{width: 90%;height: 500px;background: rgba(0,0,0,.2);position: fixed;bottom: 10px;left: 0;right: 0;margin:auto;display: none;border: 5px solid #fff;}

.close{width: 30px;height: 30px;border: 2ps solid;line-height: 30px;text-align: center;color: #fff;background: #000;position: absolute;right: 0;top: 0;font-size: 25px;}

.color{width: 200px;height: 100px;border: 1px solid #fff;float: left;margin:20px 35px;line-height: 100px;text-align: center;color: #fff;font-size: 30px;}

</style>

<script src="jquery-1.12.4.js"></script>

<script src="jquery.cookie.js"></script>

<script type="text/javascript">

$(function(){

var bgcolor = $.cookie('bgcolor');  //從cookie中讀取背景顏色

if(bgcolor){

document.body.style.backgroundColor = bgcolor; //顯示cookie中已經(jīng)存在的顏色

$('#bg').css('backgroundColor','rgba(255,255,255,.7)');  //將id為bg的div背景色改為半透明的白色

}

$('#btn').on('click',function(){

$('#bg').show();

});

$('.close').on('click',function(){

$('#bg').hide();

});

//獲取class為color的元素,并設(shè)置背景色

$('.color').each(function(index,element){

var bgcolor = $(element).text();

$(this).css('backgroundColor',bgcolor);

$(element).on('click',function(){

document.body.style.backgroundColor = bgcolor;

$.cookie('bgcolor',bgcolor,{'expires':30,'path':'/'});

});

});

});

</script>

</head>

<body>

<button id="btn">切換皮膚</button>

<div id="bg">

<span class="color">green</span>

<span class="color">red</span>

<span class="color">yellow</span>

<span class="color">blue</span>

<span class="color">lightgreen</span>

<span class="color">pink</span>

<span class="color">orange</span>

<span class="color">gold</span>

<span class="color">purple</span>

<strong class="close">×</strong>

</div>

</body>

</html>


附件：http://down.51cto.com/data/2368259
向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手