1、Web制作手机专用网页实验报告 数学与计算机学院上机报告（ 2013 / 2014 学年 第 1 学期 ）课程名称WEB编程技术课程代码6014549上机时间 2013 年11月11日指导单位 西华大学 任课教师 李颖 学生姓名 蒋俊 年 级2011级学 号312011*专 业软件工程成 绩实验名称实验一 制作手机专用网页实验地点6A-411实验类型上机实验学时6实验日期2013-11-11实验目的和要求 目的：1、创建环境和测试环境准备2、使用XHTML MP构建手机网页3、使用CSS MP和WCSS为手机网页布局 要求：1、熟练掌握创建和测试环境，使用手机模拟器和手机测试网页2、掌握使用X
2、HTML MP构建手机网页的基本方法实验环境(实验设备)拥有Windows XP或其以上版本的操作系统的计算机，JDK，Android SDK，Chrome Lite，IIS或Apache服务器实验原理及内容1.实验原理（1）CSS样式和JavaScript（2）HTML5新的结构元素的用法及如、利用插件加入音视频、HTML5 DOM自定义视频和音频控制和动态控制（3）Canvas和JavaScript（4）WEB SQL数据库（5）地理位置定位的技术2实验内容（1）手机模拟器安装和使用（2）构建手机网页3实验前准备 根据实验内容，准备一些图片、视频4.实验过程 1、 安装JDK，配置环境，安
3、装Android SDK，使用Chrome Lite测试手机网页。安装和配置WEB服务器，使用IIS或Apache。 2、利用单列菜单导航条设计主界面（index.html) 界面如下：代码如下： 产品信息 用户注册 获取地理位置 产品视频信息 产品动画 3、使用window对象的openDatabase()方法在网页内创建和使用WEB SQL数据库。建立连接、执行SQL操作。注册及登录界面（register.html）界面及操作如下：代码如下：注册/登录var datatable = null;var db = openD
4、atabase(UserInfo, , Username and UserPwd, 1024 * 1024);function init() datatable = document.getElementById(datatable); datatable2 = document.getElementById(datatable2); showAllData(); checkData(); function addData(username, pwd) db.transaction(function(tx) tx.executeSql(INSERT INTO Users VALUES(?, ?
5、), username, pwd, /当追加数据成功时执行的处理 function(tx, rs) alert(已注册！); , function(tx, error) alert(error.source + : + error.message); ); );function saveData() var username = document.getElementById(username).value; var pwd = document.getElementById(pwd).value; addData(username, pwd); function checkData() va
6、r username = document.getElementById(username2).value; var pwd = document.getElementById(pwd2).value; var password=null; var sql2 = SELECT pwd FROM Users WHERE username=username; db.transaction(function(tx) tx.executeSql(sql2, , function(tx, rs) for(var i=0; irs.rows.length; i+) password=rs.rows.ite
7、m(i).pwd; if(password=pwd) alert(登录成功！); ); ); 用户注册 用户名： 密 码： 用户登录 用户名： 密 码： 4、利用插件加入音视频，使用HTML5 DOM自定义视频和音频控制和动态控制。产品视频信息界面（视频shiping.html）界面如下：代码如下：产品视频信息 播放 | 暂停 | 声音关闭/声音打开 / 获得对video元素的引用var video = document.getElementsByTa
8、gName(video)0;function toggleMute() video.muted = !video.muted; / 切换声音的关闭与打开5、使用Geolocation对象获取当前地理位置、处理位置信息。获取地理位置界面（dili.html）代码如下：/ 获取元素的引用var btn = document.getElementById(btn);var info = document.getElementById(info);var map = document.getElementById(map);var geolocation;var gmap;var gmarker;/
9、按钮单击事件，获取地理位置btn.onclick = function() / 首先检查是否支持地理定位，如果支持就获取地理位置 if (window.navigator.geolocation) info.innerHTML = 请等待查询结果返回; geolocation = window.navigator.geolocation; geolocation.getCurrentPosition(getPositionSuccess, getPositionError, timeout:5000); else info.innerHTML = 你的浏览器不支持地理位置定位; / 获取地理位
10、置失败function getPositionError(error) info.innerHTML = error.message;/ 成功获取地理位置function getPositionSuccess(position) var lat = position.coords.latitude; var lon = position.coords.longitude; / 定义持续追踪位置 geolocation.watchPosition(refreshPosition); / 载入Google地图 var latLng = new google.maps.LatLng(lat, lon
11、); var mapOptions = zoom:16, center:latLng, mapTypeId:google.maps.MapTypeId.ROADMAP ; gmap = new google.maps.Map(map, mapOptions); / 向地图中添加标记 gmarker = new google.maps.Marker( position: latLng, map: gmap );/ 持续追踪位置function refreshPosition(position) var lat = position.coords.latitude; var lon = posit
12、ion.coords.longitude; / 将经度、维度转换为地名 getPlaceFromFlickr(lat, lon, output); var latLng = new google.maps.LatLng(lat, lon); / 重设地图位置 gmap.setCenter(latLng); / 重设标记位置 gmarker.setOptions(position:latLng);/ 将经度、维度转换为地名function getPlaceFromFlickr(lat, lon, callback) info.innerHTML = 你所在的位置： 经度 + lat + ，纬度
13、+ lon; / 定义YQL语句 var yql = select * from flickr.places where lat= + lat + and lon= + lon; / 将YQL网络服务的API嵌入到网页，这是JavaScript库 var url = encodeURIComponent(yql) + &format=json&diagnostics= + false&callback= + callback; / 创建一个script元素，并引用JavaScript库，最后放在head元素中 var script = document.createElement(script
14、); script.setAttribute(src,url); document.getElementsByTagName(head)0.appendChild(script);/ 回调函数，输出位置地名function output(o) if(typeof(o.query.results.places.place) != undefined) info.innerHTML += + o.query.results.places.place.name; 6、添加页面，使用Canvas和JavaScript在手机网页上绘图，使用Canvas实现动画。显示当前时间（donghua.html）界
15、面如下：代码如下：显示当前时间function clock() var cxt = document.getElementById(clock).getContext(2d); cxt.save(); / 保存状态 cxt.clearRect(0, 0, 150, 150); / 清理画布 cxt.translate(75, 75); / 以(75, 75)为原点 cxt.scale(0.5, 0.5); / 缩放 cxt.rotate(-Math.PI/2); / 逆转90度 / 01画表盘 cxt.beginPath(); cxt.lineWidth = 30; var gld = cxt
16、.createLinearGradient(0,0,50,75); gld.addColorStop(0,#E0E3EC); gld.addColorStop(1,#9AA0A0); cxt.strokeStyle = gld; var grd = cxt.createRadialGradient(0,0,0,0,0,150); grd.addColorStop(0,#FAD877); grd.addColorStop(1,#F6882F); cxt.fillStyle = grd; cxt.arc(0,0,135,0,Math.PI*2,true); cxt.stroke(); cxt.fi
17、ll(); / 全局设置，以后的线条都使用该设置 cxt.strokeStyle = #FFFEF5; cxt.lineCap = square; / 02画12个时刻刻度 cxt.save(); / 将状态保存起来 cxt.lineWidth = 8; / 设置线条粗细 cxt.beginPath(); for (var i=0;i12;i+) / 以当前原点为圆心旋转30 cxt.rotate(Math.PI/6); / 以圆心外100像素处为起点，120像素处为终点画线 cxt.moveTo(100,0); cxt.lineTo(120,0); cxt.stroke(); / 画出这条路
18、径线条 / 恢复状态，将取出的状态作为当前状态 cxt.restore(); / 03画60个分钟刻度 cxt.save(); cxt.lineWidth = 5; for (i=0;i=12 ? hr-12 : hr; / 04画时针 cxt.save(); / 时针转向当前位置 cxt.rotate(hr*(Math.PI/6) + (Math.PI/360)*min + (Math.PI/21600)*sec ); / 设置时针宽度 cxt.lineWidth = 10; cxt.beginPath(); cxt.moveTo(-20,0); / 反向延长20个像素 cxt.lineTo(70,0); cxt.stroke(); cxt.restore(); / 05画分针 cxt.save(); cxt.rotate(Math.PI/30)*min + (Math.PI/1800)*sec); cxt.lineWidth = 8; cxt.beginPath(); cxt.moveTo(-28,0); cxt.lineTo(90,0); cxt.stroke(); cxt.restore(); / 06画秒针 cxt.save(); cxt.rotate(sec * Math.PI/30); cxt.lineWidth = 6; cxt.beginPath();
