html5实现的一些效果
一、网页换肤
<!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实现的一些效果的更多相关文章
- HTML5 模拟现实物理效果，感受 Web 技术魅力
Ball Pool 是一个基于 HTML5 技术的实验,模拟现实物理效果,让你在 Web 中感受自然物体的运动.玩法介绍:可以随意拖动圆球.点击页面背景.晃动浏览器.双击页面背景或者按住鼠标左键,有不 ...
- HTML5大数据可视化效果（二）可交互地铁线路图
前言 最近特别忙,承蒙大伙关照,3D机房的项目一个接着一个,领了一帮小弟,搞搞传帮带,乌飞兔走,转眼已经菊黄蟹肥……有个小弟很不错,勤奋好学,很快就把API都摸透了,自己折腾着做了个HTML5的魔都的 ...
- jq商品展示图放大镜 and 原生js和html5写的放大镜效果 ~~效果不错
<!DOCTYPE HTML><html lang="en-US"><head> <meta charset="UTF-8&qu ...
- HTML5实现刮奖效果
原文:HTML5实现刮奖效果 要实现刮奖效果,最重要的是要找到一种方法:当刮开上层的涂层是就能看到下层的结果.而HTML5的canvas API中有一个属性globalCompositeOperati ...
- 哇塞！HTML5 实现的雨滴效果 CSS发抖
http://dreamsky.github.io/main/blog/rainy-day/ Rainy Day – 哇塞! HTML5 实现的雨滴效果 http://www.webhek.com/m ...
- html5实现烟花绽放效果
来源地址:http://codepen.io/whqet/pen/Auzch 1.HTML5 你懂的,先看效果: 2.Html代码 <!-- setup our canvas element - ...
- HTML5 3D翻书效果(双面效应)
最后使用HTML5翻书效果达到测试,比较简单,它的升级版是 最后一个问题: 1)后,原来的页面连环画将成为一面镜子 2)无法实现双面翻书. 3)明显感觉页面似有近遮挡标志. 这次的升级版本号实现过程比 ...
- HTML5 模拟现实物理效果
Ball Pool 是一个基于 HTML5 技术的实验,模拟现实物理效果,让你在 Web 中感受自然物体的运动.玩法介绍:可以随意拖动圆球.点击页面背景.晃动浏览器.双击页面背景或者按住鼠标左键,有不 ...
- 基于HTML5 Canvas生成粒子效果的人物头像
前面我们分享过一个HTML5 Canvas实现的图像马赛克模糊效果,HTML5处理图片真的非常简单.今天我们要再利用HTML5 Canvas实现一个粒子效果的人物头像,你可以任意选择一张头像图片,接下 ...
- HTML5大数据可视化效果（一）彩虹爆炸图
前言 25年过去了,Brooks博士著名的“没有银弹”的论断依旧没有被打破.HTML5也是一样.但这并不妨碍HTML5是一个越来越有威力的“炸蛋”:发展迅速.势不可挡.随着HTML5技术的普及,用HT ...
随机推荐
- PHP变量解析顺序variables_order
转载自:http://blog.csdn.net/knight0450/article/details/4291556 故事从一个有点诡异的BUG开始,后台一个使用频率不是很高的广告提交功能有时候会莫 ...
- libmysqlclient16 libmysqlclient-dev
如果提示安装 libmysqlclient16 则用 libmysqlclient-dev 代替之
- js学习笔记31----工厂方式
工厂方式构造对象: 1.原料---构造函数,创建一个对象 “构造函数”,就是专门用来生成“对象”的函数.它提供模板,作为对象的基本结构.一个构造函数,可以生成多个对象,这些对象都有相同的结构. 2 ...
- js学习笔记29----拖拽
原理:先计算鼠标与拖拽目标的左侧距离 跟 上面距离,再计算拖动后的位置. 示例代码: <!DOCTYPE html> <html lang="en"> &l ...
- UML总结---UML中的事物和关系
UML中的事物 名称 说明 图形 类 相同属性方法的集合 接口 类或组件提供的,可以完成特定功能的一组操作的集合 协作 合作的动作 用例 系统的一个功能 节点 代表可计算的资源 活动类 有多个线程的类 ...
- ZooKeeper源码分析：Quorum请求的整个流程(转)
Quorum请求是转发给Leader处理,并且需要得一个Follower Quorum确认的请求.这些请求包括: 1)znode的写操作(OpCode.create,OpCode.delete,OpC ...
- c网络编程-多播
/* 编译通过环境,Windows XP sp2,Windows 2003 server SDK,VC++6.0 sp5. */ /********************************** ...
- Making the iPhone vibrate (iPhone 振动)
from: http://stackoverflow.com/a/4725039 There are two seemingly similar functions that take a param ...
- Unity获取指定资源目录下的所有文件
使用前需要引入System.IO;这个命名空间 public void GetFiles() { //路径 //string path = string.Format("{0}", ...
- C#委托和事件定义和使用
委托 定义委托的语法和定义方法比较相似,只是比方法多了一个关键字delegate ,我们都知道方法就是将类型参数化,所谓的类型参数化就是说该方法接受一个参数,而该参数是某种类型的参数,比如int.st ...