JS：完善数字时钟
本帖最后由 马黑黑 于 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>
<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>
if(second < 10) second = "0" + second;
这个特别棒，这样就变成了习惯性的显示方式{:4_199:} var hz = "日一二三四五六九";
这句没看懂，为什么是九，一周不是七天么？ 讲得很清楚，黑黑辛苦了{:4_187:} 红影 发表于 2022-3-19 11:18
var hz = "日一二三四五六九";
这句没看懂，为什么是九，一周不是七天么？
本来是预留给一到九的，这样还可以在同一个函数里加入其它汉字数字的处理，后来为了简便仅处理星期，就将六后面的删掉，没删除干净{:4_170:} 红影 发表于 2022-3-19 11:19
讲得很清楚，黑黑辛苦了
这个也是在线编写，没有运行测试，但写的时候很自信 黑黑太棒了{:4_178:}
现在发现flash语句可以实现的，css都可以达到这个效果，这个时间效果我swf有做过的 小辣椒 发表于 2022-3-19 12:36
黑黑太棒了
现在发现flash语句可以实现的，css都可以达到这个效果，这个时间效果我swf有做过的
厉害厉害 马黑黑 发表于 2022-3-19 11:22
这个也是在线编写，没有运行测试，但写的时候很自信
黑黑太厉害了，佩服佩服{:5_116:} 马黑黑 发表于 2022-3-19 11:21
本来是预留给一到九的，这样还可以在同一个函数里加入其它汉字数字的处理，后来为了简便仅处理星期，就将 ...
哦哦，还以为又其他的说法，原来只是忘记删呀{:4_173:} 红影 发表于 2022-3-19 20:05
哦哦，还以为又其他的说法，原来只是忘记删呀
在线编辑的习惯，我改不了。今后还是努力一下，弄好再来发 红影 发表于 2022-3-19 20:04
黑黑太厉害了，佩服佩服
没啥的，胸有成竹而已，可惜竹没成 马黑黑 发表于 2022-3-19 20:41
在线编辑的习惯，我改不了。今后还是努力一下，弄好再来发
在线弄，很熟练的表现{:4_199:} 马黑黑 发表于 2022-3-19 20:42
没啥的，胸有成竹而已，可惜竹没成
这个已经很成竹了呀，小失误不算什么，连回帖打字我还总错呢{:4_173:} 红影 发表于 2022-3-19 22:51
这个已经很成竹了呀，小失误不算什么，连回帖打字我还总错呢
应该减少这类错误 红影 发表于 2022-3-19 22:50
在线弄，很熟练的表现
挑战一下自己吧 马黑黑 发表于 2022-3-19 22:59
应该减少这类错误
这么严格呀{:4_173:} 马黑黑 发表于 2022-3-19 22:59
挑战一下自己吧
黑黑很赞的，看到连钟表的指针也设计好了{:4_199:} 红影 发表于 2022-3-20 13:42
黑黑很赞的，看到连钟表的指针也设计好了
要做的精美，还需要细细雕琢
页:
[1]
2