<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--
width:页面宽度，可以理解为页面的宽度，width小于屏幕分辨率（逻辑分辨率）时，以屏幕分辨率来设置，
大于屏幕分辨率时，可以左右拖动，可以理解为body的宽度。device-width手机宽度
maximum-scale：最大缩放比例
minimum-scale：最小缩放比例，最小缩放不能把页面缩放到比屏幕还小
initial-scale：初始比例，页面第一次打开的时候的缩放比例
user-scalable：是否允许缩放。1允许，0不允许
target-densitydpi： dpi，是和屏幕的分辨率有关。device-dpi，low-dpi（ios不支持）
-->
<meta name="viewport" content="width=200,maximum-scale=3.0,minimum-scale=1,initial-scale=1.0,user-scalable=1,target-densitydpi=device-dpi" />
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.redDiv,
.blueDiv {
width: 185px;
height: 100px;
float: left;
}
.redDiv {
background-color: red;
}
.blueDiv {
background-color: blue;
}
.greenDiv,
.yellowDiv {
width: 200px;
height: 200px;
margin-top: 200px;
font-size: 40px;
color: white;
float: left;
background: url(AKL.jpg) 0px 40px/200px 360px no-repeat;
}
.greenDiv {
background-color: green;
}
.yellowDiv {
background-color: yellow;
}
</style>
</head>
<body>
<div class="redDiv"></div>
<div class="blueDiv"></div>
<div class="greenDiv"></div>
<div class="yellowDiv"></div>
</body>
<script type="text/javascript">
//移动端事件
var redDiv = document.querySelector(".redDiv");
var greenDiv = document.querySelector(".greenDiv");
var purpleDiv = document.querySelector(".purple");
//touchstart 开始触摸 mousedown
//touchmove 触摸移动 mousemove
//touchend 结束触摸 mouseup
//touches 屏幕上所有手指
//targetTouches 触发事件的元素内的手指
//changedTouches 事件发生改变的手指
//对于touchstart事件，这个TouchList对象列出在此次事件中心增加的触点。
// 对于touchmove事件，这个TouchList对象列出和上次事件相比较,发生了变化的的触点。
// 对于touchend事件，这个TouchList对象列出离开触摸平面的触点(这些触点对应已经不接触触摸平面的手指)
//clientY 离窗口的距离，可视区域的距离
//pageY 离页面顶部的距离。（包含滚动上去的高度）
//screenY 安卓代表距离屏幕的位置（IOS不支持）
greenDiv.ontouchmove = function(ev) {
greenDiv.innerHTML = ev.targetTouches[0].screenX;
return false;
}
//摇一摇
//先判断当前设备是否支持
//devicemotion事件是手机运动状态下可以获取重力加速度的事件
if(window.DeviceMotionEvent) {
window.addEventListener('devicemotion', fn, false);
} else {
// alert("当前设备不支持");
}
//保存上一次摇晃的时候的加速度和事件
var last_x = 0;
var last_y = 0;
var last_z = 0;
var last_time = new Date();
function fn(ev) {
//在devicemotion里面获取重力加速度
var acceleration = ev.accelerationIncludingGravity;
//重力加速度包含X Y Z三个方向
var x = acceleration.x;
var y = acceleration.y;
var z = acceleration.z;
var time = new Date();
// 每隔100毫秒检测一次
if(time - last_time > 100) {
var speed = Math.abs(x + y + z - last_x - last_y - last_z) / (time - last_time) * 10000;
// redDiv.innerHTML =speed;
// console.log(typeof(speed));
if(speed > 3000) {
redDiv.innerHTML = "摇动了手机";
// alert("aa");
}
last_x = x;
last_y = y;
last_z = z;
last_time = time;
}
}
</script>
</html>
网友评论