美文网首页
【HTML基础】1.基础交互-输入经纬度转成小数形式

【HTML基础】1.基础交互-输入经纬度转成小数形式

作者: 对对对对对对对 | 来源:发表于2017-09-04 23:47 被阅读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);
    }
    
    

    相关文章

      网友评论

          本文标题:【HTML基础】1.基础交互-输入经纬度转成小数形式

          本文链接:https://www.haomeiwen.com/subject/lyvyjxtx.html