^_^ JS实现可爱的时钟功能

最新推荐文章于 2025-08-06 16:42:26 发布

xinhong07

最新推荐文章于 2025-08-06 16:42:26 发布

阅读量263

点赞数 1

CC 4.0 BY-SA版权

文章标签： javascript function date

本文链接：https://blog.youkuaiyun.com/xinhong07/article/details/5875264

本文介绍了一款使用HTML和JavaScript实现的可爱数字时钟。该时钟通过更换不同的数字图片来显示当前时间，用户可以轻松更改其风格。代码简洁，易于理解和修改。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

上面这个就是效果截图，自己觉得很可爱~~

代码超级简单，要改风格也很容易，关键是自己找好数字图片素材即可~~

<html>
<head>
<script language="javascript">
function startTime()
{
  var today=new Date()
  var h=today.getHours()
  var m=today.getMinutes()
  var s=today.getSeconds()

  document.getElementById('h1').src=""+Math.floor(h/10)+".png"
  document.getElementById('h2').src=""+h%10+".png"
  document.getElementById('m1').src=""+Math.floor(m/10)+".png"
  document.getElementById('m2').src=""+m%10+".png"
  document.getElementById('s1').src=""+Math.floor(s/10)+".png"
  document.getElementById('s2').src=""+s%10+".png"
  t=setTimeout('startTime()',1000)
}

</script>
</head>