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 ...
随机推荐
- eclipse-设置默认编码格式为UTF-8
需要设置的几处地方为: Window->Preferences->General ->Content Type->Text->JSP 最下面设置为UTF-8 Window ...
- JavaScript 关键字快速匹配
来源: http://www.cnblogs.com/index-html/archive/2013/04/17/js_keyword_match.html http://www.etherdream ...
- C++很“虚”
0引言:在学习C++时,碰到过以下四个以“虚”命名的概念,在系统理解这些高大上的术语后,才发现它们果真“名不虚传”. 为了方便捋清楚这些概念和之间的相互关系,本人对其进行了系统的总结,欢迎讨论. 1. ...
- VMware提示：已将该虚拟机配置为使用 64 位客户机操作系统。但是，无法执行 64 位操作。解决方案
新买了个笔记本,在学习大数据的时候装上VMWare,运行虚拟机发现提示无法执行64位操作.本人系统是win7,64位系统. 之后就是一顿度娘,发现千篇一律都是检测CPU支不支持虚拟化,支持的话去BIO ...
- Hibernate学习(1)：查询demo
1.数据库(mysql)创建脚本 DROP TABLE IF EXISTS role; CREATE TABLE IF NOT EXISTS `role`( `id` ) NOT NULL AUTO_ ...
- 父div高度不能自适应子div高度的解决方案
<div id="parent"><div id="content"> </div></div> 当conten ...
- VS2010配置HTML5智能提示
步骤: 1.首先去这里下载安装文件: http://visualstudiogallery.msdn.microsoft.com/d771cbc8-d60a-40b0-a1d8-f19fc393127 ...
- C#字符串二进制互换
static void Main(string[] args) { string str = "宋军辉"; Cons ...
- List 和 ObservableCollection的区别
在WPF中绑定一个集合的时候,比如:DataGrid.ItemsSource = new List<T>(); 这样的操作,会存在当数据行新增或者删除的时候不会得到及时的通知来刷新界面,而 ...
- java socket通信-传输文件图片--传输图片
ClientTcpSend.java client发送类 package com.yjf.test; import java.io.DataOutputStream; import java.io ...