一、网页换肤

<!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实现的一些效果的更多相关文章

  1. HTML5 模拟现实物理效果，感受 Web 技术魅力

    Ball Pool 是一个基于 HTML5 技术的实验,模拟现实物理效果,让你在 Web 中感受自然物体的运动.玩法介绍:可以随意拖动圆球.点击页面背景.晃动浏览器.双击页面背景或者按住鼠标左键,有不 ...

  2. HTML5大数据可视化效果（二）可交互地铁线路图

    前言 最近特别忙,承蒙大伙关照,3D机房的项目一个接着一个,领了一帮小弟,搞搞传帮带,乌飞兔走,转眼已经菊黄蟹肥……有个小弟很不错,勤奋好学,很快就把API都摸透了,自己折腾着做了个HTML5的魔都的 ...

  3. jq商品展示图放大镜 and 原生js和html5写的放大镜效果 ~~效果不错

    <!DOCTYPE HTML><html lang="en-US"><head> <meta charset="UTF-8&qu ...

  4. HTML5实现刮奖效果

    原文:HTML5实现刮奖效果 要实现刮奖效果,最重要的是要找到一种方法:当刮开上层的涂层是就能看到下层的结果.而HTML5的canvas API中有一个属性globalCompositeOperati ...

  5. 哇塞！HTML5 实现的雨滴效果 CSS发抖

    http://dreamsky.github.io/main/blog/rainy-day/ Rainy Day – 哇塞! HTML5 实现的雨滴效果 http://www.webhek.com/m ...

  6. html5实现烟花绽放效果

    来源地址:http://codepen.io/whqet/pen/Auzch 1.HTML5 你懂的,先看效果: 2.Html代码 <!-- setup our canvas element - ...

  7. HTML5 3D翻书效果(双面效应)

    最后使用HTML5翻书效果达到测试,比较简单,它的升级版是 最后一个问题: 1)后,原来的页面连环画将成为一面镜子 2)无法实现双面翻书. 3)明显感觉页面似有近遮挡标志. 这次的升级版本号实现过程比 ...

  8. HTML5 模拟现实物理效果

    Ball Pool 是一个基于 HTML5 技术的实验,模拟现实物理效果,让你在 Web 中感受自然物体的运动.玩法介绍:可以随意拖动圆球.点击页面背景.晃动浏览器.双击页面背景或者按住鼠标左键,有不 ...

  9. 基于HTML5 Canvas生成粒子效果的人物头像

    前面我们分享过一个HTML5 Canvas实现的图像马赛克模糊效果,HTML5处理图片真的非常简单.今天我们要再利用HTML5 Canvas实现一个粒子效果的人物头像,你可以任意选择一张头像图片,接下 ...

  10. HTML5大数据可视化效果（一）彩虹爆炸图

    前言 25年过去了,Brooks博士著名的“没有银弹”的论断依旧没有被打破.HTML5也是一样.但这并不妨碍HTML5是一个越来越有威力的“炸蛋”:发展迅速.势不可挡.随着HTML5技术的普及,用HT ...

随机推荐

  1. ThinkPHP3.2 介绍

    模块化 驱动化 为云平台而生ThinkPHP3.2正式版发布! ThinkPHP是国内领先的WEB应用开发框架,诞生于2006年初,在国内具有良好的口碑和广大的用户群,秉承了大道至简的开发理念,让WE ...

  2. 关于Cocos2d-x中MoveTo等动作位置坐标和setPosition的位置坐标的区别

    setPosition设置的坐标使用的是锚点的位置,会根据锚点的改变而有所不同 而MoveTo等动作位置坐标使用的是物体中心的位置,不受锚点的影响

  3. C# 如何使用NPOI操作Excel以及读取合并单元格等

    C#操作Excel方法有很多,以前用的需要电脑安装office才能用,但因为版权问题公司不允许安装office.所以改用NPOI进行Excel操作,基本上一些简单的Excel操作都没有问题,读写合并单 ...

  4. C# winform 获取当前路径

    // 获取程序的基目录. System.AppDomain.CurrentDomain.BaseDirectory// 获取模块的完整路径.System.Diagnostics.Process.Get ...

  5. （转）c++多态实现的机制

    原文地址:http://blog.csdn.net/zyq0335/article/details/7657465 1 什么是多态?多态性可以简单的概括为“1个接口,多种方法”,在程序运行的过程中才决 ...

  6. sdut2852 小鑫去爬山9dp入门)

    #include<stdio.h> int a[100][100]; int main() { int n; while(scanf("%d",&n)!=EOF ...

  7. PHP截断函数mb_substr()

    提示:mb_substr在于php中是默认不被支持的我们需要在在windows目录下找到php.ini打开编辑,搜索mbstring.dll,找到;extension=php_mbstring.dll ...

  8. java web - 为什么要使用spring struts

    1.软件里有很多优秀的框架,有一种类型的框架,它的特点是建立在一个现有技术的基础上,提供和现有技术一样业务功能的技术框架,这个新的技术框架比原技术更加易用,更加健壮同时功能更加强大,例如:jQuery ...

  9. 解决导入protobuf源代码Unity报错的问题

    将源代码导入Assets目录后, unity引擎会出现以下报错: 解决办法: 在 unity项目Assets目录中创建smcs.rsp文件,内容为-unsafe,其作用为可编译不安全代码.     然 ...

  10. 为什么MathType窗口变灰色

    mathtype是一个功能强大的数学公式编辑器,可以轻松输入各种复杂的公式和符号,与Office文档完美结合,显示效果超好,比Office自带的公式编辑器要强大很多.但我们在使用MathType编辑公 ...