<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>HTML5 Geolocation定位</title>
<link rel="stylesheet" href="styles.css">
</head>
<style>
/*导航条Css*/
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 20px 50px;
text-decoration: none;
}
li a:hover {
background-color: #111;
}
/*导航条CSS*/
/*文字标题居中*/
.text{text-align:center;
background:#FFFFFF;
margin-top:-5px;
margin-bottom:20px;
line-height: 80px;
border:0;
padding:0;
width:100%;
height:80px;}
/*文字标题居中*/
.content
{
width: 50% ;
height: 50%;
float: left;
padding: 1em;
border: 1em solid transparent;
background: linear-gradient(white, white) padding-box,
repeating-linear-gradient(-45deg,
red 0, red 12.5%,
transparent 0, transparent 25%,
#58a 0, #58a 37.5%,
transparent 0, transparent 50%)
0 / 5em 5em;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
.entitle
{
border:0;
padding:0;
}
/*总的div设置长宽高*/
.total
{
width:100%;
height:100%;
margin: 0 auto;
}
/*总的div设置长宽高*/
.text-include
{
margin-left:5px;
}
.content
{
width: 50% ;
height: 50%;
float: left;
padding: 1em;
border: 1em solid transparent;
background: linear-gradient(white, white) padding-box,
repeating-linear-gradient(-45deg,
red 0, red 12.5%,
transparent 0, transparent 25%,
#58a 0, #58a 37.5%,
transparent 0, transparent 50%)
0 / 5em 5em;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
</style>
<body onLoad="loadDemo()">
<div class="entitle">
<ul>
<li><a class="active" href="../home/home.html">主页</a></li>
<li><a href="../location/location.html">定位</a></li>
<li><a href="../about/about.html">关于</a></li>
<li><a href="../login/login.html">退出</a></li>
</ul>
</div>
<div class="content" align="center">
<h1>地理定位</h1>
<span class="info">
<p id="status">HTML5 Geolocation is <strong>not</strong> supported in your browser.</p>
</span>
<h2>当前位置:</h2>
<table border="1">
<tr>
<th width="40" scope="col"><h5 align="left">纬度</h5></th>
<td width="300" id="latitude">?</td>
</tr>
<tr>
<td><h5>精度</h5></td>
<td id="longitude">?</td>
</tr>
<tr>
<td><h5>当前时间</h5></td>
<td id="longitude2">11:00:00 a.m.</td>
</tr>
</table>
</content>
<script type="text/javascript">
function loadDemo() {
alert("开始定位，建议使用IE9及以上版本浏览器");
if(navigator.geolocation) {
document.getElementById("status").innerHTML = "该浏览器支持获取地理位置。.";
navigator.geolocation.getCurrentPosition(updateLocation,showError);
}
else{document.getElementById("status").innerHTML="该浏览器不支持获取地理位置。";}
}
function updateLocation(position) {
var latitude = position.coords.latitude;
var longitude = position.coords.longitude;
var longitude2 =new Date( position.timestamp );
if (!latitude || !longitude) {
document.getElementById("status").innerHTML = "HTML5 Geolocation is supported in your browser, but location is currently not available.";
return;
}
document.getElementById("latitude").innerHTML = latitude;
document.getElementById("longitude").innerHTML = longitude;
document.getElementById("longitude2").innerHTML = longitude2;
}
function showError(error)
{
switch(error.code)
{
case error.PERMISSION_DENIED:
x.innerHTML="User denied the request for Geolocation."
break;
case error.POSITION_UNAVAILABLE:
x.innerHTML="Location information is unavailable."
break;
case error.TIMEOUT:
x.innerHTML="The request to get user location timed out."
break;
case error.UNKNOWN_ERROR:
x.innerHTML="An unknown error occurred."
break;
}
}
</script>
</body>
</html>
华软大一项目实训代码
需积分: 28 121 浏览量
2018-07-17
15:38:56
上传
评论 2
收藏 13.16MB ZIP 举报
项目实训代码.zip （30个子文件） 
所有文件 
JavaDemo(代码).zip 60KB
demo.jar 1009KB design about 
about.html 3KB location location.html 4KB photo 
logo1.png 28KB
5a45bb2e2295e.jpg 22KB 5a4b00d11ed36.jpg 182KB love.jpg 7KB 5ac19ae3818c7.jpg 323KB avatar.jpg 18KB b.jpg 47KB 5a4ee5ec94250.jpg 53KB 5af3e40e6e8bd.JPG 295KB a.jpg 185KB 5a444b544fc18.jpg 123KB 5a4b00c89ce33.jpg 237KB 5a4b00b650501.jpg 201KB 5ae917d5063b8.jpg 254KB 5a4b00d966509.jpg 164KB 5acdcd4dc57b8.JPG 349KB 5a4b00bf538ef.jpg 219KB home 
screen.css 3KB
4_1.mp4 7.22MB
eg_dragdrop_w3school.gif 2KB home.html 3KB news1.html 3KB video.html 4KB 201804261.mp4 2.53MB register register.html 2KB login login.html 2KB资源评论
