HTML时钟自练

最新推荐文章于 2019-08-29 17:31:30 发布

ACE1125

最新推荐文章于 2019-08-29 17:31:30 发布

阅读量236

点赞数 2

CC 4.0 BY-SA版权

分类专栏：前端文章标签： HTML 时钟音乐换背景

本文链接：https://blog.youkuaiyun.com/h_h_1122/article/details/97376438

前端专栏收录该内容

17 篇文章

订阅专栏

这篇博客展示了如何使用HTML实现一个实时显示当前时间的时钟，并结合JavaScript实现每秒更新时间的功能。同时，博客中还介绍了如何通过下拉菜单切换背景图片以及自动播放音乐的实现方法。

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

实现的功能：

1.获取当前时间；

2.转换背景图片；

3.自动播放音乐。

代码如下：

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8" />
       <title></title>
   </head>
   <style>
       #mycolock{
           font-size:-webkit-xxx-large;
           font-style: oblique;
           color:#990066;
           text-align: center;
           padding-top: 6%;
           background-image: url(img/11.jpg);
       }
   </style>
   <body style="background-image: url(img/img1.jpg);">
       <center>
           <font size="7" color="#CCCC">M Y C O L C K</font>
           <br /><br />
       <div style="border: 10px double aqua; width: 400px;height: 400px;" id="mycolock">
       </div>
       </center>
       <select onchange="changeLink(this)">
       <option value="请选择">请选择</option>
       <option value="url(img/img3.jpg)">背景2</option>
       <option value="url(img/img4.jpg)">背景3</option>
       <option value="url(img/img5.jpg)">背景4</option>
       <option value="url(img/img8.jpg)"> 背景5</option>
   </select>
   <script type="text/javascript">
       function showTime(){
           var today=new Date();
           var year=today.getFullYear();//获得年
           var month=today.getMonth()+1;//获得月
           var day=today.getDate();//获得日
           var hh=today.getHours();//获得小时
           var mm=today.getMinutes();//获得分钟
           var ss=today.getSeconds();//获得秒
       document.getElementById("mycolock").innerHTML=year+"年<br/><br/>"+month+"月"+day+"日<br/><br/>"+hh+":"+mm+":"+ss;
       }
       window.setInterval("showTime()",1000);//每隔1秒取一次当前的时间
       window.onload=showTime;
          //换背景图片
       function changeLink(obj){
              document.body.style.backgroundImage=obj.value;
       }
   </script>
   <embed src="img/好妹妹 - 对面的女孩看过来 (Live).mp3" autostart="true" loop="true" width="0" height="0">
   </embed>
   </body>
</html>

运行结果：