一、网页换肤

<!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. libtommath.a: could not read symbols: Bad value 编译错误

    最近做个项目需要RSA,便调用了tommath,平时开发环境都在32位的系统上,编译运行一切都没问题,但当把程序换到一台64位系统上编译时出现: /usr/bin/ld: /usr/lib/gcc/x ...

  2. [转]Hash碰撞冲突解决方法总结

    我们知道,对象Hash的前提是实现equals()和hashCode()两个方法,那么HashCode()的作用就是保证对象返回唯一hash值,但当两个对象计算值一样时,这就发生了碰撞冲突.如下将介绍 ...

  3. [LintCode]删除链表中的元素

    问题分析: 声明当前指针和上一个指针即可. 问题求解: public class Solution { public ListNode removeElements(ListNode head, in ...

  4. 关于Unity中的NGUI和UGUI

    一.用Unity开发2D游戏,有三套关系 1.GUI:Unity本身自带的GUI 2.NGUI:以前在Unity中广泛来做2D的,是第三方的包,需要安装 3.UGUI:Unity5.X后(其实是Uni ...

  5. selenium测试（Java）（三）

    控制浏览器: http://www.cnblogs.com/moonpool/p/5657752.html

  6. Eclipse 调试总进入Spring代理的解决办法

    一直都是跳入代理类中,手动切换查看内容,还以为别人也是这样,结果被告知不是.瞬间囧囧. 搜了一番,看起来有两个办法. 第一个:使用step filter,过滤掉不需要的package.--未测试 第二 ...

  7. 转载：QT QTableView用法小结

    出自: http://blog.chinaunix.net/uid-20382483-id-3518513.html QTableView常用于实现数据的表格显示.下面我们如何按步骤实现学生信息表格: ...

  8. js得到当前文档的编码：document.characterSet

    <!DOCTYPE HTML> <html > <head> <meta charset="utf-8"> <!--meta ...

  9. [Java并发包学习七]解密ThreadLocal

    概述 相信读者在网上也看了非常多关于ThreadLocal的资料,非常多博客都这样说:ThreadLocal为解决多线程程序的并发问题提供了一种新的思路:ThreadLocal的目的是为了解决多线程訪 ...

  10. 五步让你玩转CocoaPods

    1 安装和升级 $ sudo gem install cocoapods  $ pod setup 2 更换为taobao的源 $ gem sources -r https://rubygems.or ...