您的位置：首页 > Web前端 > HTML5

html5实现的一些效果

2015-06-11 12:12 746 查看

一、网页换肤

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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航