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实现简易版的刮刮乐效果
Sep 27 HTML / CSS
CSS3教程(3):border-color网页边框色彩
Apr 02 HTML / CSS
分享CSS3中必须要知道的10个顶级命令
Apr 26 HTML / CSS
CSS3实现的文本3D效果附图
Sep 03 HTML / CSS
CSS3制作Dropdown下拉菜单的方法
Jul 18 HTML / CSS
CSS3绘制不规则图形的一些方法示例
Nov 07 HTML / CSS
CSS3实现时间轴特效
Nov 02 HTML / CSS
逼真的HTML5树叶飘落动画
Mar 01 HTML / CSS
html5超简单的localStorage实现记住密码的功能实现
Sep 07 HTML / CSS
Html5百叶窗效果的示例代码
Dec 11 HTML / CSS
canvas像素点操作之视频绿幕抠图
Sep 11 HTML / CSS
html5移动端自适应布局的实现
Apr 15 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 preg_match_all结合str_replace替换内容中所有img
2008/10/11 PHP
php计算十二星座的函数代码
2012/08/21 PHP
thinkphp中session和cookie无效的解决方法
2014/12/19 PHP
php的sso单点登录实现方法
2015/01/08 PHP
用php代码限制国内IP访问我们网站
2015/09/26 PHP
phpcms实现验证码替换及phpcms实现全站搜索功能教程详解
2017/12/13 PHP
JavaScript 对Cookie 操作的封装小结
2009/12/31 Javascript
js图片处理示例代码
2014/05/12 Javascript
Jquery修改页面标题title其它JS失效的解决方法
2014/10/31 Javascript
JQuery DIV 动态隐藏和显示的方法
2016/06/23 Javascript
很棒的js选项卡切换效果
2016/07/15 Javascript
封装的dialog插件 基于bootstrap模态对话框的简单扩展
2016/08/10 Javascript
浅谈jquery的html方法里包含特殊字符的处理
2016/11/30 Javascript
js实现适配不同的屏幕大小
2017/04/10 Javascript
vue中如何实现后台管理系统的权限控制的方法示例
2018/09/19 Javascript
原生js实现购物车功能
2020/09/23 Javascript
ssh批量登录并执行命令的python实现代码
2012/05/25 Python
Python通过90行代码搭建一个音乐搜索工具
2015/07/29 Python
python 实时遍历日志文件
2016/04/12 Python
Python redis操作实例分析【连接、管道、发布和订阅等】
2019/05/16 Python
python实现PCA降维的示例详解
2020/02/24 Python
Tensorflow实现将标签变为one-hot形式
2020/05/22 Python
python爬虫用scrapy获取影片的实例分析
2020/11/23 Python
CSS3 重置iphone浏览器按钮input,select等表单元素的默认样式
2014/10/11 HTML / CSS
全球虚拟主机商:HostGator
2017/02/06 全球购物
美国环保妈妈、儿童和婴儿用品购物网站:The Tot
2019/11/24 全球购物
加拿大著名的奢侈品购物网站:SSENSE(支持中文)
2020/06/25 全球购物
点菜员岗位职责范本
2014/02/14 职场文书
青年文明号服务承诺
2014/03/31 职场文书
音乐教育专业自荐信
2014/09/18 职场文书
异地年检委托书范本
2014/09/24 职场文书
2014年乡镇工作总结
2014/11/21 职场文书
学校拾金不昧表扬信
2015/01/16 职场文书
导游词之岳阳楼
2019/09/25 职场文书
vue如何清除浏览器历史栈
2022/05/25 Vue.js
python index() 与 rindex() 方法的使用示例详解
2022/12/24 Python