【HTML基础】1.基础交互-输入经纬度转成小数形式
2017-09-04 本文已影响13人
对对对对对对对
html部分:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"></meta>
<title>输入经纬度转成小数形式</title>
<script src="index5-master.js"></script>
</head>
<body>
<form>
degress: <input type="text" id="degress" size="20" placeholder="degress"></input><br>
minutes: <input type="text" id="minutes" size="20" placeholder="minutes"></input><br>
seconds: <input type="text" id="seconds" size="20" placeholder="seconds"></input><br>
<input type="button" id="goButton" value="go"></input>
</form>
<div id="resultDiv">
</div>
</body>
</html>
js部分:
//1.设置页面完全加载时调用init函数
window.onload = function() {;
var button = document.getElementById("goButton");
button.onclick = goButtonClick;
}
//2.定义按钮的点击事件
function goButtonClick(){
var degress = document.getElementById("degress").value;
var minutes = document.getElementById("minutes").value;
var seconds = document.getElementById("seconds").value;
var p = document.createElement("p");
p.innerHTML = degreesToDecimal(degress, minutes, seconds);
var body = document.getElementById("resultDiv");
body.appendChild(p);
}
//3.将经纬度的度/分/秒转换为小数
function degreesToDecimal(degress, minutes, seconds){
return degress * 1.0 + (minutes * 1.0/60.0) + (seconds * 1.0/3600.0);
}