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 ...
随机推荐
- 一站式学习Wireshark（十）：应用Wireshark显示过滤器分析特定数据流（下）
介绍 掌握显示过滤器对于网络分析者来说是一项必备的技能.这是一项大海捞针的技巧.学会构建,编辑,保存关键的显示过滤器能够节省数小时的时间. 与捕捉过滤器使用的BPF语法不同,显示过滤器使用的是Wire ...
- CentOS6.5下安装Nexus
一.环境准备 (1) CentOS6.5 (2) nexus-latest-bundle.tar.gz 下载地址:http://www.sonatype.org/nexus/archived/ 二.安 ...
- ORA-12504 warning in PHP
<?php $conn = oci_connect('proekt', 'proekt1', 'localhost:1521'); $stid = oci_parse($conn, " ...
- [转]Handler学习笔记（二）
一.一个问题 有这样一个问题值得我们思考,若把一些类似于下载的功能(既耗时且不一定有结果)写在Activity(主线程)里,会导致Activity阻塞,长时间无响应,直至页面假死(如果5秒钟还没有完成 ...
- 转载------让IE6 IE7 IE8 IE9 IE10 IE11支持Bootstrap的解决方法
本文是转载及收藏 让IE6 IE7 IE8 IE9 IE10 IE11支持Bootstrap的解决方法 最近做一个Web网站,之前一直觉得bootstrap非常好,这次使用了bootstrap3,在c ...
- div 点击展开
<script type="text/javascript" src="http://libs.baidu.com/jquery/2.1.1/jquery.min. ...
- firefox插件之 vimperator 的使用
简介: vimperator 是 Firefox浏览器下的一个插件,可以让我们像使用vim 一样使用 firefox浏览器,高效畅快,不用鼠标了.它的官网为:http://www.vimperator ...
- Unity3d之Shader开发介绍
Shader是为渲染管线中的特定处理阶段提供算法的一段代码.shader是伴随着可编程渲染管线出现的,它的出现使得游戏开发者可以对渲染过程加以控制,拥有更大的创作空间,因此Shader的出现可以看作是 ...
- jquery.attach附件上传jquery插件
html: <!DOCTYPE html> <html lang="zh-cn"> <head> <meta http-equiv=&qu ...
- Visual Studio使用技巧，创建自己的代码片段
1.代码片段的使用示例 在编写代码中常会使用代码片段来提高我们的编写代码的效率,如:在Visual Studio中编写一个 for(int i = 0; i < length;i++) { } ...