使用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 (<
  • 4
    点赞
  • 25
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值