手机摇一摇：纯JS实现的JSP/HTML项目

需积分: 9 133 浏览量更新于2024-09-11 收藏 1KB TXT 举报

本篇文章主要介绍了如何在JSP、HTML和JavaScript中实现一个手机摇一摇功能，完全使用JavaScript进行处理，并允许用户通过修改`SHAKE_THRESHOLD`变量来调整设备摇晃的敏感度。以下将详细解析文章中的关键知识点： 1. **JSP和HTML基础**： - JSP (JavaServer Pages) 是一种服务器端的动态网页技术，它允许将Java代码嵌入到HTML页面中，从而实现动态内容的生成。 - HTML (Hypertext Markup Language) 是用于创建网页的标准标记语言，本文中的HTML结构提供了页面的基本框架，如`<head>`标签用于定义元数据和JavaScript脚本，`<body>`标签内包含显示给用户的实际内容。 2. **JavaScript使用**： - JavaScript 是客户端脚本语言，文中通过`<script>`标签引入并使用，实现了设备运动事件的监听（`DeviceMotionEvent`）。 - `deviceMotionHandler`函数是事件处理器，当设备发生运动时被调用。这个函数获取设备加速度数据，计算当前与上一次更新之间的速度变化。 3. **摇一摇检测算法**： - `var last_update` 和 `var last_x, last_y, last_z` 用于存储上一次检测到的设备加速度值，以便计算当前的速度变化。 - `SHAKE_THRESHOLD` 变量设置了一个阈值，当设备摇动速度超过这个值时，认为是摇一摇操作。 - 使用`Math.abs()`函数获取绝对值，然后除以时间差（`diffTime`），并将结果乘以10000转换为毫秒，以便于比较。 4. **性能优化**： - 文章提到如果两次检测的时间间隔超过100毫秒，才进行摇一摇检测，这有助于减少不必要的计算，提高性能。 5. **兼容性与移动端开发**： - 代码检查`window.DeviceMotionEvent`的存在，这是针对移动设备（尤其是智能手机）的，因为桌面浏览器通常不支持这个特性。 6. **用户体验**： - 通过这个简单而灵活的代码，开发者可以轻松地在移动应用中添加一个有趣的交互功能，提升用户体验，例如游戏、导航或信息获取等场景。这篇文章提供了一种在JSP页面中结合HTML和JavaScript实现手机摇一摇功能的方法，适合移动端应用开发者快速集成这种常见的用户交互体验。通过调整`SHAKE_THRESHOLD`，开发者可以根据设备性能和用户的偏好来个性化该功能的灵敏度。

<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML>
<html>
<head>
<title>ÖØÁ¦²âÊÔ</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript">
var SHAKE_THRESHOLD = 999;
var last_update = 0;
var x, y, z, last_x, last_y, last_z;
if (window.DeviceMotionEvent) {

window.addEventListener('devicemotion',deviceMotionHandler, false);
}

function deviceMotionHandler(eventData) {
var acceleration =eventData.accelerationIncludingGravity;
var myDate = new Date();
var curTime = myDate.getTime();

if ((curTime - last_update)> 100) {
var diffTime = curTime -last_update;
last_update = curTime;
x = acceleration.x;

下载后可阅读完整内容，剩余1页未读，立即下载

花瓶的传说

粉丝: 6
资源: 19

手机摇一摇：纯JS实现的JSP/HTML项目

JSP手机销售网 JSP课本源码

摇一摇抽奖页面后台数据库设计

JAVA开发全套学习笔记整合Core Java Unix JSP HTML javascript Oracle HIbernate JSP EJB Spring AJAX Servlet

jsp和javascript

论坛短消息 JSP JS HTML 实现

JS ASP JSP PHP HTML CSS JavaScript 超级强悍 完备 网站 网页表单验证大全

jsp+javascript收集

JSP.rar_javascript_javascript项目_jsp javascript_jsp小项目

jsp,js,javascript,java代码格式化工具

jsp进度条js方案

最新资源

JS ASP JSP PHP HTML CSS JavaScript 超级强悍完备网站网页表单验证大全