溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
<!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中已經存在的顏色
$('#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的元素,并設置背景色
$('.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>
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
