使用JS改变获取时间的格式

刚开始学习前端不久，昨天突然想做一个简单的显示时间的页面，就当作是钟表了（哈哈，买不起表吗？）

写的过程中，发现JS自带的获取时间功能在视觉上总觉得不是很舒服，比如 9:08 显示的是 9:8 ，这个确实没有问题，但是就是看着不舒服，所以呢，网上查了查，学习了一番，我做成了 9:08 的样子。另外还有获取的星期是从0开始的数字，最后都改了改，做的样子还算看过眼。

先看一下效果

使用JS获取当前时间并且改变时间显示格式
虽然样子简陋了不少，但是这也是我的第一个小Demo，个人还是非常开心的。

JS获取时间的方法

我是用这样一段代码来获取当前时间的

	function time(){
	    var time = new Date();
	    document.getElementById("time").innerHTML=
	        time.getHours()+":"+
	        time.getMinutes()+":"+
	        time.getSeconds();
	}

我是在 <p> 标签中写的，JS获取时间后，传给 <p> 标签就行，最后出来的效果是这样的
使用JS获取当前时间并且改变时间显示格式
还有这样的

使用JS获取当前时间并且改变时间显示格式
很明显，当时间数都是两位的时候，看不出来有什么不合适，但是有一位数字的时候就很明显了，而且这个会随着时间的变化，不断左右动，当作钟表那肯定是不行的喽（还嫌晃眼呢，哈哈）。虽然说我对美没有太大的追求，但是这个样子，还是很不舒服的。

再看看我们windows系统的
使用JS获取当前时间并且改变时间显示格式
确实漂亮不少，那么，这个该怎么弄呢？

改变获取到的时间的格式

大概思路是这样的

获取到时间后，先判断是否大于10，小于10的话，就在该数字前面加一个字符串 “0” ，这就是一个非常简单的方法，实现起来呢，也只需要一行代码，所以上面的代码就可以改成下面这个样子

	function time() {
        var h = new Date().getHours();
        h = h < 10 ? ("0" + h) : h;
        var m = new Date().getMinutes();
        m = m < 10 ? ("0" + m) : m;
        var s = new Date().getSeconds();
        s = s < 10 ? ("0" + s) : s;
        document.getElementById("time").innerHTML= h + ":" + m + ":" + s;
    }

然后得到的样子就是酱紫的
使用JS获取当前时间并且改变时间显示格式
en·········可以，那时间的就到这里

日期和星期的获取和格式转换

日期的获取和时间的获取是一样的，使用对应的函数便可以，考虑到，日期一般是不需要在给个位的时候加 “0” 的，所以就不需要上面对时间的处理了，所以，我就写了下面的代码

	function date () {
        var m = new Date().getMonth();
        var d = new Date().getDate();
        document.getElementById("date").innerHTML= m + "月" + d + "日";
    }

在浏览器刷新，看到这个结果
使用JS获取当前时间并且改变时间显示格式
嗯？？？什么东西，来个 0 月！！
上网差了下，原来是 getMonth() 函数获取的数据是从0开始的！
那，为什么getDate()就不是呢，想想也没有个1月0日啊，，搞不懂，搞不懂

现在问题是找到了，所以呢，只需要在获取到月份之后，再 +1 便可以了
整个获取日期的代码就是下面这个样子了

	function date () {
        var m = new Date().getMonth();
        m = m + 1;
        var d = new Date().getDate();
        document.getElementById("date").innerHTML= + m + "月" + d + "日，";
    }

OK，接下来就是星期了，在网上查看上面日期出现0月的的问题的时候顺便看到了获取的星期也会有星期0，对应的是星期日，那么就简单多了，只需要把获取的阿拉伯数字改为我们习惯的就好，比如星期六、星期五等。

实现这个，我用了非常古老又很实用的方法，switch case 。
代码如下

	function day(){
        var x;
        var day = new Date().getDay();
        switch (day) {
            case 0: x="日"; break;
            case 1: x="一"; break;
            case 2: x="二"; break;
            case 3: x="三"; break;
            case 4: x="四"; break;
            case 5: x="五"; break;
            case 6: x="六"; break;
        }
        document.getElementById("day").innerHTML=" 星期"+x;
    }

这样就完成了星期的获取

最后，再给每个函数加一个适当的刷新时间

    setInterval(time,500);
    setInterval(date,700);
    setInterval(day,1000);

最后就完成了时间的获取和自定义格式化，看一下样子
使用JS获取当前时间并且改变时间显示格式
该有的都有了，那接下来就是给他们增添样式了，这个呢，还是看大家的需求和喜好了，我个人比较喜欢简约，清新一点的（不就是会的效果少，不会做复杂的吗……）

我效果里的渐变是在下面这个网站上的，可以直接复制CSS样式，非常方便

https://webkul.github.io/coolhue/

最后奉上所有的源码

这个是HTML和JS的

<!DOCTYPE html><html lang="ch">
<head>
	<meta charset="UTF-8">
	<title>快看几点了</title><link rel="stylesheet"href="style.css">
	<script>
		function time(){var h=new Date().getHours();h=h<10?("0"+h):h;var m=new Date().getMinutes();m=m<10?("0"+m):m;var s=new Date().getSeconds();s=s<10?("0"+s):s;document.getElementById("time").innerHTML=h+":"+m+":"+s}
		function date(){var m=new Date().getMonth();m=m+1;var d=new Date().getDate();d=d<10?("0"+d):d;document.getElementById("date").innerHTML=m+"月"+d+"日，"}
		function day(){var x;var day=new Date().getDay();switch(day){case 0:x="日";break;case 1:x="一";break;case 2:x="二";break;case 3:x="三";break;case 4:x="四";break;case 5:x="五";break;case 6:x="六";break}document.getElementById("day").innerHTML=" 星期"+x}setInterval(time,500);setInterval(date,700);setInterval(day,1000);
	</script>
</head>
<body>
<div class="bodyBox">
	<div class="Box">
		<div class="timebox">
			<p id="time"class="time"></p></div>
		<div class="date-dayBox">
			<a id="date"class="date-day"></a>
			<a id="day"class="date-day"></a>
		</div></div></div>
</body>
</html>

下面是CSS的

body{margin:0;padding:0;}
.bodyBox{padding:1px;width:1918px;height:1078px;background-image:linear-gradient( 135deg,#43CBFF 10%,#9708CC 100%);}
.Box{margin:380px auto;padding:10px;width:580px;height:280px;background-color:rgba(255,255,254,0.5);box-shadow:8px 8px 40px #616161;}
.timebox{margin:0 auto;padding:1px;width:578px;height:198px;}
.date-dayBox{padding-left:44px;float:left;width:440px;height:66px;}
.time{color:#424242;text-align:center;font-size:140px;font-family:"等线";margin-top:40px;}
.date-day{color:#333333;display:inline-block;font-size:50px;font-family:"微软雅黑";}

参考链接：
- https://blog.****.net/ak157888/article/details/78747795/

使用JS获取当前时间并且改变时间显示格式