JS：完善数字时钟

马黑黑 · 发表于 2022-3-19 09:06

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

本帖最后由马黑黑于 2022-3-19 11:21 编辑

我们在上一个介绍Date对象的帖子里，已经了解了如何获取日期、时间信息，但有诸多细节存在不足，比如星期几不能以汉字数字显示、时分秒会出现 1:9:8 而不是像 01:09:08 这个标准的样子。现在我们来完善这些细节。

一、时分秒问题的解决

我们先创建 Date 对象：

var now = new Date();

现在我们用 var hour = now.getHours() 得到当前小时数，当时间处于0点~9点是，我们希望小时数以双位数出现，这就需要在小于10点钟的小时数的前面加一个0：

if(hour < 10) hour = "0" + hour;

意思是，如果 hour 小于 10，则 hour 的值变为 "0" + hour，加之前 hour 变量是个数值，加了 "0" 之后变为了字符串，但这不影响他后续的运算执行，因为下一秒它又从 now.getHours() 指令得到一个数值，摇身一变成为了数值变量，要可以参与计算了，如此反复。我们之前提到过，JS的变量不是严谨的变量，变量类型可以在一定范围内依据条件的变化而自动变换变量的类型。例如 "0" + 数值，0放于引号内，是字符串，数值跟着它后，整改东东也变成了字符串。

同理，分、秒的处理也这么办：

var minute = now.getMinutes();
if(minute < 10) minute = "0" + minute;
var second = now.getSeconds();
if(second < 10) second = "0" + second;

二、星期几问题的处理

我们定义一个简短的函数就可以完美解决问题：

function toHz(num) {
      var hz = "日一二三四五六";
      return(hz.charAt(num));
}

我们已经清楚，获取星期几用 getDay 方法，它返回0~6的数字，0 是星期天。上面我们编写的函数带有一个参数num，它就是针对 0~6 的数值。函数中，我们声明一个变量 hz，赋值为 "日一二三四五六九"，然后我们用JS内置的一个处理字符串的方法 charAt(index) 来 hz 变量中的对应字符。charAt(index) 需要的参数 index 我们用 num 传递给它，index 从 0 开始算起，0 对应字符串的第一个字，1 对应第二个子，依此类推。我们将 charAt 处理的结果返回给调用者，return 就是返回的意思，函数中我们直接返回 charAt 的结果。

有了 toHz(num) 函数，getDay() 获取到的数值就可以通过函数来处理一下，从而星期几的表达方式符合规范：

var day = now.getDay();
// ...
// 输出 day 变量时用 toHz(day)

下面的代码，与介绍Date对象的时候相比，除了上述细节处理，我们还做了一些其他方面的细微改动。请看：

<div id="textClock"></div>

<script language="javascript">

showTime();
setInterval(showTime, 1000);

function showTime(){
      var now = new Date();
      var year = now.getFullYear();
      var month = now.getMonth() + 1;
      var date = now.getDate();
      var day = now.getDay();
      var hour = now.getHours();
      if(hour < 10) hour = "0" + hour;
      var minute = now.getMinutes();
      if(minute < 10) minute = "0" + minute;
      var second = now.getSeconds();
      if(second < 10) second = "0" + second;
      document.getElementById("textClock").innerHTML = year + "年" + month + "月" + date + "日星期" + toHz(day) + "  " + hour + ":" + minute + ":" + second;
}

function toHz(num) {
      var hz = "日一二三四五六九";
      return(hz.charAt(num));
}

</script>