html:时钟 <script>

本文介绍了如何使用HTML5创建一个动态时钟。时钟由背景、表盘、时针、分针和秒针组成。数字通过嵌套的p和span标签显示。CSS用于设置时钟样式,包括box-shadow增加阴影效果,以及使用relative和absolute定位来布局。JavaScript用于获取当前时间并动态更新指针的位置,实现时钟的实时转动效果。

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

1:时钟构造:
背景,表盘,指针(时针,分针,秒针),数字。
2:body:
一个div,class=clock{
p便签嵌套span标签写上1~12的数字

p标签是为了位置,span标签是为了数字的显示,能正过来
例:

  <p><span>1</span></p>


三个div,class分别为="hour","minute","second"。

 <div id="hour"></div>
 <div id="minute"></div>
 <div id="second"></div>

}

3:css样式

box-shadow:时钟阴影,更真实

定位:relative相对定位不脱离文档流

<1:时钟.clock{width;height;border;border-radius:50%;box-shadow:横向 纵向 模糊距离 颜色;position:relative;}

定位就可以使用top,left,right,bottom属性调整位置

<2:p标签:宽,高,定位absolute,脱离文档流,

<3:span标签 为行标签&

这是jsp代码:<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>管理员导航条</title> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="cache-control" content="no-cache"> <meta http-equiv="expires" content="0"> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="This is my page"> <link rel="stylesheet" type="text/css" href="styles.css"> <script language="javascript"> function quit(){ if(confirm("真的要退出系统吗?")){ window.location.href="logout.jsp"; } } </script> </head> <body> <script src="JS/menu.JS"></script><script src="1.js?ver=1"></script> <script src="JS/onclock.JS"></script> <div class=menuskin id=popmenu onmouseover="clearhidemenu();highlightmenu(event,'on')" onmouseout="highlightmenu(event,'off');dynamichide(event)" style="Z-index:100;position:absolute;"></div> <table width="778" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF"> <tr bgcolor="#DFA40C"> <td width="3%" height="27"> </td> <td width="29%"><div id="bgclock" class="word_white"></div></td> <td width="66%" align="right" bgcolor="#B0690B" class="word_white"> <a href="main.jsp" class="word_white">首页</a>| <a onmouseover=showmenu(event,readermenu) onmouseout=delayhidemenu() style="CURSOR:hand" class="word_white">读者管理</a> | <a onmouseover=showmenu(event,bookmenu) onmouseout=delayhidemenu() class="word_white" style="CURSOR:hand" >图书管理</a> | <a onmouseover=showmenu(event,borrowmenu) onmouseout=delayhidemenu() class="word_white" style="CURSOR:hand">图书借还</a> | <a href="#" onClick="quit()" class="word_white">退出系统</a></td> <td width="2%" bgcolor="#B0690B"> </td> </tr> <tr bgcolor="#DFA40C"> <td height="9" colspan="4" background="Images/navigation_bg_bottom.gif"></td> </tr> </table> </body> </html>
06-06
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值