一、网页换肤

<!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. Linux下ＤedeCMS详细安全设置

    经常会听到使用dedecms的站长抱怨,网站又被挂马了,dedecms真的很不安全.dedecms可能存在某些漏洞这不假,但主要责任真的是dedecms吗?我们知道,一个黑客想上传木马,首先得可以找到 ...

  2. [转自setting]神奇的jQuery

    前言 之前的项目也一直都是在用jQuery,遇到问题就翻翻API,也从来没有进行过比较系统的总结和整理.最近由于要做个培训,因为比较系统的归纳了一下javascript的相关知识,顺手做个笔记.说到j ...

  3. WebForm和MVC的一些知识（转）

    转自:http://www.cnblogs.com/liuhf939/p/3417203.html 比较WebForm和Mvc的请求处理方式 首先简单了解一下Asp.Net中怎么对页面进行请求处理的: ...

  4. linux -- Ubuntuserver图形界面下安装、配置lampp、phpmyadmin

    PHP开发和服务器运行环境首选LAMP组合,即Linux+Apache+Mysql+Php/Perl/Python,能最优化服务器性能.如何在本地电脑Ubuntu 中安装和配置LAMP环境搭建?Ubu ...

  5. Ajax分页(MVC下)(附源码,前后台)

    网上找的一个分页js,自己改了改.. 前台页面 @{ ViewBag.Title = "Index"; } <h1>分页方法封装</h1> <scri ...

  6. 【Java面试题】38 Collection 和 Collections的区别

    Collection是集合类的一个顶级接口,其直接继承接口有List与Set 而Collections则是集合类的一个工具类/帮助类,其中提供了一系列静态方法,用于对集合中元素进行排序.搜索以及线程安 ...

  7. <UIKit>关于剪贴板共享数据

     http://blog.sina.com.cn/s/blog_45e2b66c010102h9.html 上面这篇文章将剪贴板的使用方法基本上已经讲清楚了,参考这篇文章,再加上一个使用剪贴板共享数据 ...

  8. 【spring教程之中的一个】创建一个最简单的spring样例

    1.首先spring的主要思想,就是依赖注入.简单来说.就是不须要手动new对象,而这些对象由spring容器统一进行管理. 2.样例结构 如上图所看到的,採用的是mavenproject. 2.po ...

  9. 超全面的JavaWeb笔记day23<AJAX>

    AJAX AJAX概述 1 什么是AJAX AJAX(Asynchronous Javascript And XML)翻译成中文就是“异步Javascript和XML”.即使用Javascript语言 ...

  10. python2.0_s12_day9_协程&Gevent协程

    Python之路,Day9 - 异步IO\数据库\队列\缓存 本节内容 Gevent协程 Select\Poll\Epoll异步IO与事件驱动 Python连接Mysql数据库操作 协程 1.协程,又 ...