Home思洋影视事业部网站建设知识库
0 Comments

HTML 5基础之HTML 5 API的威力(2)

发布于：2013-08-27  |   作者：广州网站建设  |   已聚集：人围观

HTML文件

HTML文件一开始的内容是清单1所示的标准的HTML5信息，< head>部分包含了一个到Google Maps API的调用，把sensor的值设置为False。使用Google Maps API对你状态的要求是，你的应用是否在使用一个传感器，比如说GPS来确立位置。你必须为你的Google Maps API应用声明一个值为True或是False的sensor参数，sensor的值必须被声明。< head>标签还包含了到JavaScript和CSS3文件的链接，这些文件被用来处理网页的功能和格式。
广州网站建设,网站建设,广州网页设计,广州网站设计

清单1. HTML文件开始部分的内容



    
	
  1. 
		<!doctype html> 
    2. 
	
  2. 
		<html> 
    3. 
	
  3. 
		<head> 
    4. 
	
  4. 
		<title>Basic GeoLocation Map & Web Worker Prime Number Calculator</title> 
    5. 
	
  5. 
		<script src="http://maps.google.com/maps/api/js?sensor=false" kesrc="http://maps.google.com/maps/api/js?sensor=false"   
    6. 
	
  6. 
		type="text/javascript">< /script> 
    7. 
	
  7. 
		<LINK href="GeolocationWebWorker.css" kesrc="GeolocationWebWorker.css" rel="stylesheet" type="text/css"> 
    8. 
	
  8. 
		<script src="HTML-Part3-GeolocationWebWorker.js" kesrc="HTML-Part3-GeolocationWebWorker.js" type="text/javascript">< /script> 
    9. 
	
  9. 
		</head> 
    10. 




	<body>标签包含了onLoad事件，该事件调用地理定位的初始化函数，如清单2所示。该函数检验地理定位是否可在这一浏览器中使用，这一初始化函数放在JavaScript文件中。如果浏览器可以和Geolocation API通信的话，地图就会被渲染。



	清单2. 初始化Geolocation




    
	
  1. 
		<body onLoad="initGeoApp();"> 
    2. 
	
  2. 
		<header> 
    3. 
	
  3. 
		<hgroup> 
    4. 
	
  4. 
		<h1>Geolocation & Web Worker</h1> 
    5. 
	
  5. 
		<h2>Making it work</h2> 
    6. 
	
  6. 
		</hgroup> 
    7. 
	
  7. 
		</header> 
    8. 




	清单3中给出的< section>标签包含了navigator.geolocation对象的输出显示信息，API返回的经度和纬度被用来创建地图画布，Position的coords数据也通过使用< span>< /span>标签显示出来。

	广州网站建设,网站建设,广州网页设计,广州网站设计



	清单3. Geolocation的地图和位置




    
	
  1. 
		<section> 
    2. 
	
  2. 
		<p>This is the geolocation example map.</p> 
    3. 
	
  3. 
		<div id="map_canvas" ></div> 
    4. 
	
  4. 
		 
    5. 
	
  5. 
		<p>This is the output from the navigator.geolocation object.</p> 
    6. 
	
  6. 
		<table> 
    7. 
	
  7. 
		<tr> 
    8. 
	
  8. 
		<td>accuracy:</td> 
    9. 
	
  9. 
		<td>< span id="accuracyOutput"></span></td> 
    10. 
	
  10. 
		</tr> 
    11. 
	
  11. 
		<tr> 
    12. 
	
  12. 
		<td>altitude:< /td> 
    13. 
	
  13. 
		<td><span id="altitudeOutput"></span></td> 
    14. 
	
  14. 
		</tr> 
    15. 
	
  15. 
		<tr> 
    16. 
	
  16. 
		<td>altitudeAccuracy:</td> 
    17. 
	
  17. 
		<td>< span id="altitudeAccuracyOutput"></span></td> 
    18. 
	
  18. 
		</tr> 
    19. 
	
  19. 
		<tr> 
    20. 
	
  20. 
		<td>heading:</td> 
    21. 
	
  21. 
		<td><span id="headingOutput"></span></td> 
    22. 
	
  22. 
		</tr> 
    23. 
	
  23. 
		<tr> 
    24. 
	
  24. 
		<td>latitude:</td> 
    25. 
	
  25. 
		<td><span id="latitudeOutput"></span></td> 
    26. 
	
  26. 
		</tr> 
    27. 
	
  27. 
		<tr> 
    28. 
	
  28. 
		<td>longitude:</td> 
    29. 
	
  29. 
		<td><span id="longitudeOutput"></span></td> 
    30. 
	
  30. 
		</tr> 
    31. 
	
  31. 
		<tr> 
    32. 
	
  32. 
		<td>speed:</td> 
    33. 
	
  33. 
		<td><span id="speedOutput"></span></td> 
    34. 
	
  34. 
		</tr> 
    35. 
	
  35. 
		</table> 
    36. 
	
  36. 
		</section> 
    37. 
	
  37. 
		<aside> 
    38. 
	
  38. 
		<p>This is the Web Worker. </p> 
    39. 
	
  39. 
		<p>Prime number calculation result:  
    40. 
	
  40. 
		<output id="result"></output></p> 
    41. 




	Web Worker计算素数，<output>这一新的标签被用来显示web worker提供的计算结果，<output>标签中的ID与JavaScript用来标识其要执行的计算的ID是相同的。在<span>和<output>标签中用到的ID使得它们在DOM中是可访问的，没有引用ID的话，JavaScript就不知道要使用哪一个<span>和<output>。清单4给出了web worker的输出。



	清单4. web worker的输出




    
	
  1. 
		<aside> 
    2. 
	
  2. 
		<p>This is the Web Worker. </p> 
    3. 
	
  3. 
		<p>Prime number calculation result:  
    4. 
	
  4. 
		<output id="result"></output></p> 
    5. 




	<input>中用到的onClick首先显示由素数（Prime Number）web worker计算出来的值，而第二个onClick则是被用来停止web worker的。清单5给出了代码。在按钮被点击时，displayWorker()函数引发显示web worker计算出来的结果。web worker在页面载入后开始计算素数。



	清单5. web worker的input标签




    
	
  1. 
		<input type="button" value="Display Web Worker" onClick="displayWorker();"> 
    2. 
	
  2. 
		<input type="button" value="Stop Web Worker" onClick="stopWorker();"> 
    3. 
	
  3. 
		 
    4. 
	
  4. 
		</aside> 
    5. 
	
  5. 
		</body> 
    6. 
	
  6. 
		</html>  
    7. 



			

			

					 标签：网站建设(5654)广州网站设计(5620)广州网站建设(4075)广州网页设计(1868)
					 
			

		
		
			  
	  
 
	

	 
	

	





	
	



飞机