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

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

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

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

先看一下效果

在这里插入图片描述
虽然样子简陋了不少,但是这也是我的第一个小Demo,个人还是非常开心的。

JS获取时间的方法

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

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

我是在 <p> 标签中写的,JS获取时间后,传给 <p> 标签就行,最后出来的效果是这样的
时间都是两位的
还有这样的

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

再看看windows系统的
在这里插入图片描述
确实漂亮不少,那么,这个该怎么弄呢?

改变获取到的时间的格式

大概思路是这样的

获取到时间后,先判断是否大于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;
    }

然后得到的样子就是酱紫的
在这里插入图片描述
em·········可以,那时间的就到这里

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

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

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

在浏览器刷新,看到这个结果
在这里插入图片描述
嗯??? 什么东西,来个 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);

最后就完成了时间的获取和自定义格式化,看一下样子
在这里插入图片描述
该有的都有了,那接下来就是给他们增添样式了,这个呢,还是看大家的需求和喜好了,我个人比较喜欢简约,清新一点的(不就是会的效果少,不会做复杂的吗……)

我效果里的渐变是在下面这个网站上的,可以直接复制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.csdn.net/ak157888/article/details/78747795/

评论 2 您还未登录,请先 登录 后发表或查看评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:大白 设计师:CSDN官方博客 返回首页

打赏作者

「已注销」

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值