首先我们要有几张代表数字的图片，来代表0-9如图：

然后开始实现功能

下面展示 完整代码。

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>炫酷时钟</title><style>.box{width:500px;height:500px;margin: 0 auto;         /*使盒子居中*/text-align: center;     /*使盒子内容居中*/}</style> <script>function toDouble(n){       //规范时间的格式，都以二位数的形式输出if(n<10){return '0'+n}elsereturn ''+n}window.onload=function(){var aImg=document.getElementsByTagName('img');function getTime(){var str=new Date();var myTime=toDouble(str.getFullYear())+toDouble(str.getMonth()+1)+toDouble(str.getDate())+toDouble(str.getHours())+toDouble(str.getMinutes())+toDouble(str.getSeconds());               for(var i=0;i<aImg.length;i++){aImg[i].src='F:/html code/images/'+myTime[i]+'.png';}}getTime();setInterval(getTime,1000);  //定时器，每隔1s刷新一次};</script></head><body style="background-color: black;color: white;font-size: 50px;"><div class="box"><h3>今天是：<br></h3><img src="F:\html code\images\0.png"/><img src="F:\html code\images\0.png"/><img src="F:\html code\images\0.png"/><img src="F:\html code\images\0.png"/>年<img src="F:\html code\images\0.png"/><img src="F:\html code\images\0.png"/>月<img src="F:\html code\images\0.png"/><img src="F:\html code\images\0.png"/>日<br><img src="F:\html code\images\0.png"/><img src="F:\html code\images\0.png"/>:<img src="F:\html code\images\0.png"/><img src="F:\html code\images\0.png"/>:<img src="F:\html code\images\0.png"/><img src="F:\html code\images\0.png"/></div></body>
</html>

效果图

刚开始学习前端，加油！

HTML+CSS+JavaScript简单实现时钟相关推荐

利用Html,Css,javaScript简单写一个计算一天秒的倒计时
利用Html,Css,javaScript简单写一个计算一天还剩多少秒的倒计时页面代码我放下面,不多,就是我那个背景图我没有用精灵图,主要拼接太麻烦了,我直接img了,然后display:none; ...
HTML5期末大作业 HTML+CSS+JavaScript 简单的网页设计
常见网页设计作业题材有个人. 美食. 公司. 学校. 旅游. 电商. 宠物. 电器. 茶叶. 家居. 酒店. 舞蹈. 动漫. 明星. 服装. 体育. 化妆品. 物流. 环保. 书籍. 婚纱. 游 ...
【Web基础入门】一文搞懂HTML + CSS + JavaScript 简单了解
html html是什么超文本标记语言,运行在浏览器上超文本:超级文本,如流媒体.声音.视频标记语言:由大量的标签组成标签:任何一个标签都有开始标签和结束标签 html不是编程语言,没有变量, ...
DW学生个人网站制作：电影网站设计——电影请以你的名字呼唤我(4页) HTML+CSS+JavaScript 简单DIV布局个人介绍网页模板代码
一.作品介绍 1.作品简介 :学生个人网页制作,dw网页设计,静态div+css网页设计, A+水平 ,文章页支持手机PC响应式布局. 2.作品编辑:网页作品代码简单,可使用任意HTML编辑软件(如: ...
HTML学生个人网站作业设计：电影网站设计——漫威电影(2页) HTML+CSS+JavaScript 简单DIV布局个人介绍网页模板代码 DW学生个人网站制作成品下载
一.作品介绍 1.作品简介 :html期末大作业,dw学生网页设计作业, A+水平 ,喜欢的可以下载,文章页支持手机PC响应式布局. 2.作品编辑:作品下载后可使用任意HTML编辑软件(如:Dream ...
HTML学生个人网站作业设计：电影设计——爱影评在线电影(11页) HTML+CSS+JavaScript 简单DIV布局个人介绍网页模板代码 DW学生个人网站制作成品下载
一.作品介绍 1.作品简介 :html期末大作业,dw学生网页设计作业, A+水平 ,喜欢的可以下载,文章页支持手机PC响应式布局. 2.作品编辑:作品下载后可使用任意HTML编辑软件(如:Dream ...
HTML学生个人网站作业设计：电影网站设计——叮当电影(5页) HTML+CSS+JavaScript 简单DIV布局个人介绍网页模板代码 DW学生个人网站制作成品下载
一.作品介绍 1.作品简介 :html期末大作业,dw学生网页设计作业, A+水平 ,喜欢的可以下载,文章页支持手机PC响应式布局. 2.作品编辑:作品下载后可使用任意HTML编辑软件(如:Dream ...
HTML学生个人网站作业设计：电影网站设计——电影介绍(11页) HTML+CSS+JavaScript 简单DIV布局个人介绍网页模板代码 DW学生个人网站制作成品下载
一.作品介绍 1.作品简介 :html期末大作业,dw学生网页设计作业, A+水平 ,喜欢的可以下载,文章页支持手机PC响应式布局. 2.作品编辑:作品下载后可使用任意HTML编辑软件(如:Dream ...
HTML学生个人网站作业设计：电影网站设计——猫眼电影(9页) HTML+CSS+JavaScript 简单DIV布局个人介绍网页模板代码 DW学生个人网站制作成品下载
一.作品介绍 1.作品简介 :html期末大作业,dw学生网页设计作业, A+水平 ,喜欢的可以下载,文章页支持手机PC响应式布局. 2.作品编辑:作品下载后可使用任意HTML编辑软件(如:Dream ...

HTML+CSS+JavaScript简单实现时钟

首先我们要有几张代表数字的图片，来代表0-9如图：

然后开始实现功能

效果图

刚开始学习前端，加油！

HTML+CSS+JavaScript简单实现时钟相关推荐

最新文章

热门文章