摇一摇——类似微信摇一摇功能
微信活动页面经常有“摇一摇,拿好礼”,还有拼多多摇现金,摇一摇功能也非常常见。HTML5 提供的 devicemotion 事件封装了设备的运动传感器,提供设备的加速度,还提供设备自转速率。对设备运动状态进行判断,就可以实现“摇一摇”效果。
devicemotion 监听手机加速度变化的事件:
acceleration - 加速度
accelerationIncludingGravity - 重力加速度
rotationRate - 旋转速度
interval - 获取的时间间隔
摇一摇代码示例:
var shake_threshold = 4000; //放一移动的干扰,设置一个临界值
/* 使用之前先检查浏览器是否支持 */
if(window.DeviceMotionEvent){
/* 添加事件 */
window.addEventListener('devicemotion',function(eventData){
var acceleration =eventData.accelerationIncludingGravity;
var curTime = new Date().getTime();
if ((curTime-last_update)> 10) {
var diffTime = curTime -last_update;
last_update = curTime;
x = acceleration.x;
y = acceleration.y;
z = acceleration.z;
var speed = Math.abs(x +y + z - last_x - last_y - last_z) / diffTime * 10000;
if (speed > SHAKE_THRESHOLD) {
alert("摇一摇成功了!"); // Do something
}
}
})
}
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 震惊!C++程序真的从main开始吗?99%的程序员都答错了
· 别再用vector<bool>了!Google高级工程师:这可能是STL最大的设计失误
· 单元测试从入门到精通
· 【硬核科普】Trae如何「偷看」你的代码?零基础破解AI编程运行原理
· 上周热点回顾(3.3-3.9)