js加h5 实现摇一摇切换图片

作者: 一天前_73b6 | 来源:发表于2018-08-29 21:53 被阅读99次

js加h5 实现摇一摇切换图片
JS 实现摇一摇
js实现手机摇一摇功能
摇一摇实现
iOS「摇一摇」功能
摇一摇
h5移动端调用系统传感器事件
手机摇一摇实现
ios 摇一摇实现
vue实现摇一摇

一，开发环境
1.sublime3 电脑端开发软件

2.chrome 手机端测试软件

3.tomcat9 在测试用的服务器

二，开发前的准备工作
1.在tomcat的 webapps 目录下新建一个目录 my,然后在 my 目录中创建 img 目录用来存放图片，接着新建 main.html 文件。

1.jpg

2.jpg

2.启动tomcat 服务器，让手机和电脑处在同一个局域网内，我是用电脑开了热点，然后手机连接到这个热点。在电脑端打开命令行工具，输入 ipconfig 查看你的电脑的 ip 地址，然后在手机浏览器中输入你电脑 ip :8080 如果显示下面的界面说明你的手机已经成功的连接到了你的 tomcat服务器上。

3.jpg

三，准备开发
1.用 sublime 打开你建好的 main.html,输入下面的代码。然后保存，接着在手机浏览器中输入你电脑的 ip:8080/my/main.html,显示如下界面说明你已经打开了你写好的页面，然后你就可以尝试着摇动你的手机，你会发现图片在你摇动后切换了。

4.jpg

'''

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!-- img 标签用来显示图片 -->
<img id="img" src="img/0.jpg" width="300px" height="400px">
<!-- p 标签用来显示当前图片的索引 -->
<p id="p">0</p>
<!-- 接下来就是 javascript 代码了 -->
<script type="text/javascript">

var SHAKE_THRESHOLD = 3000;
var last_update = 0;
var x = y = z = last_x = last_y = last_z = 0;
//图片索引数组
var img=new Array("0.jpg","1.jpg","2.jpg","3.jpg");
//获取 页面中的 img对象
var dom_img=document.getElementById("img");
//获取 页面中的 p 对象
var p=document.getElementById("p");

var i=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) {
            //取消对加速度事件的监听
            window.removeEventListener('devicemotion', deviceMotionHandler, false);
            //定时 1 秒后切换图片
            setTimeout(function () {
                dom_img.src="img/"+img[i];
                p.innerHTML=i;
                if(i>=3)
                {
                    i=0;
                }else{
                    i++;
                }
                //监听加速度事件
                window.addEventListener('devicemotion', deviceMotionHandler, false);
             }, 1000);
        }
        last_x = x;
        last_y = y;
        last_z = z;
    }
}
init();
</script>   
</body>
</html>

'''