初遇JS，做一个简易数字时钟（用js做时钟）

nanyue 2024-07-23 13:26:03 技术文章 7 ℃

初遇JS，做一个简易数字时钟。

《JavaScript》学习过程中的心得与总结

1、做一个数字时钟，首先我们先放上图片，给他的背景加点颜色

<body style="color: #FF9900; background-color: #cccccc">

<img src="images/0.jpg" />

时

<img src="images/0.jpg" />

分

<img src="images/0.jpg" />

秒

</body>

现在是这个样子：

在给他设置一个按钮，用更新系统时间：

<input id="btn1" type="button" value="更新时间">

2、想做一个数字时钟，最重要的是先想办法获取系统时间。

所以我们写一个JS，来获取系统时间

<script type="text/javascript">

window.onload=function (){

//上一篇文章已经讲过，windows.onload的作用

var Img=document.getElementsByTagName('img');

var Btn=document.getElementById('btn1');

var i=0;

Btn.onclick=function() {

var oDate = new Date();

//初始化创建一个新对象(获取系统时间

var str=oDate.getHours()+'点'+oDate.getMinutes()+'分'+oDate.getSeconds()+'秒';

</script>

现在当我们点击更新按钮时，我们的程序显示如下：

3、获取系统时间之后我们发现，我们的时间是有六张图片的，可是我们在更新系统时间时发现当一秒钟时我们的系统时间显示为21点10分4秒

我们如果想让它显示21时10分04秒应该怎么做呢？

我们应该创建一个函数，让他去判断

function toDouble(num) {

if (num<10)

{

return '0'+num;

}

else

{

return ''+num;

} ｝

 var str=toDouble(oDate.getHours())+toDouble(oDate.getMinutes())+toDouble(oDate.getSeconds());

alert(str);

</script>
</head>

此时，获取系统时间就完成了

网站首页 > 技术文章 正文