码迷,mamicode.com
首页 > Web开发 > 详细

html5实现的一些效果

时间:2015-06-11 12:39:24      阅读:115      评论:0      收藏:0      [点我收藏+]

标签:

一、网页换肤

<!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>

 

html5实现的一些效果

标签:

原文地址:http://www.cnblogs.com/zhuiluoyu/p/4568735.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!