利用重力传感器制作红包

来源：互联网发布：微信公众平台数据分析编辑：程序博客网时间：2024/05/07 15:57

我们都知道现在微信摇一摇功能，今天我就想写一个红包程序。

<!doctype html><html><head><meta charset="UTF-8"><title>demo</title></head><body><script>if(window.DeviceMotionEvent) { var speed = 25;//定义一个数值 var x = y = z = lastX = lastY = lastZ = 0;//重置所有数值 window.addEventListener('devicemotion', function(){ var acceleration =event.accelerationIncludingGravity;//将传感值赋给acceleration x = acceleration.x; y = acceleration.y; z = acceleration.z; if(Math.abs(x-lastX) > speed ) { //取绝对值；// TODO:在此处可以实现摇一摇之后所要进行的数据逻辑操作 //document.write(y);donghua(); } lastX = x; lastY = y; lastZ = z; }, false); } var f=1; function donghua(){ //动画事件 var a=document.getElementById("img2");a.style.animationName="first";a.style.animationDelay="0.5s";a.style.animationDuration="1s";}</script><style>.image{width:500px;height:800px;margin:0 auto;}#img2{width:500px;height:800px;}@keyframes first{0%{transform:rotate(0deg);}10%{transform:rotate(15deg);}20%{transform:rotate(30deg);}30%{transform:rotate(0deg);}40%{transform:rotate(-15deg);}50%{transform:rotate(-30deg);}70%{transform:rotate(0deg);}80%{transform:rotate(15deg);}90%{transform:rotate(30deg);}100%{transform:rotate(0deg);}}</style><div class="image"><img src="12-13.jpg" id="img2"  width="500" height="800"></div></body></html>

这些上面的就是我的代码，主要初步的实现了我们摇晃我们的设备产生效果，相当于利用一个监听器来实现功能。

0 0