html5 摇一摇

最新推荐文章于 2021-06-23 06:46:28 发布
最新推荐文章于 2021-06-23 06:46:28 发布
阅读量1.1k 收藏
点赞数
分类专栏： web
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zxlstudio/article/details/42874461
版权 
<!DOCTYPE html>  
  
<html lang="en">  
<head>  
    <meta charset="utf-8" />  
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />  
    <title>摇一摇功能</title>  
    <style>
		body{background:#000;}
    	.hand { width: 190px; height: 300px; background: url(http://www.w3cfuns.com/data/attachment/album/201501/08/105656rplil892bx2l33r9.png) no-repeat;
		 margin:40px auto; }
    	.hand-animate { -webkit-animation: hand_move infinite 2s; }
		 @-webkit-keyframes hand_move {
        0% {
            -webkit-transform: rotate(0);
               -moz-transform: rotate(0);
                -ms-transform: rotate(0);
                 -o-transform: rotate(0);
                    transform: rotate(0); }
        50% {
            -webkit-transform: rotate(15deg);
               -moz-transform: rotate(15deg);
                -ms-transform: rotate(15deg);
                 -o-transform: rotate(15deg);
                    transform: rotate(15deg); }
        100% {
            -webkit-transform: rotate(0);
               -moz-transform: rotate(0);
                -ms-transform: rotate(0);
                 -o-transform: rotate(0);
                    transform: rotate(0); }
    }
	.hand_one{margin:0 auto;color:#fff;font-size:24px;display:block;width:200px;}
	.fall{margin:0 auto;color:#f99;font-size:24px;display:block;width:220px;}	
	.loading { position: absolute; top: 270px; left: 50%; margin-left: -50px; width: 100px; height: 100px; 
	background: url(http://www.w3cfuns.com/data/attachment/album/201501/08/105657t5bk4va85qnci55v.png) no-repeat; background-size: 100px 100px; opacity: 0;
        -webkit-animation: loading infinite linear .5s;
           -moz-animation: loading infinite linear .5s;
            -ms-animation: loading infinite linear .5s;
             -o-animation: loading infinite linear .5s;
                animation: loading infinite linear .5s;
        -webkit-transition: all .5s;
           -moz-transition: all .5s;
            -ms-transition: all .5s;
             -o-transition: all .5s;
                transition: all .5s; }
    .loading-show { opacity: 1; }
	@-webkit-keyframes loading {
        0% {
            -webkit-transform: rotate(0);
               -moz-transform: rotate(0);
                -ms-transform: rotate(0);
                 -o-transform: rotate(0);
                    transform: rotate(0); }
        100% {
            -webkit-transform: rotate(360deg);
               -moz-transform: rotate(360deg);
                -ms-transform: rotate(360deg);
                 -o-transform: rotate(360deg);
                    transform: rotate(360deg); }
    }
    </style> 
</head>  
<body οnlοad="init()">  
<p class="hand_one">喵~试试手气呦！</p>  
<div id="hand" class="hand hand-animate"></div>
<div id="loading" class="loading"></div>
<div id="fall" class="fall"></div>
</body>  
</html>  
<script>
	var SHAKE_THRESHOLD = 400;
        var last_update = 0;
		var index=0;
        var x = y = z = last_x = last_y = last_z = 0;
		var w_curTime=0;
        function init() {
            if (window.DeviceMotionEvent) {
                window.addEventListener('devicemotion', deviceMotionHandler, false);
            } else {
                alert('not support mobile event');
            }
        }
        function deviceMotionHandler(eventData) {
			
            var acceleration = eventData.accelerationIncludingGravity;
            var curTime = new Date().getTime();
            if ((curTime - last_update) > 100) {
                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) { 					
					if((curTime-w_curTime)>2000){						
						w_curTime!=0 && doResult();
					 	w_curTime=curTime;															
					} 
				   
                }
                last_x = x;
                last_y = y;
                last_z = z;
            }
        }
		 function doResult() {			
		 	document.getElementById("fall").innerHTML="";
			document.getElementById("loading").className = "loading loading-show";
			setTimeout(function(){
				index=parseInt(Math.random()*2);//parseInt(Math.random()*(上限-下限+1)+下限); 											
				if(index==0){
						document.getElementById("fall").innerHTML="恭喜您，中奖了！！";					
					}else{
						document.getElementById("fall").innerHTML="再试试呦！！";								
					}
				
				document.getElementById("loading").className = "loading";
			}, 1000);
    }
</script>

a771948524
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html5 利用重力感应实现摇一摇，可以用来做抽奖等等
lishangua的专栏
04-15 2685
我从网上找到了一个案例，是用来摇一摇换颜色的，非常好用，不过需要
HTML5微信摇一摇
06-25
手机端HTML5微信摇一摇案例，简单易懂，可直接使用。
html5实现摇一摇
w826950544的专栏
05-13 1540
摇一摇功能         // 首先在页面上要监听运动传感事件  function init(){ // 判断移动浏览器支持运动传感事件 if (window.DeviceMotionEvent) {  window.addEventListener('devicemotion',deviceMotionHandler, false);   }else{ alert('不支
html5 仿微信摇一摇wap版本 开发后可对接微信公众平台。（手机web摇一摇素材）
05-13
本代码为html5利用重力感应标签得到用户摇动手机的动作。 再根据动作，显示晃动次数，得到这个次数。 次数得到了，动作你也监听到了。 你觉得还有什么你做不到的呢。^_^ （注：本代码不包含后台程序逻辑，未加动态程序，纯开发素材，懂的快来下载吧！不懂的就别瞎嘞嘞！）
H5人脸识别+活体检测（眨眼&摇头）
05-28
1.眨眼和摇头 2.使用的是clmtrackr.js 3.眨眼或摇头成功校验后请重新刷新页面或自行修改初始化逻辑
html5摇一摇
hejias的专栏
11-27 420
html5摇一摇   可以根据代码更改 --code----------- test var color = new Array('#fff', '#ff0', '#f00', '#000', '#00f', '#0ff'); if(window.DeviceMotionEvent) { var speed
html5 摇一摇计数器,HTML5实现摇一摇
weixin_39779004的博客
06-23 296
一、原理：利用devicemotion获取移动速度，得到device移动时相对之前某个时间的差值比二、效果图：三、源码：//先判断设备是否支持HTML5摇一摇功能if (window.DeviceMotionEvent) {//获取移动速度，得到device移动时相对之前某个时间的差值比window.addEventListener('devicemotion', deviceMotionHand...
html5 摇一摇,HTML 5实现的手机摇一摇
weixin_33283907的博客
06-20 253
自从HTML 5的DeviceOrientation被开发出来，很多开发者开始研究其特性，并对此开发出了摇一摇，计步器等应用。小编近日闲着无聊，也开发出了一个摇一摇网页应用，感兴趣的小伙伴可亲身体验一下。扫码访问效果图技术解析(1)DeviceOrientationDeviceOrientation是HTML 5的重要特性之一，它将底层的方向传感器和运动传感器进行了高级封装，提供了对DOM两种事...
天猫双十一摇一摇出现html,html5摇一摇代码优化包括DeviceMotionEvent等等
weixin_35682327的博客
06-19 114
首先对DeviceMotionEvent进行优化；去除无用的代码，重新封装DeviceMotionEven复制代码代码如下:if(window.DeviceMotionEvent) {var speed = 25;//定义一个数值var x = y = z = lastX = lastY = lastZ = 0;//重置所有数值window.addEventListener('devicemoti...
javascript html5摇一摇功能的实现
10-22
主要为大家详细介绍了javascript html5摇一摇功能的实现过程，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
js活体检测(纯HTML5) https下 安卓可用
09-18
js活体检测(纯HTML5) https下 安卓可用 可以进行活体的检测,张张嘴,摇摇头,眨眨眼 判断是活体,从而防止用照片进行人脸认证
html5摇一摇代码优化包括DeviceMotionEvent等等
09-28
HTML5的摇一摇功能是通过DeviceMotionEvent事件来实现的，这个事件允许开发者获取设备的加速度数据，包括x、y和z轴上的变化。在优化代码时，主要目标是提高性能，避免不必要的计算，以及确保动画的流畅性。 首先，...
HTML5摇一摇功能
03-04
实现HTML5摇一摇功能的步骤如下： 1. **注册事件监听器**：首先，我们需要在页面加载完成后，注册一个`deviceorientation`事件监听器。这可以通过JavaScript的`addEventListener`方法完成。例如： ```javascript ...
html5手机摇一摇
11-03
HTML5手机摇一摇功能是现代移动Web应用中一种创新且有趣的交互方式，它利用了HTML5的新特性，使得在浏览器上实现类似智能手机原生应用的体验成为可能。这一技术通常应用于游戏、互动投票、抽奖活动等场景，为用户...
纯js实现人脸识别眨眨眼张张嘴案例——index.html
穆雄雄的博客
07-16 9442
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;meta charset="GBK"&gt; &lt;style&gt; #container { position: relative; } #canvas { position: absolute; ...
HTML5 Canvas眨眼睛动画
心中的利剑：HTML5 Canvas游戏动画（JavaScript）
01-18 611
在网上发现一个java眨眼睛动画，把代码改成了HTML5 +JS,效果如下： [img]http://dl2.iteye.com/upload/attachment/0093/3185/e44e4e3e-32ae-3fbe-8e56-87d4e2513037.gif[/img] 动画中有一些明显不足之处，请会的朋友指正，谢谢！ 这里可以看效果：[url]http://www.108j...
HTML5实现摇一摇的功能（实测后）
Gabriel的专栏
01-10 1387
转自：http://blog.csdn.net/david1030/article/details/8229008 利用html5实现类似微信的手机摇一摇功能，并播放音乐。 1、  deviceOrientation：封装了方向传感器数据的事件，可以获取手机静止状态下的方向数据，例如手机所处角度、方位、朝向等。 2、  deviceMotion：封装了运动传感器数据的事件，可
Html5+JS实现手机摇一摇功能
大熊的博客
01-12 2533
这篇文章主要介绍了Html5+JS实现手机摇一摇功能,本文使用HTML5的DeviceOrientation实现监听手机方向传感器数据,实现摇一摇功能雏形,需要的朋友可以参考下 HTML5一个重要特性就是DeviceOrientation，它将底层的方向传感器和运动传感器进行了高级封装，提供了DOM事件的支持。这个特性包括两种事件： 1、 deviceOrientation：封装了
js 城市三级联动
ZXL工作室
06-11 4838
cityData.js var cityData = function(b,a){return[{name:"请选择",sub:[{name:"请选择"}],type:1},{name:"北京",sub:[{name:"请选择"},{name:"东城区"},{name:"西城区"},{name:"崇文区"},{name:"宣武区"},{name:"朝阳区"},{name:"海淀区"},{name
HTML5摇一摇（下）—如何实现签筒摇动动画
最新发布
06-09
要实现签筒摇动动画，可以使用CSS3中的动画和transform属性。 首先，需要为签筒元素设置一个起始位置和旋转角度，例如： ```css .sign { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(0deg); } ``` 接下来，定义一个动画，让签筒在一定的时间内从起始位置旋转到目标角度，例如： ```css @keyframes shake { 0% { transform: translate(-50%, -50%) rotate(0deg); } 50% { transform: translate(-50%, -50%) rotate(30deg); } 100% { transform: translate(-50%, -50%) rotate(0deg); } } ``` 这个动画将签筒从0度旋转到30度，再回到0度，每次旋转的时间占总时间的50%。 最后，在JavaScript中监听设备摇动事件，触发动画播放，例如： ```javascript window.addEventListener('devicemotion', function(event) { // 计算设备加速度 var acceleration = event.accelerationIncludingGravity; var shake = Math.abs(acceleration.x) + Math.abs(acceleration.y) + Math.abs(acceleration.z); // 如果摇动幅度超过阈值，则播放动画 if (shake > threshold) { var sign = document.querySelector('.sign'); sign.classList.add('shake'); // 动画结束后移除动画类 sign.addEventListener('animationend', function() { sign.classList.remove('shake'); }); } }); ``` 其中，threshold为摇动阈值，可以根据实际情况调整。 这样，当设备摇动时，签筒就会播放摇动动画，实现签筒摇动的效果。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值