html5实现的一些效果

一、网页换肤

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>网页换肤</title>
		<script type="text/javascript">
		   
		    //检查浏览器是否支持localStorage

			if(typeof localStorage==='undefined'){
				window.alert("not support localStorage");				
			}else{
				window.alert("support localStorage");
				var storage = localStorage;
				//设置DIV背景颜色为红色,并保存localStorage
				function redSet(){
					var value = "red";
					document.getElementById("divblock").style.backgroundColor = value;
					window.localStorage.setItem("DivBackGroundColor",value);
				}
				
				function greenSet(){
					var value = "green";
					document.getElementById("divblock").style.backgroundColor = value;
					window.localStorage.setItem("DivBackGroundColor",value);
				}
				
				function blueSet(){
					var value = "blue";
					document.getElementById("divblock").style.backgroundColor = value;
					window.localStorage.setItem("DivBackGroundColor",value);
				}
				
				function colorload(){
					document.getElementById("divblock").style.backgroundColor = window.localStorage.getItem("DivBackGroundColor");
				}
			}
		</script>
	</head>
	<body onload="colorload()">
		<section id="main">
			<button id="redbutton" onclick="redSet()">红色</button>
			<button id="greenbutton" onclick="greenSet()">绿色</button>
			<button id="bluebutton" onclick="blueSet()">蓝色</button>
			<div id="divblock" style="width: 500px; height: 500px;"></div>
		</section>
	</body>
</html>

 

posted @ 2015-06-11 12:12  坠落鱼  阅读(314)  评论(0编辑  收藏  举报