遇见前端，UaM

当青训营遇上码上掘金，就像无数条平行线偏斜了一点点角度，慢慢开始“相遇”。由于分科和专业的局限性，一直以来我都没有系统地学习过编程相关知识，也没有自己尝试去写一段完整的代码的经历。因此我一直认为与编程相关的工作都是在与冰冷的机器对话，这里面有很多机械式的规定、深奥的专业术语都是极其客观和理性的，似乎没有一点人情味儿。但是当我看到主题2的时候，忽然觉得这段文字描述的很美好，很温暖，和我刻板印象里的不一样。

因此我想的设计一个程序，是可以将互不相识的两个人联系起来，让他们产生交集。最开始我希望当陌生人输入自己的某些信息时，系统可以实现将输入的信息进行拓展，并且也显示我们之间同类型信息的差异性，就比如当某个小伙伴输入了自己的居住地，然后就可以出现当地的天气、风力、温度等，同时也可以向输入者展示我所在地的天气情况等，这样的话就像是朋友之间的分享。但是我发现我自己做不到，然后我就写了可以查询输入者与我的时空距离，更直观地看到我们到底相隔多远。

创作过程主要分为四个部分：

一、主体部分主要是介绍，通过js使用new Date()获取当前时间，然后设置两个选择按钮。

body>
      <p>现在是 <span id="Date"></span></p> 
      ……      
      <button>Yes</button>   <button>No</button>     
     ……
<script>
    //获取系统当前时间
      window.onload = function () {
      setInterval(function () {
        var date = new Date()
        var year = date.getFullYear() //获取当前年份
        var mon = date.getMonth() + 1 //获取当前月份
      …………
        if (day == 3) day = "三"
        if (day == 4) day = "四"
        if (day == 5) day = "五"
        if (day == 6) day = "六"
        var d = document.getElementById("Date")
        d.innerHTML =year + "年" + mon + "月" + da +"日" + " " + "星期" + day+" " +h + ":" + m + ":" + s
      }, 1000)
    }

二、点击不同按钮固定位置实现内容切换

（一）html设置两个div标签

 <!--点击“Yes”出现的部分页面内容--> 
    <div>
      <ul>
        <li>你现在居住的城市地理位置是</li>
        <p><input type="text" id="long1" class="inputtext" placeholder="经度"/></p>   <!--输入经度-->
        <p><input type="text" id="lat1" class="inputtext"  placeholder="纬度"/>       <!--输入纬度-->
        <input type="button" value="还是要点我" class="onebutton" id="button4" onclick="click2()" /></p>               <!--设置“查询距离”的按钮-->      
      </ul>
    </div>
 <!--点击“No”出现的部分页面内容--> 
    <div style="text-align:center;">  
    <img src="https://p9-tt.bytecdn.cn/large/pgc-image/1534954422821c0ca79b0a7.jpeg" width="200" height="200" />  
   </div> 

（二）js实现切换功能

        var aButton = document.getElementsByTagName('button');
        var aDiv = document.getElementsByTagName('div');
//给每一个button都添加点击事件
        for (var i = 0; i < aButton.length; i++) {
//通过给button自定义属性来解决
        aButton[i].index=i;    //每个键存储一下
        aButton[i].onclick = function () {
        for (var j = 0; j < aButton.length; j++) {
        aButton[j].className = '';
        aDiv[j].className = '';
        }
//再给应该添加的对象添加className
        this.className = 'active';
        aDiv[this.index].className = 'show';
        };
        }

（三）css设置按钮样式，对button按钮的颜色进行控制。

       button {width:100px; height:40px;}
      .active {background-image: linear-gradient(120deg, #e0c3fc 0%, #8ec5fc 100%);}
      .show {display: block;}        

（四）插入了可以查询城市经纬度的网站链接

 <p><a href="https://lbs.amap.com/tools/picker">查坐标，点这里</a></p> 
        <style>     /*设置链接样式*/
        a:link{color:#9890e3;}
        a:visited{color:#6666CC;}
        a{font-size:15px;
          font-style: oblique;
          font-weight:bold;}
        </style>

三、计算出生日期间隔

        var t2 = new Date("yyyy/mm/dd");//自己生日  
        function click1() {             //获取input里面的值           
            var month1 = document.querySelector("#month1").value;
            var year1 = document.querySelector("#year1").value;
            var day1 = document.querySelector("#day1").value;
            var t1 = year1 + "/" + month1 + "/" + day1;
            var dateBegin = new Date(t1); 
            var date = new Date(t2);
                if (date>dateBegin){
                    var result = date.getTime() - dateBegin.getTime();
                } else{
                    var result = dateBegin.getTime() - date.getTime();
                }        
            var a = Math.floor(result / (24 * 3600 * 1000));           
            alert(`好巧啊，我们的出生日期正好相差了 ${a} 天呢~`);   //设置弹窗
        }

四、计算所在地距离（与计算日期间隔方法类似）

通过这次编写代码，我发现我写的非常繁琐，代码十分不简洁，因此我在后面的练习中要学会如何简化代码，用更简练的语言实现同样的效果。