一、网页换肤

<!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. Bootstrap3.0 栅格系统背后的精妙魔法(Bootstrap3.0的栅格布局系统实现原理)

    这个标题取的有点奇怪,怪我翻译的有问题吧.英文学平有限,有道词典和google翻译齐上阵是必须的.还好翻译的不是小说,对于技术文章,还是能勉强翻过来的. 本文主要讲解了Bootstrap3.0的栅格布 ...

  2. Xcode使用介绍

    ///// 应用程序文件的组织 Product Name:项目名字 Organization Name:组织机构名称 Company Identifier:公司唯一标识符 Bundle Identif ...

  3. EcmaScript对象克隆之谜

    先谈谈深拷贝 如何在js中获得一个克隆对象,可以说是喜闻乐见的话题了.相信大家都了解引用类型与基本类型,也都知道有种叫做深拷贝的东西,传说深拷贝可以获得一个克隆对象!那么像我这样的萌新自然就去学习了一 ...

  4. link_to和其对应要跳转的的url，用path和直接路由方法

    link_to和其对应要跳转的的url,用path和直接路由方法 看看link_to <% @order.each do |oo| %> <div> <%= oo.nam ...

  5. 在hibernate中查询单个对象的方法，get()、load()、

    查询单个对象可以直接通过Session对象来做到,其中session这个对象提过了2种获得单个对象的方法,一个是get方法和load方法,我去看这个两个方法的时候发现这两个方法的参数是一样的,使用方式 ...

  6. 使用 const 提高函数的健壮性

    使用 const  提高函数的健壮性 看到 const 关键字,C++程序员首先想到的可能是 const 常量.这可不是良好的条件 反射.如果只知道用 const 定义常量,那么相当于把火药仅用于制作 ...

  7. asp.net管线

  8. jquery-包裹元素

    1.wrap方法 在每个匹配的元素外层包上一个html元素 参数类型说明: 1)html字符串 $('p').wrap('<div></div>'); 传入的html标签也可以 ...

  9. 演示-JQuery关系选择器

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  10. ms-SQL 递归调用

    ----递归函数-------------------------------------------------------------------------- create function d ...