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编写的的精美动画进度条(无flash/无图像/无脚本/附源码)
Jan 07 HTML / CSS
使用CSS3和Checkbox实现JQuery的一些效果
Aug 03 HTML / CSS
使用CSS3来匹配横屏竖屏的简单方法
Aug 04 HTML / CSS
分享一个H5原生form表单的checkbox特效代码
Feb 26 HTML / CSS
值得收藏的HTML5资源(学习html5的朋友可以收藏下)
Jul 20 HTML / CSS
html5 canvas里绘制椭圆并保持线条粗细均匀的技巧
Mar 25 HTML / CSS
canvas 下载二维码和图片加水印的方法
Mar 21 HTML / CSS
Html5应用程序缓存(Cache manifest)
Jun 04 HTML / CSS
手把手教你实现一个canvas智绘画板的方法
Mar 04 HTML / CSS
将SVG图引入到HTML页面的实现
Sep 20 HTML / CSS
CSS3实现的3D隧道效果
Apr 27 HTML / CSS
CSS实现鼠标悬浮动画特效
May 07 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
Zend Guard一些常见问题解答
2008/09/11 PHP
php数组相加 array(“a”)+array(“b”)结果还是array(“a”)
2012/09/19 PHP
PHP实现扎金花游戏之大小比赛的方法
2015/03/10 PHP
浅谈PHP中Stream(流)
2015/06/08 PHP
PHP将数据导出Excel表中的实例(投机型)
2017/07/31 PHP
js构造函数、索引数组和属性的实现方式和使用
2014/11/16 Javascript
JavaScript中的setUTCDate()方法使用详解
2015/06/11 Javascript
js window对象属性和方法相关资料整理
2015/11/11 Javascript
学习Angularjs分页指令
2016/07/01 Javascript
JavaScript计算值然后把值嵌入到html中的实现方法
2016/10/29 Javascript
RGB和YUV 多媒体编程基础详细介绍
2016/11/04 Javascript
js实现文字跑马灯效果
2017/02/23 Javascript
浅谈angular4 ng-content 中隐藏的内容
2017/08/18 Javascript
vue.js项目中实用的小技巧汇总
2017/11/29 Javascript
angular1.x ui-route传参的三种写法小结
2018/08/31 Javascript
Javascript中parseInt的正确使用方式
2018/10/17 Javascript
vue自定义js图片碎片轮播图切换效果的实现代码
2019/04/28 Javascript
vue实现直播间点赞飘心效果的示例代码
2019/09/20 Javascript
webgl实现物体描边效果的方法介绍
2019/11/27 Javascript
python文件和目录操作方法大全(含实例)
2014/03/12 Python
Python操作列表之List.insert()方法的使用
2015/05/20 Python
python中使用print输出中文的方法
2018/07/16 Python
对python xlrd读取datetime类型数据的方法详解
2018/12/26 Python
PyQt5的PyQtGraph实践系列3之实时数据更新绘制图形
2019/05/13 Python
如何不用安装python就能在.NET里调用Python库
2019/07/12 Python
Django框架视图函数设计示例
2019/07/29 Python
Django自定义模板过滤器和标签的实现方法
2019/08/21 Python
Pandas DataFrame中的tuple元素遍历的实现
2019/10/23 Python
Python图像阈值化处理及算法比对实例解析
2020/06/19 Python
python爬虫scrapy框架的梨视频案例解析
2021/02/20 Python
美国儿童服装、家具和玩具精品店:Maisonette
2019/11/24 全球购物
自考自我鉴定范文
2013/10/30 职场文书
土木工程师职业规划范文
2014/03/07 职场文书
中班开学寄语
2014/04/04 职场文书
竞选学生会主席演讲稿
2014/04/24 职场文书
2014年老干部工作总结
2014/11/21 职场文书