HTML网页时钟设计（js实现）

最新推荐文章于 2025-07-08 13:52:08 发布

Memory沙漏

最新推荐文章于 2025-07-08 13:52:08 发布

阅读量7.9k

点赞数 5

CC 4.0 BY-SA版权

分类专栏： HTML网页设计文章标签：总结学习

本文链接：https://blog.csdn.net/m0_45329584/article/details/95898337

HTML网页设计专栏收录该内容

6 篇文章

订阅专栏

该博客主要介绍前端代码相关内容。若嫌自行创建麻烦，可通过链接下载源码，还提供了代码素材。同时列出需创建的文件，包括 HTML、public.css、web.css 和 web.js，最后提及有效果图。

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

一、简述：

如果自己创建闲麻烦可以下载源码，代码的素材也发出，在文章的下面可自行下载。

二、源码下载：

https://download.csdn.net/download/m0_45329584/11348612

三、文件创建：

在这里插入图片描述

HTML：

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>网页时钟</title>
    <meta name="Keywords" content="网页时钟">
    <meta name="Description" content="这是一个网页时钟"> 
    <link rel="stylesheet" href="css/public.css">
    <link rel="stylesheet" href="css/web.css">
    </head>
    <body>
    <div class="clock">
    	<img class="sz" id="sz" src="images/shizhen.png" alt="">
    	<img class="fz" id="fz" src="images/fenzhen.png" alt="">
    	<img class="mz" id="mz" src="images/miaozhen.png" alt="">
    	
    	<div class="shuzi">
    		<img src="images/num0.png" id="shiShi" alt="">
    		<img src="images/num0.png" id="shiGe" alt="">
    		<img src="images/dian.png" alt="">
    		<img src="images/num0.png" id="fenShi" alt="">
    		<img src="images/num0.png" id="fenGe" alt="">
    		<img src="images/dian.png" alt="">
    		<img src="images/num0.png" id="miaoShi" alt="">
    		<img src="images/num0.png" id="miaoGe" alt="">
    	</div>
    </div>
    <script src="js/web.js"></script>
    </body>
    </html>

public.css:

/* CSS Document */
*{
	margin: 0;
	padding: 0;
	}
ul,li,ol{
	list-style:none;
	}
a{
	text-decoration: none;
	}
.clears{
	clear: both;
	height: 0;
	line-height: 0;
	font-size: 0;
	overflow: hidden;
	}
a img{
	border:0;
	}

body{
	font-family:Arial,Verdana,Microsoft yahei,Simsun;
	}

web.css:

/* CSS Document */
.clock{
	margin-top: 50px;
	width: 455px;
	height: 455px;
	margin-left: auto;
	margin-right: auto;
	background:url(../images/clkock.png)no-repeat;
	position: relative;
	padding-top: 290px;
	}
.mz{
	position: absolute;
	left:50%;
	margin-left: -4px;
	top: 97px;
	transform-origin: center 130px   ;  /*旋转中心*/
}
.fz{
	position: absolute;
	left:50%;
	margin-left: -7px;
	top: 77px;
	transform-origin: center  150px ;  /*旋转中心*/
}
.sz{
	position: absolute;
	left:50%;
	margin-left: -8px;
	top: 120px;
	transform-origin: center 107px;  /*旋转中心*/
}
.shuzi>img{
	width: 9px;
	height: 15px;
}
.shuzi{
	height: 30px;
	width: 140px;
	margin-left: auto;
	margin-right: auto;
	line-height: 30px;
	text-align: center;
	border-style: solid ;
	border-color: #FF0000;
}

web.js:

// JavaScript Document
function showTime(){
	var mytime = new Date( ); 
	var miao = mytime.getSeconds();
	mz.style.transform = "rotateZ("+ miao*6  +"deg)";
	var fen = mytime.getMinutes();
	fz.style.transform = "rotateZ("+ (fen*6+miao*0.1)  +"deg)";
	var shi = mytime.getHours();
	sz.style.transform = "rotateZ("+ (shi*30+fen*0.5)  +"deg)";
	
	
//	电子时钟
	var shiShi = document.getElementById("shiShi");
	var shiGe = document.getElementById("shiGe");
	var fenShi = document.getElementById("fenShi");
	var fenGe = document.getElementById("fenGe");
	var miaoShi = document.getElementById("miaoShi");
	var miaoGe = document.getElementById("miaoGe");
	
	shiShi.src = "images/num"+Math.floor(shi/10) +".png";
	shiGe.src = "images/num"+ shi%10  +".png";
	fenShi.src = "images/num"+ Math.floor(fen/10)+".png";
	fenGe.src = "images/num"+  fen%10+".png";
	miaoShi.src = "images/num"+ Math.floor(miao/10) +".png";
	miaoGe.src = "images/num"+ miao%10 +".png";
	
}
var myset = setInterval(function(){ 
	showTime();
},1000);
//	电子时钟 end