HTML5新增了一些JavaScript API接口，比如地理定位、重力感应等。今天主要介绍devicemotion事件（设备事件），它提供设备的加速信息，表示为定义在设备上的坐标系。 本文给大家讲解了HTML5实现手机摇一摇的效果。 ? 手机摇一摇的实现思路： 1、检测设备是否支持重力传感； // 监听运动传感事件，查看是否支持硬件运动 if (window.DeviceMotionEvent) { alert("您的设备支持硬件调用 devicemotion', deviceMotionHandler, false); 3、根据devimotion事件对象，获取三个方向的重力加速度； /* * [deviceMotionHandler 摇一摇处理函数 if (speed > SHAKE_THRESHOLD) { alert("实现了摇一摇"); }; ?
话说，小程序也能做摇一摇功能，但好像没怎么看到过有什么小程序做了这个？（大家如果看到，可以留言推荐一下），按耐不住心中好奇心的花叔这两天研究了一下。 在说这之前，请允许我描述一下Nodes的新功能，因为由于这功能，花叔才萌生了研究小程序摇一摇的好奇心。 最近给Nodes加了个人首页”的功能，大致的功能点如下： ? 没错，演示的页面就是上面访问的那个页面，只要在那个页面进行摇一摇，就会随机出现其他用户的主页。 这里用了微信小程序的两个API： 加速度计API，用来模拟摇一摇的 音频api，用来播放音频的 代码怎么写？ 最后贴一段代码： //首先定义一下，全局变量 var lastTime = 0;//此变量用来记录上次摇动的时间 var x=0, y = 0, z=
代金券、腾讯视频VIP、QQ音乐VIP、QB、公仔等奖励等你来拿！
微信推出后，他的摇一摇功能非常的火爆，没事来微信摇一摇加加好友，我们可不可以借鉴一下微信的摇一摇功能，让手机访问网页的时候，只要手机摇一摇，网页背景就会自动随时换一个网页背景。 具体想要用摇一摇的功能思路已经确认的了，现在就是来实现代码的了。我们现在是用HTML5实现摇一摇的功能。 ，通过js来实现更多摇一摇的功能。 上面的代码是在html5下实现的。 下面我再分享另外一段js实现的方法，大家可以对比一下： 用javascript实现手机摇一摇 if(navigator.userAgent.indexOf('iPhone')>-1) { var
window.addEventListener('devicemotion',deviceMotionHandler,false); } //获取加速度信息 //通过监听X,Y,Z的变化率来判断是否大于摇晃的限制 //而为了防止误判，需要给该变化率设置一个合适的临界值。 lastX = x; lastY = y; lastZ = z; } } 代码实测 在安卓的微信网页内打开 未摇手机前 ： [image.png] 摇手机后： [image.png]
之前和一些人做了Android比较久的人聊天发现，自己在UI上或者整个APP的开发商一直有一些短板，因此从去年开始就陆陆续续自己倒腾个app来玩，历时半年多吧，断断续续也终于做出来个小玩意，分享一下。 摇吧简介 摇吧是子勰开发的一款基于手机摇一摇功能的小游戏或者游戏助手集合。目前摇吧已经支持骰子战争。摇吧中，所有游戏的使用方法都是摇一摇，打开手机摇一摇，体验摇吧带来的乐趣吧！
1、获取位置 HTML5地理位置API，允许js程序向浏览器询问用户的真实信息，移动端使用GPS获取的位置，非常精准。 2、摇一摇 微信活动页面经常有“摇一摇，拿好礼”，还有拼多多摇现金，摇一摇功能也非常常见。 HTML5 提供的 devicemotion 事件封装了设备的运动传感器，提供设备的加速度，还提供设备自转速率。对设备运动状态进行判断，就可以实现“摇一摇”效果。 监听手机加速度变化的事件： acceleration - 加速度 accelerationIncludingGravity - 重力加速度 rotationRate - 旋转速度 interval - 获取的时间间隔 摇一摇代码示例 +y + z - last_x - last_y - last_z) / diffTime * 10000; if (speed > SHAKE_THRESHOLD) { alert("摇一摇成功了
下面的代码主要控制手机摇晃的程度，在摇晃到一定成的时候，才会触发摇一摇回调，重点在于如何保证摇一摇的触发既不能太灵敏，也不能太迟钝。 下面代码的主要思路，是计算两次时间间隔之间摇晃的空间位置之间的直线距离，从而计算获得当前时间段内摇晃手机的速度，当这个速度达到一定的阈值，则认为出发了摇一摇的动作，反之则进行下一次的摇晃数据的采集。 上次触发Shake操作的时间 private long mLastShakeTime = 0L; private long mLastUpdateTime = 0L; // 摇晃的速度 private static int SPEED_SHAKE_MILLSECONDS = 400; // 两次摇晃的最小时间间隔 private static final int : " + speed); } } 摇一摇触发的效果： ?
概述 前面我们讲了如何开始微信小程序搭建和一些组件的介绍。微信小组件和微信小程序入门 微信小程序目录 为了更好的理解小程序和小程序开发，我们首先来看一下项目的目录。 我们接下来看一下page文件夹，可以看到每个页面需要包含两个文件，一个是js文件，是每个界面的入口，wxml的文件是每个界面的布局文件，wxss是样式文件。 ? 接下来看一下logs文件夹，在logs文件夹中比index文件夹中多出了一个logs.json的文件，logs.json这个文件配置了一个界面的title的信息。 为了更好的理解项目的结构，我们来一张gif图。 ? 摇一摇项目实例 我们首先看一下测试效果 ? 添加图片资源 ? index.wxss index.wxss 是整个小程序的样式表,如这个摇奖对应得摇一摇样式。对css熟悉的肯定不会陌生。
关于HTML5的基础，前一二年就已经有很多人写过很好的文章了。 HTML5-Canvas 关于HTML5 Canvas的基础教程 (原文HTML5 canvas - the basics) 在一些不支持flash的设备中，如果要使用网页需要对一些图表数据进行展示， 比如需要将股票价格的走势支持ipad、iphone等移动设备的访问，有一个基于prototype的插件可以满足类似的需求，官网网址>> 还有一个站点，针对canvas开发的一套完整的api，也是很强劲， 国外有一个网站，Simple 3D HTML5 canvas 有几个例子，3D效果都很逼真： http://sebleedelisle.com/demos/canvas3d/canvas3d2.html 越南“摇摇” JavaScript自画像 之前也在百度空间也发了一个用canvas写的“转盘”，点击在线预览示例效果： <input type="button" value="开始旋转" onclick
1摇一摇效果图 效果如下：界面有点丑，勿吐槽哈~关键是后面我们如何去实现这功能。 ? 3如何使用传感器 因为本文是为了实现一个仿微信摇一摇的功能，而实现这个功能用到的是加速度传感器。所以我们就以加速度传感器来讲解具体的实现过程。 作为程序员，直接上微信摇一摇的核心代码，相信可以更直接了当的介绍传感器的具体用法，程序中重点的语句，我也已经注释在代码后面。 @Override public void onSensorChanged(SensorEvent event) { //判断条件成功后，执行摇一摇的效果 onSensorChanged: "+x+":"+y+":"+z); if (x>10||y>10||z>10) { //摇一摇成功
然后，就祭出了程序员利器--Google，输入“iOS 后台 摇一摇”，只搜索出来的一个思路：利用 CoreMotion 框架，监听加速计原始数据，然后在 APP 退到后台后，可以实现监听摇一摇的效果。 也看到有人评论说 CoreMotion 的确可以实现跟系统摇一摇类似的效果，但是退到后台或锁屏后，没办法监听到摇一摇事件。 看到这条评论时，我不禁开始怀疑此功能是否真的可以被实现。 1s 后才继续响应下次摇一摇。） 后台定位权限 + 系统摇一摇，是否可行？ 经测试，还是不行。果然，系统摇一摇还是比较受限的，只能在前台回调。 此外，多 APP 都实现此功能时，摇一摇的效果是：只要摇动力度很大，加速计数据满足 APP 实现的摇一摇判定条件，就可以同时触发多个 APP 各自对应的效果。
创意来源 这个创意的来源，主要是年纪大了，过年肯定要给侄子侄女发红包，哈哈哈，这回金额可以他们自己摇出来，具有互动和随机性比较好玩，为新年增添一份乐趣！ 新年幸运签是给大家的祝福！ 新年也要动起来呀，刚好传统的摇签可以用手机摇一摇来模拟效果，活动手腕一举两得（真是个好点子啊）！ 安卓手机的小伙伴可以下载安装包 体验一把，我是停不下来！ 但是这就产生了一个问题，布局嵌套，所以这也是我为什么采用ConstraintLayout来实现的原因，如下图，只用了一层。 无限滑动的实现 数据源的第一位add最后一张图 val newList = arrayListOf<String>() newList.add(pic[pic.size-1]) 最后一位添加第一张图 for 我这里如上一条，设置了页面间距并且用到了缩放效果，那么来看一下具体代码。
1.1认识HTML5 html的版本: html4 Xhtml1.0 目前: html5是最高的版本 再怎么变化,无非是多了一些标签而已,但是不单单是提供了一些标签 比如: 开发网页游戏 我们可以开发网页版的游戏 ,结合Css3 ,但是是依托于Html5的 看三个例子: 摇一摇,小球转动,地图 1.2语法规范 07 音频&视频 图片也属于多媒体 html提供了一个标签来播放音乐 controls可以控制音量等,他是没有属性值的属性 loop 循环次数 不同的浏览区对音频的支持是不一样的 解决多种浏览器的支持问题 –浏览器不支持HTML5的音频播放–> 视频 浏览器不支持HTML5视频播放 IE浏览器不支持h5视频和音频的播放 多媒体: Flash插件 08 表单 H5在原来的基础上新增了东西 表单输入类型
从微信最近一些动作来看，2015年微信将围绕公众账号、摇一摇大做文章，最终目的则是让微信丰厚的流量得到变现机会，可以揣测，2015年微信将大力变现，努力成为腾讯新的现金牛。 微信摇一摇升级：可以摇到附近的商户 继公众平台支持评论之后，据腾讯内部人士爆料，微信最近又将迎来大版本，其中一个亮点便是可以搜索附近的商户，除了文字搜索之外，还可通过摇一摇搜索周边商户。 笔者了解到目前微信已与分众传媒战略合作，依靠分众全面部署iBeacon网络，支持微信摇一摇功能，用户只要在电梯口的分众广告电视前，可以通过摇一摇获取附近商户的大礼包。 摇一摇、微信红包和附近的人，这几个功能被糅合到一起，构建新的O2O营销模式。这个小功能，对于一向抵制营销的微信而言，是一个巨大的改变，并且只是微信O2O营销版图中的冰山一角。 搜索附近的商户、摇一摇附近的商户、与分众这类线下O2O广告营销平台合作，无异于给商户们打开一道新的流量入口。毫无疑问的是，这些流量对于商户而言依然需要付出成本，最终或许会成为微信营销广告平台的一部分。
云端获取和启用云服务器，并实时扩展或缩减云计算资源。云服务器 支持按实际使用的资源计费，可以为您节约计算成本。 腾讯云服务器（CVM）为您提供安全可靠的弹性云计算服务。只需几分钟，您就可以在云端获取和启用云服务器，并实时扩展或缩减云计算资源。云服务器 支持按实际使用的资源计费，可以为您节约计算成本。
扫码关注云+社区
领取腾讯云代金券
云服务器
测试服务 WeTest
文件存储
命令行工具
SSL 证书