【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);
}

上一篇下一篇

猜你喜欢

热点阅读