html5 利用重力感应实现摇一摇换颜色可用来做抽奖等等


Posted in HTML / CSS onMay 07, 2014

我从网上找到了一个案例,是用来摇一摇换颜色的,非常好用,不过测试后,需要注意的有:

1、必须要ios或者是安卓4.0以上的才能实现功能应用。

2、如果加如z坐标的判断,就会出现屏幕乱变颜色的情况,估计太敏感了…………或者是没找到对的用法,希望大家能给指正

3、这个功能稍微改改,就可以变成抽奖的方法,比大转盘、刮刮卡要时尚些,哈哈

复制代码
代码如下:

<script type="text/javascript">
var color = new Array('red', 'blue', 'yellow', 'green', '#00f', '#0ff');
if(window.DeviceMotionEvent) {
var speed = 25;
var x = y = z = lastX = lastY = lastZ = 0;
window.addEventListener('devicemotion', function(){
var acceleration =event.accelerationIncludingGravity;
x = acceleration.x;
y = acceleration.y;
//z = acceleration.z;
if(Math.abs(x-lastX) > speed || Math.abs(y-lastY) > speed ) {
document.body.style.backgroundColor = color[Math.round(Math.random()*10)%6];
}
lastX = x;
lastY = y;
//lastZ = z;
}, false);
}
</script>
HTML / CSS 相关文章推荐
非常震撼的纯CSS3人物行走动画
Feb 24 HTML / CSS
css sprite简单实例
May 23 HTML / CSS
关于HTML5的安全问题开发人员需要牢记的
Jun 21 HTML / CSS
html5构建触屏网站之touch事件介绍
Jan 07 HTML / CSS
浅谈基于HTML5的在线视频播放方案
Feb 18 HTML / CSS
html5 div布局与table布局详解
Nov 16 HTML / CSS
浅析HTML5:'data-'属性的作用
Jan 23 HTML / CSS
详解android与HTML混合开发总结
Jun 06 HTML / CSS
html5的pushstate以及监听浏览器返回事件的实现
Aug 11 HTML / CSS
HTML5中input输入框默认提示文字向左向右移动的示例代码
Sep 10 HTML / CSS
HTML5 drag和drop具体使用详解
Jan 18 HTML / CSS
CSS使用SVG实现动态分布的圆环发散路径动画
Dec 24 HTML / CSS
HTML5资源预加载(Link prefetch)详细介绍(给你的网页加速)
May 07 #HTML / CSS
HTML5中5个简单实用的API(第二篇,含全屏、可见性、拍照、预加载、电池状态)
May 07 #HTML / CSS
html5 datalist标签使用示例(自动完成组件)
May 04 #HTML / CSS
HTML5 visibilityState属性详细介绍和使用实例
May 03 #HTML / CSS
HTML5中判断用户是否正在浏览页面的方法
May 03 #HTML / CSS
在HTML5 Canvas中放入图片和保存为图片的方法
May 03 #HTML / CSS
HTML5 Canvas+JS控制电脑或手机上的摄像头实例
May 03 #HTML / CSS
You might like
PHP 5.3.0 安装分析心得
2009/08/07 PHP
Windows下安装Memcached的步骤说明
2010/04/25 PHP
基于Snoopy的PHP近似完美获取网站编码的代码
2011/10/23 PHP
PHP经典面试题集锦
2015/03/19 PHP
php递归实现无限分类的方法
2015/07/28 PHP
CentOS系统中PHP安装扩展的方式汇总
2017/04/09 PHP
PHP创建XML接口示例
2019/07/04 PHP
JS仿flash上传头像效果实现代码
2011/07/18 Javascript
Extjs表单常见验证小结
2014/03/07 Javascript
jQuery使用removeClass方法删除元素指定Class的方法
2015/03/26 Javascript
jquery.validate提示错误信息位置方法
2016/01/22 Javascript
nginx+vue.js实现前后端分离的示例代码
2018/02/12 Javascript
基于JavaScript实现一个简单的Vue
2018/09/26 Javascript
使用layui前端框架弹出form表单以及提交的示例
2019/10/25 Javascript
vue学习笔记之给组件绑定原生事件操作示例
2020/02/27 Javascript
JS实现随机点名器
2020/04/12 Javascript
python实现封装得到virustotal扫描结果
2014/10/05 Python
Python守护进程(daemon)代码实例
2015/03/06 Python
Python贪心算法实例小结
2018/04/22 Python
python3写的简单本地文件上传服务器实例
2018/06/04 Python
python逆序打印各位数字的方法
2018/06/25 Python
对numpy下的轴交换transpose和swapaxes的示例解读
2019/06/26 Python
python使用多线程编写tcp客户端程序
2019/09/02 Python
keras 简单 lstm实例(基于one-hot编码)
2020/07/02 Python
css3 按钮 利用css3实现超酷下载按钮
2013/03/18 HTML / CSS
Html5自定义字体解决方法
2019/10/09 HTML / CSS
美丽的现代设计家具:2Modern
2018/07/26 全球购物
巴西Mr. Cat在线商店:购买包包和鞋子
2019/09/08 全球购物
英国男女豪华配饰和礼品网站:Black.co.uk
2020/02/28 全球购物
戴尔新加坡官网:Dell Singapore
2020/12/13 全球购物
中专生职业生涯规划书范文
2013/12/29 职场文书
《我要的是葫芦》教学反思
2014/02/23 职场文书
网络营销计划
2015/01/17 职场文书
电影地道战观后感
2015/06/04 职场文书
高中体育课教学反思
2016/02/16 职场文书
SQL之各种join小结详细讲解
2021/08/04 MySQL