JS电子时钟

开发工具与关键技术：VS2015，Javascript

撰写时间：2019年6月1日

用JS来写个简单的电子时钟
思路：
先获取计算机的当前时间，然后通过计时器不断的获取当前时间，从而达到电子时钟的效果
样式必不可少的，先把电子时钟的样式设计好

样式：

<div class="row">
            <div class="col mt-5">
                <label>电子时钟：</label>
                <input type="text" name="name" value="" class="w-25 text-center" id="open" disabled/>
                <button onclick="timeStart()">时间流逝</button>
                <button onclick="timeStop()">时间静止</button>
            </div>
        </div>

效果：

接着用JS代码获取当前的时间，得到年，月，日，时，分，秒。

这便是直接用JS获取的时间，但，显然这并不是一个电子时钟该有的样子，所以要对这个时间加工一下，做出自己想要的样式。

先来把时间调整一下去掉多余的部分，电子时钟只需要年，月，日，时，分，秒。

然而这还不是一个电子时钟的样子，所以现在要对这个时间顺序进行调整，然后重新拼接。

月，日，时，分，秒，有些特殊，在计算机里无法自行设计出01，02，03，之类的数字，而月，日，时，分，秒，却又包含有这样的数字，所以要对，月，日，时，分，秒，进行判断，拼接。
当数字为1-9的时候就在1-9前拼接一个“0”，这样就有了01，02，03之类的效果。

月份这个也有点特殊，因为计算机算数是从0开始的，而现实中是没有00这个月份，所以要在月份后面+1，这样就不会出现00这样的情况

然后再把日期时间重新拼接一下，做出自己想要的日期时间顺序，再把拼接好的日期时间赋值给input标签。

//把days函数赋予input标签
        function play() {
            var mons = days();
            document.getElementById("open").value = mons;
        }

        //年月日时分秒重新拼接
        function days() {
            var datas = new Date();
            var on1 = "-";
            var on2 = ":";
            var onY = datas.getFullYear(); //年
            var onM = datas.getMonth()+1; //月
            var onD = datas.getDate(); //日
            var onS = datas.getHours(); //时
            var onF = datas.getMinutes(); //分
            var onN = datas.getSeconds(); //秒

            if (onM >= 1 && onM <= 9) { //月
                onM = "0" + onM;
            }
            if (onD >= 1 && onD <= 9) { //日
                onD = "0" + onD;
            }
            if (onS >= 0 && onS <= 9) { //时
                onS = "0" + onS;
            }
            if (onF >= 0 && onF <= 9) { //分
                onF = "0" + onF;
            }
            if (onN >= 0 && onN <= 9) { //秒
                onN = "0" + onN;
            }
            var strTime = onY + on1 + onM + on1 + onD + "\t" + onS + on2 + onF + on2 + onN;
            return strTime;
        }

这时候就得到了一个静止的时间，而电子时钟需要的是一个动态的时间，所以这里可以选择用计时器来不断来调用“play()”这个函数，每隔一秒就去调用“play()”，不断的刷新input标签的值，这样就可以达到电子时钟的效果。

//时间流逝
        var time = null;
        function timeStart() {
            time = setInterval(play, 1000);
        }

效果图：

电子时钟的样式，设计了两个按钮，“时间流逝”和“时间静止”。
在点击“时间流逝”按钮，时间是动态的。
在点击“时间静止”按钮，时间是静态的。

下面的就把“时间静止”这个按钮的功能补全。

在点击“时间静止”按钮后，电子时钟就不再读秒，停止获取当前时间。
当再次点击“时间流逝”按钮后电子时钟还是会再次运行
可以选择把计时器清空，不再进行读秒
用到 JS内部定义的clearInterval()

		//时间静止
        function timeStop() {
            clearInterval(time);
        }