一、网页换肤

<!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. Just Cause系列游戏品鉴

    没错, 这又是一个游戏点评, 因为实在没地写了, 想起来我还欠JC系列许多售后评价, 就专门写了这篇blog来总结下JC系列的特色, 以及它最新的游戏引擎apex, JC4月初的时候发布的, 虽然和3 ...

  2. DataGridView使用技巧十：单元格表示值的自定义

    通过CellFormatting事件,可以自定义单元格的表示值.(比如:值为Error的时候,单元格被设定为红色) 示例: private void dgv_Users_CellFormatting( ...

  3. PHP中动态增加属性到对象

    参见: <深入PHP 面向对象.模式与实践>(第三版) [ matt zandstra ] - 3.2章节,设置类中的属性(p17)

  4. Go开发环境与LIteIDE安装、配置、搭建

    Go开发环境搭建 1.下载准备好安装包(Go-1.8.3.Git-2.9.2-64-bit) 下载链接:http://www.golangtc.com/download 2.配置环境变量 系统变量:新 ...

  5. javaScript之function定义

    背景知识 函数定义 在javaScript中,function的定义有3种: 1.匿名定义                function(){} 2.非匿名定义                fun ...

  6. Python python的输入输出

    #-*- coding:utf-8 -*- #屏蔽中文乱码方案一(官方推荐) #这个语句必须顶行写 #屏蔽中文乱码方案二(不建议使用) '''#coding=utf-8 ''' #input(),输入 ...

  7. 编译 & 执行 C++ 程序

    编译 & 执行 C++ 程序接下来让我们看看如何把源代码保存在一个文件中,以及如何编译并运行它.下面是简单的步骤: 打开一个文本编辑器,添加上述代码.保存文件为 hello.cpp.打开命令提 ...

  8. PHP 获取图像信息 getimagesize函数

    getimagesize() 函数用于获取图像大小及相关信息,成功返回一个数组,失败则返回 FALSE 并产生一条 E_WARNING 级的错误信息. 语法:array  getimagesize(s ...

  9. u3d读取xml txt

    u3d读取xml文件和u3d 读取txt外部文件 using UnityEngine;using System.Collections; using System.Xml;using System.X ...

  10. <iOS>一个开发中值得注意的细节

    UIScrollView有一个属性叫做scrollToTop,是个BOOL值,默认为YES. 它的作用是定义当前的这个UIScrollView的delegate<UIScrollViewDele ...