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制作3D效果文字具体实现样式
May 02 HTML / CSS
CSS3制作ajax loader icon实现思路及代码
Aug 25 HTML / CSS
纯CSS实现设置半个字符的样式
Jul 03 HTML / CSS
IE8下CSS3选择器nth-child() 不兼容问题的解决方法
Nov 16 HTML / CSS
详解FireFox下Canvas使用图像合成绘制SVG的Bug
Jul 10 HTML / CSS
仿酷狗html5手机音乐播放器主要部分代码
May 15 HTML / CSS
HTML5 Canvas阴影使用方法实例演示
Aug 02 HTML / CSS
html5跨域通讯之postMessage的用法总结
Nov 07 HTML / CSS
整理HTML5的一些新特性与Canvas的常用属性
Jan 29 HTML / CSS
浅谈html5增强的页面元素
Jun 14 HTML / CSS
基于html5 canvas做批改作业的小插件
May 20 HTML / CSS
解决flex布局中子项目尺寸不受flex-shrink限制
May 11 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实现微信网页授权开发教程
2016/01/19 PHP
php实现简单加入购物车功能
2017/03/07 PHP
Mac系统下安装PHP Xdebug
2018/03/30 PHP
laravel框架中视图的基本使用方法分析
2019/11/23 PHP
gearman管理工具GearmanManager的安装与php使用方法示例
2020/02/27 PHP
prototype1.4中文手册
2006/09/22 Javascript
js 蒙版进度条(结合图片)
2010/03/10 Javascript
js获取图片大小的函数代码
2011/09/20 Javascript
侧栏跟随滚动的简单实现代码
2013/03/18 Javascript
JQuery中的事件及动画用法实例
2015/01/26 Javascript
简单介绍JavaScript中字符串创建的基本方法
2015/07/07 Javascript
JS深度拷贝Object Array实例分析
2016/03/31 Javascript
js获取上传文件的绝对路径实现方法
2016/08/02 Javascript
select隐藏选中值对应的id,显示其它id的简单实现方法
2016/08/25 Javascript
input获取焦点时底部菜单被顶上来问题的解决办法
2017/01/24 Javascript
Vue.js实现表格渲染的方法
2018/09/07 Javascript
mpvue将vue项目转换为小程序
2018/09/30 Javascript
JS实现计算小于非负数n的素数的数量算法示例
2019/02/26 Javascript
nodejs中实现修改用户路由功能
2019/05/24 NodeJs
Vuex模块化应用实践示例
2020/02/03 Javascript
12个Python程序员面试必备问题与答案(小结)
2019/06/24 Python
python实现切割url得到域名、协议、主机名等各个字段的例子
2019/07/25 Python
python使用writerows写csv文件产生多余空行的处理方法
2019/08/01 Python
python初步实现word2vec操作
2020/06/09 Python
Python 常用日期处理 -- calendar 与 dateutil 模块的使用
2020/09/02 Python
荷兰多品牌网上鞋店:Stoute Schoenen
2017/08/24 全球购物
C#如何进行LDAP用户校验
2012/11/21 面试题
医院护士求职自荐信格式
2013/09/21 职场文书
《燕子》教学反思
2014/02/18 职场文书
文秘求职信范文
2014/04/10 职场文书
建筑工程技术专业求职信
2014/07/16 职场文书
三关爱志愿服务活动方案
2014/08/17 职场文书
小王子读书笔记
2015/06/29 职场文书
总结Python变量的相关知识
2021/06/28 Python
Java Socket实现多人聊天系统
2021/07/15 Java/Android
Python 的演示平台支持 WSGI 接口的应用
2022/04/20 Python