数码资讯
用css制作简单的时钟
用CSS本地js制作简单的时钟。效果如下 为了达到这个效果，它被分成三个大的块：HTML、Javaｓｃｒｉｐｔ、CSS。 HTML的一部分 HTML部分比较简单，一个时钟的div的定义，在几个小时内秒，产地，日期和时间，如时钟校准，数字和其他元素，因为数量越多，产生的jvaｓｃｒｉｐｔ 时钟 CSS
选购提示
关注价格、性能、续航、售后和真实使用场景，理性比较后再下单。
用CSS本地js制作简单的时钟。效果如下
为了达到这个效果，它被分成三个大的块：HTML、Javaｓｃｒｉｐｔ、CSS。
HTML的一部分
HTML部分比较简单，一个时钟的div的定义，在几个小时内秒，产地，日期和时间，如时钟校准，数字和其他元素，因为数量越多，产生的jvaｓｃｒｉｐｔ
时钟
CSS部分
在启动代码之前，需要了解CSS的一些属性，如位置、边框半径、转换等。
位置属性
位置属性指定元素的位置类型。有五种价值观：绝对的、固定的、相对的、静态的和继承的。默认是静态的，也就是说，没有位置，并且元素是按照正常的文档流显示的。这里主要使用绝对和相对。
对absulte值，设置为绝对定位的元素，相对于父元素的第一个静态定位事故位置，该位置可以位于by'left '，' '，对'，底部的属性；如果上级元素是静态的，身体是相对于定位元件的位置
在这个例子中，我们将最外层的div时钟设置为相对，所有的下一个元素被设置为绝对绝对位置，然后通过设置左、顶和其他属性来确定时钟相对于时钟的位置。
border-radius属性
边界半径属性为元素添加一个角边框来设置四个圆角的大小，在这种情况下，它用来将时钟元素设置成一个圆。
这里有一个例子：4个DIV元素，这两者都是100px，边界半径不同。
变换属性
变换属性通过二维或三维旋转到元素上，使元素旋转、缩放、移动或倾斜，在小时、分针和秒针的情况下，用尺度来设置变换属性旋转，此外，变换原点属性可以设置为元素的点位置。
CSS部分的代码
全球
* {
保证金：0；
填充：0；
}
钟{。
宽度：400px；
身高：400px；
边境：10px solid # 333；
盒子的影子：0px 0px 20px 3px # 444插图；
边界半径：210px；
职位：相对；
保证金：5px汽车；
Z指数：10；
背景颜色：# f6f6f6；
}
数字时钟
时钟号{
宽度：40px；
身高：40px；
字体大小：22px；
文本对齐：中心；
行高：40px；
位置：绝对；
Z指数：8；
颜色：# 555；
字体：幻想，'trebuchet MS；
}
em_num {。
字体大小：28px；
}
* *指针
时钟线{
位置：绝对；
Z指数：20；
}
小时线：100px {宽度；
身高：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；
}
日期和时间
日期信息{
宽度：160px；
身高：28px；
行高：28px；
文本对齐：中心；
位置：绝对；
上图：230px；
左：120px；
Z指数：11；
颜色：# 555；
字体粗细：粗体；
'microsoft雅黑字体；
}
时间信息{
宽度：92px；
身高：30px；
行高：30px；
文本对齐：中心；
位置：绝对；
上图：270px；
左：154px；
Z指数：11；
背景颜色：# 555；
填充：0；
盒子的影子：0px 0px 9px 2px # 222插图；
}
时间{。
宽度：30px；
身高：30px；
文本对齐：中心；
浮点数：左；
颜色：# FFF；
字体粗细：粗体；
}
#分钟时间{
左边界：1px solid # FFF；
边境：1px solid # FFF；
}
规模
时钟刻度{
宽度：195px；
身高：2px；
转换原点：0% 50%；
Z指数：7；
位置：绝对；
上图：199px；
左：200px；
}
刻度显示{
宽度：12px；
身高：2px；
背景颜色：# 555；
浮点数：左；
}
比例隐藏{
宽度：183px；
身高：2px；
浮点数：左；
}
Javaｓｃｒｉｐｔ的部分
JS的部分是没什么可说的，简单的DOM操作，setInterval函数被执行的每一秒，和指针的角度和时间显示可以修改。代码如下
（函数（）{（））
窗口。onload = initnumxy（200, 160，40,40）；
无功hour_line = document.getelementbyid（时间线）；
无功minute_line = document.getelementbyid（分钟线）；
无功second_line = document.getelementbyid（二线）；
无功date_info = document.getelementbyid（数据信息）；
无功week_day = {
星期日，星期一，星期二，星期三，星期四，‘，'
}；
无功hour_time = document.getelementbyid（时间）；
无功minute_time = document.getelementbyid（时间）；
无功second_time = document.getelementbyid（次）；
作用时间（）{
无功this_day =新的日期（）；
var =小时（this_day。获得当前的小时）（> = 12）
（this_day.gethours（）- 12）：this_day.gethours（）；
VaR分钟= this_day.getminutes（）；
无功二= this_day.getseconds（）；
无功hour_rotate =（小时* 30-90）+（Math.floor（分钟/ 12）* 6）；
VaR年= this_day.getfullyear（）；
VaR月=（（this_day.getmonth（）+ 1）＜＜10）
0+（this_day.getmonth）+（1）：（this_day.getmonth（）+ 1）；
var date =（this_day.getdate（）＜10）
0 + this_day.getdate（）：this_day.getdate（）；
VaR天= this_day.getday（）；
hour_line.style.transform = 'rotate（+ hour_rotate + 'deg ；
minute_line.style.transform = 'rotate（+（分钟×6 - 90）+ 'deg ）；
second_line.style.transform = 'rotate（+（二* 6 - 90）+ 'deg）；
date_info.innerhtml =
年+-+月+-+日期+++ week_day {天}；
hour_time.innerhtml =（this_day.gethours（）＜10）
0 + this_day.gethours（）：this_day.gethours（）；
minute_time.innerhtml =（this_day.getminutes（）＜10）
0 + this_day.getminutes（）：this_day.getminutes（）；
second_time.innerhtml =（this_day.getseconds（）＜10）
0 + this_day.getseconds（）：this_day.getseconds（）；
}
setInterval（时间，1000）；
功能initnumxy（R，R，W，H）{
无功numxy = {
{
左：R + 0.5 * r - 0.5 * W，
顶部：r - 0.5×r * 1.73205 - 0.5×h
}，
{
左：R + 0.5 * * 1.73205 - 0.5 * W，
顶部：r - 0.5 - r - 0.5×h
}，
{
左：R + R - 0.5 * W，
顶部：r - 0.5 * h
}，
{
左：R + 0.5 * * 1.73205 - 0.5 * W，
顶部：R + 0.5 * r - 0.5 * h
}，
{
左：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 - 0.5 * W，
顶部：R + 0.5 * r * 1.732 - 0.5 * h
}，
{
左：R - 0.5 * r * 1.73205 - 0.5 * W，
顶部：R + 0.5 * r - 0.5 * h
}，
{
左：R - R - 0.5 * W，
顶部：r - 0.5 * h
}，
{
左：R - 0.5 * r * 1.73205 - 0.5 * W，
顶部：r - 0.5 - r - 0.5×h
}，
{
左：R - 0.5 * r - 0.5 * W，
顶部：r - 0.5×r * 1.73205 - 0.5×h
}，
{
左：R - 0.5 * w，
顶部：r - R - 0.5 * h
}
}；
VaR的时钟document.getelementbyid（时钟）；
对于（var i = 1；i < 12；i + +）{
如果（i % = 3 = 0）{
clock.innerhtml =+我+ ；
{人}
clock.innerhtml +我+ + = ；
}
}
无功clock_num = document.getelementsbyclassname（钟民）；
对于（var i = 0；i < clock_num.length；i++）{
clock_num {我}。style.left = numxy {我}左+ 'px；
clock_num {我}。style.top = numxy {我}顶+ 'px；
}
对于（var i = 0；i < 60；i + +）{
clock.innerhtml + =+
+
+
；
}
VaR规模= document.getelementsbyclassname（钟表）；
对于（var i = 0；i < scale.length；i++）{
规模{我}。风格。变换=旋转（+（我90）+ 度；
}
}
}）；
以上是本文的全部内容，希望能对您有所帮助，希望大家多多支持。
为了达到这个效果，它被分成三个大的块：HTML、Javaｓｃｒｉｐｔ、CSS。
HTML的一部分
HTML部分比较简单，一个时钟的div的定义，在几个小时内秒，产地，日期和时间，如时钟校准，数字和其他元素，因为数量越多，产生的jvaｓｃｒｉｐｔ
时钟
CSS部分
在启动代码之前，需要了解CSS的一些属性，如位置、边框半径、转换等。
位置属性
位置属性指定元素的位置类型。有五种价值观：绝对的、固定的、相对的、静态的和继承的。默认是静态的，也就是说，没有位置，并且元素是按照正常的文档流显示的。这里主要使用绝对和相对。
对absulte值，设置为绝对定位的元素，相对于父元素的第一个静态定位事故位置，该位置可以位于by'left '，' '，对'，底部的属性；如果上级元素是静态的，身体是相对于定位元件的位置
在这个例子中，我们将最外层的div时钟设置为相对，所有的下一个元素被设置为绝对绝对位置，然后通过设置左、顶和其他属性来确定时钟相对于时钟的位置。
border-radius属性
边界半径属性为元素添加一个角边框来设置四个圆角的大小，在这种情况下，它用来将时钟元素设置成一个圆。
这里有一个例子：4个DIV元素，这两者都是100px，边界半径不同。
变换属性
变换属性通过二维或三维旋转到元素上，使元素旋转、缩放、移动或倾斜，在小时、分针和秒针的情况下，用尺度来设置变换属性旋转，此外，变换原点属性可以设置为元素的点位置。
CSS部分的代码
全球
* {
保证金：0；
填充：0；
}
钟{。
宽度：400px；
身高：400px；
边境：10px solid # 333；
盒子的影子：0px 0px 20px 3px # 444插图；
边界半径：210px；
职位：相对；
保证金：5px汽车；
Z指数：10；
背景颜色：# f6f6f6；
}
数字时钟
时钟号{
宽度：40px；
身高：40px；
字体大小：22px；
文本对齐：中心；
行高：40px；
位置：绝对；
Z指数：8；
颜色：# 555；
字体：幻想，'trebuchet MS；
}
em_num {。
字体大小：28px；
}
* *指针
时钟线{
位置：绝对；
Z指数：20；
}
小时线：100px {宽度；
身高：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；
}
日期和时间
日期信息{
宽度：160px；
身高：28px；
行高：28px；
文本对齐：中心；
位置：绝对；
上图：230px；
左：120px；
Z指数：11；
颜色：# 555；
字体粗细：粗体；
'microsoft雅黑字体；
}
时间信息{
宽度：92px；
身高：30px；
行高：30px；
文本对齐：中心；
位置：绝对；
上图：270px；
左：154px；
Z指数：11；
背景颜色：# 555；
填充：0；
盒子的影子：0px 0px 9px 2px # 222插图；
}
时间{。
宽度：30px；
身高：30px；
文本对齐：中心；
浮点数：左；
颜色：# FFF；
字体粗细：粗体；
}
#分钟时间{
左边界：1px solid # FFF；
边境：1px solid # FFF；
}
规模
时钟刻度{
宽度：195px；
身高：2px；
转换原点：0% 50%；
Z指数：7；
位置：绝对；
上图：199px；
左：200px；
}
刻度显示{
宽度：12px；
身高：2px；
背景颜色：# 555；
浮点数：左；
}
比例隐藏{
宽度：183px；
身高：2px；
浮点数：左；
}
Javaｓｃｒｉｐｔ的部分
JS的部分是没什么可说的，简单的DOM操作，setInterval函数被执行的每一秒，和指针的角度和时间显示可以修改。代码如下
（函数（）{（））
窗口。onload = initnumxy（200, 160，40,40）；
无功hour_line = document.getelementbyid（时间线）；
无功minute_line = document.getelementbyid（分钟线）；
无功second_line = document.getelementbyid（二线）；
无功date_info = document.getelementbyid（数据信息）；
无功week_day = {
星期日，星期一，星期二，星期三，星期四，‘，'
}；
无功hour_time = document.getelementbyid（时间）；
无功minute_time = document.getelementbyid（时间）；
无功second_time = document.getelementbyid（次）；
作用时间（）{
无功this_day =新的日期（）；
var =小时（this_day。获得当前的小时）（> = 12）
（this_day.gethours（）- 12）：this_day.gethours（）；
VaR分钟= this_day.getminutes（）；
无功二= this_day.getseconds（）；
无功hour_rotate =（小时* 30-90）+（Math.floor（分钟/ 12）* 6）；
VaR年= this_day.getfullyear（）；
VaR月=（（this_day.getmonth（）+ 1）＜＜10）
0+（this_day.getmonth）+（1）：（this_day.getmonth（）+ 1）；
var date =（this_day.getdate（）＜10）
0 + this_day.getdate（）：this_day.getdate（）；
VaR天= this_day.getday（）；
hour_line.style.transform = 'rotate（+ hour_rotate + 'deg ；
minute_line.style.transform = 'rotate（+（分钟×6 - 90）+ 'deg ）；
second_line.style.transform = 'rotate（+（二* 6 - 90）+ 'deg）；
date_info.innerhtml =
年+-+月+-+日期+++ week_day {天}；
hour_time.innerhtml =（this_day.gethours（）＜10）
0 + this_day.gethours（）：this_day.gethours（）；
minute_time.innerhtml =（this_day.getminutes（）＜10）
0 + this_day.getminutes（）：this_day.getminutes（）；
second_time.innerhtml =（this_day.getseconds（）＜10）
0 + this_day.getseconds（）：this_day.getseconds（）；
}
setInterval（时间，1000）；
功能initnumxy（R，R，W，H）{
无功numxy = {
{
左：R + 0.5 * r - 0.5 * W，
顶部：r - 0.5×r * 1.73205 - 0.5×h
}，
{
左：R + 0.5 * * 1.73205 - 0.5 * W，
顶部：r - 0.5 - r - 0.5×h
}，
{
左：R + R - 0.5 * W，
顶部：r - 0.5 * h
}，
{
左：R + 0.5 * * 1.73205 - 0.5 * W，
顶部：R + 0.5 * r - 0.5 * h
}，
{
左：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 - 0.5 * W，
顶部：R + 0.5 * r * 1.732 - 0.5 * h
}，
{
左：R - 0.5 * r * 1.73205 - 0.5 * W，
顶部：R + 0.5 * r - 0.5 * h
}，
{
左：R - R - 0.5 * W，
顶部：r - 0.5 * h
}，
{
左：R - 0.5 * r * 1.73205 - 0.5 * W，
顶部：r - 0.5 - r - 0.5×h
}，
{
左：R - 0.5 * r - 0.5 * W，
顶部：r - 0.5×r * 1.73205 - 0.5×h
}，
{
左：R - 0.5 * w，
顶部：r - R - 0.5 * h
}
}；
VaR的时钟document.getelementbyid（时钟）；
对于（var i = 1；i < 12；i + +）{
如果（i % = 3 = 0）{
clock.innerhtml =+我+ ；
{人}
clock.innerhtml +我+ + = ；
}
}
无功clock_num = document.getelementsbyclassname（钟民）；
对于（var i = 0；i < clock_num.length；i++）{
clock_num {我}。style.left = numxy {我}左+ 'px；
clock_num {我}。style.top = numxy {我}顶+ 'px；
}
对于（var i = 0；i < 60；i + +）{
clock.innerhtml + =+
+
+
；
}
VaR规模= document.getelementsbyclassname（钟表）；
对于（var i = 0；i < scale.length；i++）{
规模{我}。风格。变换=旋转（+（我90）+ 度；
}
}
}）；
以上是本文的全部内容，希望能对您有所帮助，希望大家多多支持。
声明：本文内容用于数码产品信息整理与选购参考，具体价格、库存、售后政策以官方渠道和电商页面实时信息为准。