本文主要介绍用css制作简单的时钟效果(用css制作简单的时钟)，下面一起看看用css制作简单的时钟效果(用css制作简单的时钟)相关资讯。
用css本地js做一个简单的时钟。效果如下。为了达到这个效果，分为三大块:html，javascript，css。html的一部分html部分相对简单。时钟的div的定义是秒、原点、日期和几个小时内的时间，如时钟校准、数字等元素。因为数字越多，生成的jvascript时钟的css部分需要知道一些css属性，比如位置，边框半径，转换等。在开始编码之前。位置属性位置属性指定元素的位置类型。有五个值:绝对、固定、相对、静态和继承。默认是静态的，即没有位置，按照正常的文档流显示元素。这里主要用绝对和相对。对于绝对值，被设置为绝对定位的元素可以位于by 左 ， ，右 相对于母元素的第一静态定位事故位置；如果上面的元素是静态的，主体的位置是相对于定位元素的。在这个例子中，我们将最外面的div时钟设置为相对的，将接下来的所有元素设置为绝对的绝对位置，然后通过设置left、top和其他属性来确定时钟相对于时钟的位置。边框半径属性边框半径属性为元素添加一个角边框，以设置四个圆角的大小。在这种情况下，它用于将时钟元素设置为圆形。下面举个例子:四个div元素，都是100px，边界半径不同。变换属性变换属性旋转到二维或三维的元素，使元素旋转、缩放、移动或倾斜。在小时、分钟和秒的情况下，转换属性旋转是按比例设置的。此外，可以将变换原点属性设置为元素的点位置。css部分的代码是global * { margin:0；填充:0；时钟{宽度:400px；高度:400px；边框:10px纯色# 333；；箱子的阴影:0px 0px 20px 3px # 444插图；边界半径:210px；位置:相对；保证金:5px车；z指数:10；背景色:# f6f6f6；}数字钟时钟数{宽度:40px；高度:40px；字号:22px；文本对齐:居中；行高:40px；位置:绝对；z指数:8；颜色:# 555；字体:幻想 投石机ms；；} em_num { .字号:28px；} * *指针时钟线{位置:绝对；z指数:20；}小时线:100px { width高度:4px；上图:198px；左:200px；背景色:# 000；边界半径:2px；转换起点:0 50%；盒影:1px-3px 8px 3px # aaa；；}分钟线{宽度:130px；高度:2px；上图:199px；左:190px；背景色:# 000；转换来源:7.692% 50%；盒影:1px-3px 8px 1px # aaa；；}第二行{。宽度:170px；高度:1px；上图:199.5px；左:180px；背景色:# f60；转换来源:11.765% 50%；盒影:1px-3px 7px 1px # bbb；；}源*原点{宽度:20px；高度:20px；边界半径:10px；背景色:# 000；位置:绝对；上图:190px；左:190px；z指数:14；}日期和时间日期信息{ width:160 px；；高度:28px；行高:28px；文本对齐:居中；位置:绝对；上图:230px；左:120px；z指数:11；颜色:# 555；字体粗细:加粗；微软雅黑字体；}时间信息{ width:92px；；高度:30px；行高:30px；文本对齐:居中；位置:绝对；上图:270px；左:154px；z指数:11；背景色:# 555；填充:0；箱子的阴影:0px 0px 9px 2px # 222插图；} time { width:30px；；高度:30px；文本对齐:居中；浮点数:左；颜色:# fff；；字体粗细:加粗；} #分钟{ left margin:1px solid # fff；border:1px solid # fff；刻度时钟刻度(宽度:195px);高度:2px；转换起点:0% 50%；z指数:7；位置:绝对；上图:199px；左:200px；}刻度显示{ width:12px；；高度:2px；背景色:# 555；浮点数:左；}缩放隐藏{ width:183 px；；高度:2px；浮点数:左；javascript的部分和js的部分没什么好说的。简单的dom操作，每秒执行一次setinterval函数，可以修改指针的角度和时间显示。代码如下(function {)窗口。。onload = initnumxy(200，160，40，40)；被动hour _ line =文档。getelementbyid(时间轴)；无功功率分钟_线=文件。getelementbyid(分钟线)；反应式second _ line =文档。getelementbyid(第二行)；反应日期信息=文件。getelementbyid(数据信息)；被动week _ day = {星期日，星期一，星期二，星期三，星期四， ， };反应时间=文档。getelementbyid(时间)；无功功率分钟时间=文档。getelementbyid(时间)；反应式second _ time =文档。getelementbyid(times)；action time{ reactive this _ day = new date；var =小时(本日。获取当前小时数)(= 12)(this _ day . get hours-12):this _ day . get hours；var minutes = this _ day . get minutes；无功功率2 =本日。get seconds；无功hour_rotate =(小时* 30-90) (math.floor(分钟/12)* 6)；var year = this _ day . getfullyear；var month =((this _ day . getmonth1)lt； amplt；10)0(this _ day . getmonth)(1):(this _ day . getmonth1)；var date =(this _ day . getdate< 10)0 this _ day . getdate:this _ day . getdate；var day = this _ day . getday；hour _ line . style . transform = ;旋转(hour _ rotate degminute _ line . style . transform = ;旋转((分钟×6-90) ;deg)；second _ line . style . transform = ;旋转((2 * 6-90度)) deg)；date_info.innerhtml =年-月-日week _ day { days }；hour _ time . innerhtml =(this _ day . get hours< 10)0 this _ day . get hours:this _ day . get hours；minute _ time . innerhtml =(this _ day . get minutes< 10)0 this _ day . get minutes:this _ day . get minutes；second _ time . innerhtml =(this _ day . get seconds< 10)0 this _ day . get seconds:this _ day . get seconds；} setinterval(时间，1000)；函数initnumxy(r，r，w，h){无功numxy = {{left: r 0.5 * r-0.5 * w，top: r-0.5×r * 1.73205-0.5×h}，{left: r0.5 * * 1.73205-0 .上:r-0.5-r-0.5×h}、{左:r-0.5 * w、上:r-0.5 * h}、{左:r 0.5 * * 1.73205-0.5 * w、上:r0.5 * r-0.5 *。{左:r 0.5 * r-0.5 * w，上:r 0.5 * r * 1.732-0.5 * h}，{左:r-0.5 * w，上:r-r-0.5×h}，{左:r-0.5 * r-top:r 0.5 * r * 1.732-0.5 * h }，{左:r-0.5 * r * 1.73205-0.5 * w，上:r 0.51.73205-0.5×h}，{左:r-0.5 * w，上:r-r-0.5 * h } }；；var clock document . getelementbyid(时钟)；for(var i = 1；；i 12i){ if(i % = 3 = 0){ clock . innerhtml = me；{ person } clock . innerhtml i =；}}无功时钟_编号=文档。getelementsbyclassname(钟敏)；for(var i = 0；；i时钟_数字.长度；我){时钟号码{我}。style.left = numxy { i } left px；时钟编号{i}。style.top = numxy { i } top px；} for(var i = 0；；i 60i){ clock . innerhtml =；} var scale =文档。getelementsbyclassname(时钟)；for(var i = 0；；i .比例尺.长度；i ){ scale {me}。风格。transform =旋转((我是90)度；} } });以上是本文的全部内容，希望能对你有所帮助，也希望你多多支持。
了解更多用css制作简单的时钟效果(用css制作简单的时钟)相关内容请关注本站点。