使用javascript制作与当地时间相对应的模拟时钟

时间：2018-05-09 23:50:01

标签： javascript css3 css-animations

我创建了一个可以与css一起使用的模拟时钟。 就在这里

.frame {
	position : absolute;
	top : 0;
	bottom : 0;
	right : 0;
	left : 0;
	margin : auto;
	width : 100%;
	height : 100%;
	border-radius : 50%;
	border : 5px groove #000;
	border-color : ;
	/* transform : rotateZ(45deg); */
	box-shadow : inset 0 0 10px 2px #000;
}
.secHand, .minHand, .hourHand {
	background :  ;
	position : absolute ;
	top :  2%;
	bottom : ;
	width : 0;
	right : 0;
	left : 0;
	margin : auto;
	transform-origin : 100% 100%;
	/* transform : rotate(-45deg); */
	border-right : 1px solid #000;
	}
	.hourCut, .miniCut {
		position : absolute ;
		width : 100% ;
		bottom : 0;
	}
	.hourCut {
		height : 50% ;
		border-right : 3px solid #000;
	}
	.miniCut {
		height : 70% ;
		border-right : 2px solid #00f;
		}
	.hourHand {
		height : 48%;
		background : transparent ;
		border-right : 3px solid transparent;
		animation : clockwise 43200s linear infinite;
		z-index : 5 ;
	}
	.minHand {
		height : 48%;
		border-right : 2px solid transparent;
		animation : clockwise 3600s linear infinite;
		z-index : 4 ;
	}

	.secHand {
		height : 48%;
	animation : clockwise 60s linear infinite ;
	z-index : 6 ;
}
@keyframes clockwise {
	0% {
		transform : rotateZ(0deg);
}
100% {
transform : rotateZ(360deg);
}
}
.containerX {
	position : absolute;
	top : 0 ;
	bottom : 0 ;
	left : 0;
	right : 0;
	margin : auto;
	height : 300px;
	width : 300px;
}
.innerFrame, .smallFrame {
	position : absolute ;
	top : 0 ;
	bottom : 0 ;
	right : 0 ;
	left : 0 ;
	margin : auto ;
	border : 1px solid transparent;
	border-radius : 50% ;
	background : #fff;
	display : ;	
}
.innerFrame {
	height : 90% ;
	width : 90% ;
	box-shadow : 0 0 10px 2px #000;
	z-index : 1 ;
}
.smallFrame {
	height : 80% ;
	width : 80% ;
	z-index : 3 ;
}
.calibrate {
	position : absolute ;
	top : 0 ;
	bottom : ;
	right : 0 ;
	left : 0 ;
	margin : auto ;
	height : 50% ;
	width : 0 ;
	transform-origin : 100% 100% ;
	border-right : 1px solid #fff;
}
.indicators {
	border-right : 1px solid #00f;
	box-shadow : 0 0 5px 0px #000;
	z-index : 2  ;
}
.knob {
	position : absolute ;
	top : 0 ;
	bottom : 0 ;
	right : 0 ;
	left : 0 ;
	margin : auto ;
	height : 1.5% ;
	width : 1.5% ;
	border-radius : 50% ;
	border : 3px solid #000;
	background : #fff ;
	z-index : 7 ;
}
.r0 {
	transform : rotateZ(0deg)
}
.r6 {
	transform : rotateZ(6deg) 
}
.r12 {
	transform : rotateZ(12deg)
}
.r18 {
	transform : rotateZ(18deg)
}
.r24 {
	transform : rotateZ(24deg)
}
.r30 {
	transform : rotateZ(30deg)
}
.r36 {
	transform : rotateZ(36deg)
}
.r42 {
	transform : rotateZ(42deg)
}
.r48 {
	transform : rotateZ(48deg)
}
.r54 {
	transform : rotateZ(54deg)
}
.r60 {
	transform : rotateZ(60deg)
}
.r66 {
	transform : rotateZ(66deg)
}
.r72 {
	transform : rotateZ(72deg)
}
.r78 {
	transform : rotateZ(78deg)
}
.r84 {
	transform : rotateZ(84deg)
}
.r90 {
	transform : rotateZ(90deg)
}
.r96 {
	transform : rotateZ(96deg)
}
.r102 {
	transform : rotateZ(102deg)
}
.r108 {
	transform : rotateZ(108deg)
}
.r114 {
	transform : rotateZ(114deg)
}
.r120 {
	transform : rotateZ(120deg)
}
.r126 {
	transform : rotateZ(126deg)
}
.r132 {
	transform : rotateZ(132deg)
}
.r138 {
	transform : rotateZ(138deg)
}
.r144 {
	transform : rotateZ(144deg)
}
.r150 {
	transform : rotateZ(150deg)
}
.r156 {
	transform : rotateZ(156deg)
}
.r162 {
	transform : rotateZ(162deg)
}
.r168 {
	transform : rotateZ(168deg)
}
.r174 {
	transform : rotateZ(174deg)
}
.r180 {
	transform : rotateZ(180deg)
}
.r186 {
	transform : rotateZ(186deg)
}
.r192 {
	transform : rotateZ(192deg)
}
.r198 {
	transform : rotateZ(198deg)
}
.r204 {
	transform : rotateZ(204deg)
}
.r210 {
	transform : rotateZ(210deg)
}
.r216 {
	transform : rotateZ(216deg)
}
.r222 {
	transform : rotateZ(222deg)
}
.r228 {
	transform : rotateZ(228deg)
}
.r234 {
	transform : rotateZ(234deg)
}
.r240 {
	transform : rotateZ(240deg)
}
.r246 {
	transform : rotateZ(246deg)
}
.r252 {
	transform : rotateZ(252deg)
}
.r258 {
	transform : rotateZ(258deg)
}
.r264 {
	transform : rotateZ(264deg)
}
.r270 {
	transform : rotateZ(270deg)
}
.r276 {
	transform : rotateZ(276deg)
}
.r282 {
	transform : rotateZ(282deg)
}
.r288 {
	transform : rotateZ(288deg)
}
.r294 {
	transform : rotateZ(294deg)
}
.r300 {
	transform : rotateZ(300deg)
}
.r306 {
	transform : rotateZ(306deg)
}
.r312 {
	transform : rotateZ(312deg)
}
.r318 {
	transform : rotateZ(318deg)
}
.r324 {
	transform : rotateZ(324deg)
}
.r330 {
	transform : rotateZ(330deg)
}
.r336 {
	transform : rotateZ(336deg)
}
.r342 {
	transform : rotateZ(342deg)
}
.r348 {
	transform : rotateZ(348deg)
}
.r354 {
	transform : rotateZ(354deg)
}
.r358 {
	transform : rotateZ(360deg)
}
<div class="containerX">
        <div class="frame">
        <div class="secHand"></div>
        
        <div class="minHand">
            <div class="miniCut"></div>
            </div>
            
        <div class="hourHand">
            <div class="hourCut"></div>
            </div>
            
<div class="innerFrame"></div> 
<div class="smallFrame"></div>          
<div class="knob"></div>
        <div class="calibrate r0 indicators"></div>
        <div class="calibrate r6"></div>
        <div class="calibrate r12"></div>
        <div class="calibrate r18"></div>
        <div class="calibrate r24"></div>
        <div class="calibrate r30 indicators"></div>
        <div class="calibrate r36"></div>
        <div class="calibrate r42"></div>
        <div class="calibrate r48"></div>
        <div class="calibrate r54"></div>
        <div class="calibrate r60 indicators"></div>
        <div class="calibrate r66"></div>
        <div class="calibrate r72"></div>
        <div class="calibrate r78"></div>
        <div class="calibrate r84"></div>
        <div class="calibrate r90 indicators"></div>
        <div class="calibrate r96"></div>
        <div class="calibrate r102"></div>
        <div class="calibrate r108"></div>
        <div class="calibrate r114"></div>
        <div class="calibrate r120 indicators"></div>
        <div class="calibrate r126"></div>
        <div class="calibrate r132"></div>
        <div class="calibrate r138"></div>
        <div class="calibrate r144"></div>
        <div class="calibrate r150 indicators"></div>
        <div class="calibrate r156"></div>
        <div class="calibrate r162"></div>
        <div class="calibrate r168"></div>
        <div class="calibrate r174"></div>
        <div class="calibrate r180 indicators"></div>
        <div class="calibrate r186"></div>
        <div class="calibrate r192"></div>
        <div class="calibrate r198"></div>
        <div class="calibrate r204"></div>
        <div class="calibrate r210 indicators"></div>
        <div class="calibrate r216"></div>
        <div class="calibrate r222"></div>
        <div class="calibrate r228"></div>
        <div class="calibrate r234"></div>
        <div class="calibrate r240 indicators"></div>
        <div class="calibrate r246"></div>
        <div class="calibrate r252"></div>
        <div class="calibrate r258"></div>
        <div class="calibrate r264"></div>
        <div class="calibrate r270 indicators"></div>
        <div class="calibrate r276"></div>
        <div class="calibrate r282"></div>
        <div class="calibrate r288"></div>
        <div class="calibrate r294"></div>
        <div class="calibrate r300 indicators"></div>
        <div class="calibrate r306"></div>
        <div class="calibrate r312"></div>
        <div class="calibrate r318"></div>
        <div class="calibrate r324"></div>
        <div class="calibrate r330 indicators"></div>
        <div class="calibrate r336"></div>
        <div class="calibrate r342"></div>
        <div class="calibrate r348"></div>
        <div class="calibrate r354"></div>


    </div>
</div>

每次代码运行时，都会从00:00开始。 我的目标是每次代码运行时让时钟读取正确的时间。

3 个答案:

答案 0 :(得分：0)

你可以得到这样的小时数组：

const now = new Date();

const time = now.toLocaleTimeString().split(" ")[0].split(":");

如下所示改变时钟的手：

document.querySelector(".hourHand").style.transform = `rotate(${(360 / 12) * time[0]}deg)`;

document.querySelector(".minHand").style.transform = `rotate(${(360 / 60) * time[1]}deg)`;

document.querySelector(".secHand").style.transform = `rotate(${(360 / 60) * time[2]}deg)`;

然后我认为您需要通过JavaScript或其他方式应用动画。看看这里：

How to dynamically create '@-Keyframe' CSS animations?

这是上一篇文章中接受回答的最后一个链接，看起来它可以设置起始位置和动画：

https://github.com/Keyframes/jQuery.Keyframes

答案 1 :(得分：0)

您将不得不在JavaScript代码中执行动画。我也使用了jQuery。这是一个开始：

$('.minHand').css('animation','none');
$('.hourHand').css('animation','none'); 
$('.secHand').css('animation','none');

setInterval(function(){ 
  var d = new Date(); // for now
$('.hourHand').css('transform', 'rotate(' + d.getHours() * (360 /12) +'deg)');
$('.minHand').css('transform', 'rotate(' + (d.getMinutes()/60)*360 + 'deg)');
$('.secHand').css('transform', 'rotate(' + (d.getSeconds()/60)*360 + 'deg)');
},1000);

答案 2 :(得分：0)

在CSS样式表规则中设置时钟

编辑允许从Javascript设置CSS时钟任意次 - 原始版本初始化时钟一次。

此版本的第一步是为HTMLStyleELement提供一个id值，比如“clockCSS”，以方便访问样式表。或者，如果使用外部样式表，则将id值分配给具有“rel = stylesheet”的LINK元素。

接下来，在规则中使用单独的“secFrames”，“minFrames”和“hourFrames”at-rules分别替换“顺时针”关键帧，分别为秒，分钟和小时。在样式表中包含新的关键帧规则。它们都可以默认从0度旋转到360度。

CSS更改应与

类似 
.hourHand {
    height : 48%;
    background : transparent ;
    border-right : 3px solid transparent;
    animation : hourFrames 43200s linear infinite;
    z-index : 5 ;
}
.minHand {
    height : 48%;
    border-right : 2px solid transparent;
    animation : minFrames 3600s linear infinite;
    z-index : 4 ;
}
.secHand {
    height : 48%;
    animation : secFrames 60s linear infinite ;
    z-index : 6 ;
}
@keyframes hourFrames {
    0%   { transform : rotateZ(0deg);}
    100% { transform : rotateZ(360deg);}
}
@keyframes minFrames {
    0%   { transform : rotateZ(0deg);}
    100% { transform : rotateZ(360deg);}
}
@keyframes secFrames {
    0%   { transform : rotateZ(0deg);}
    100% { transform : rotateZ(360deg);}
}

现在可以在JavaScript中设置关键帧规则中的变换值：

// helper function to find a style sheet from its id value

function findSheetById( id) {  // LINK rel=stylesheet or STYLE element id.
     for( var i = 0; i < document.styleSheets.length; ++i) {
         var sheet = document.styleSheets[i];
         if( sheet.ownerNode.id == id) {
             return sheet;
         }
     }
}

// helper function to find a keyframes rule (rule type 7) by name

function findKeyFramesRule( ruleList, name) {
    for( var i = 0; i < ruleList.length; ++i) {
        var rule = ruleList[i];
        if( rule.type == 7 && rule.name == name)
             return rule;
    }
}

// clock setting code based on the stylesheet.

const clockSheetId = "clockCSS";

function setClockTransform( keyframesName, startDeg) {
    let clockSheet = findSheetById(clockSheetId);
    let atRule = findKeyFramesRule( clockSheet.cssRules, keyframesName);
    let stops = atRule.cssRules;
    stops[0].style.transform = "rotateZ(" + startDeg + "deg)";
    stops[1].style.transform = "rotateZ(" + (startDeg+360) + "deg)";
}

function setClock( hour, min, sec, msec) {
    // convert parameters to degrees
    msec = msec || 0;
    sec += msec/1000;
    min += sec / 60;
    hour = hour + min/60;
    sec = sec%60 * 6;
    min = min%60 * 6;
    hour = hour%12 * 30;
    setClockTransform( 'secFrames', sec);
    setClockTransform( 'minFrames', min);
    setClockTransform( 'hourFrames', hour);
}

// and test:

var now = new Date();
setClock( now.getHours(), now.getMinutes(), now.getSeconds())

请注意，这很简单，因为它依赖于样式表的已知结构。它会在最新版本的FireFox和Chrome中检出。然而，虽然IE11设置时钟并运行它，其他CSS问题破坏了演示。

测试代码 

"use strict";

// helper function to find a style sheet from its id value

function findSheetById( id) {  // LINK rel=stylesheet or STYLE element id.
     for( var i = 0; i < document.styleSheets.length; ++i) {
         var sheet = document.styleSheets[i];
         if( sheet.ownerNode.id == id) {
             return sheet;
         }
     }
}

// helper function to find a keyframes rule (rule type 7) by name

function findKeyFramesRule( ruleList, name) {
    for( var i = 0; i < ruleList.length; ++i) {
        var rule = ruleList[i];
        if( rule.type == 7 && rule.name == name)
             return rule;
    }
}

// clock setting code

const clockSheetId = "clockCSS";

function setClockTransform( keyframesName, startDeg) {
    let clockSheet = findSheetById(clockSheetId);
    let atRule = findKeyFramesRule( clockSheet.cssRules, keyframesName);
    let stops = atRule.cssRules;
    stops[0].style.transform = "rotateZ(" + startDeg + "deg)";
    stops[1].style.transform = "rotateZ(" + (startDeg+360) + "deg)";
}

function setClock( hour, min, sec, msec) {
    // convert parameters to degrees
    msec = msec || 0;
    sec += msec/1000;
    min += sec / 60;
    hour = hour + min/60;
    sec = sec%60 * 6;
    min = min%60 * 6;
    hour = hour%12 * 30;
    setClockTransform( 'secFrames', sec);
    setClockTransform( 'minFrames', min);
    setClockTransform( 'hourFrames', hour);
}

var now = new Date();
setClock( now.getHours(), now.getMinutes(), now.getSeconds())
<style type="text/css" id="clockCSS">
.frame {
    position : absolute;
    top : 0;
    bottom : 0;
    right : 0;
    left : 0;
    margin : auto;
    width : 100%;
    height : 100%;
    border-radius : 50%;
    border : 5px groove #000;
    border-color : ;
    /* transform : rotateZ(45deg); */
    box-shadow : inset 0 0 10px 2px #000;
}
.secHand, .minHand, .hourHand {
    background :  ;
    position : absolute ;
    top :  2%;
    bottom : ;
    width : 0;
    right : 0;
    left : 0;
    margin : auto;
    transform-origin : 100% 100%;
    /* transform : rotate(-45deg); */
    border-right : 1px solid #000;
}
.hourCut, .miniCut {
    position : absolute ;
    width : 100% ;
    bottom : 0;
}
.hourCut {
    height : 50% ;
    border-right : 3px solid #000;
}
.miniCut {
    height : 70% ;
    border-right : 2px solid #00f;
}
.hourHand {
    height : 48%;
    background : transparent ;
    border-right : 3px solid transparent;
    animation : hourFrames 43200s linear infinite;
    z-index : 5 ;
}
.minHand {
    height : 48%;
    border-right : 2px solid transparent;
    animation : minFrames 3600s linear infinite;
    z-index : 4 ;
}
.secHand {
    height : 48%;
    animation : secFrames 60s linear infinite ;
    z-index : 6 ;
}
@keyframes hourFrames {
    0%   { transform : rotateZ(0deg);}
    100% { transform : rotateZ(360deg);}
}
@keyframes minFrames {
    0%   { transform : rotateZ(0deg);}
    100% { transform : rotateZ(360deg);}
}
@keyframes secFrames {
    0%   { transform : rotateZ(0deg);}
    100% { transform : rotateZ(360deg);}
}

.containerX {
    position : absolute;
    top : 0 ;
    bottom : 0 ;
    left : 0;
    right : 0;
    margin : auto;
    height : 300px;
    width : 300px;
}
.innerFrame, .smallFrame {
    position : absolute ;
    top : 0 ;
    bottom : 0 ;
    right : 0 ;
    left : 0 ;
    margin : auto ;
    border : 1px solid transparent;
    border-radius : 50% ;
    background : #fff;
    display : ; 
}
.innerFrame {
    height : 90% ;
    width : 90% ;
    box-shadow : 0 0 10px 2px #000;
    z-index : 1 ;
}
.smallFrame {
    height : 80% ;
    width : 80% ;
    z-index : 3 ;
}
.calibrate {
    position : absolute ;
    top : 0 ;
    bottom : ;
    right : 0 ;
    left : 0 ;
    margin : auto ;
    height : 50% ;
    width : 0 ;
    transform-origin : 100% 100% ;
    border-right : 1px solid #fff;
}
.indicators {
    border-right : 1px solid #00f;
    box-shadow : 0 0 5px 0px #000;
    z-index : 2  ;
}
.knob {
    position : absolute ;
    top : 0 ;
    bottom : 0 ;
    right : 0 ;
    left : 0 ;
    margin : auto ;
    height : 1.5% ;
    width : 1.5% ;
    border-radius : 50% ;
    border : 3px solid #000;
    background : #fff ;
    z-index : 7 ;
}
.r0 {    transform : rotateZ(0deg)}
.r6 {    transform : rotateZ(6deg)}
.r12 {    transform : rotateZ(12deg)}
.r18 {    transform : rotateZ(18deg)}
.r24 {    transform : rotateZ(24deg)}
.r30 {    transform : rotateZ(30deg)}
.r36 {    transform : rotateZ(36deg)}
.r42 {    transform : rotateZ(42deg)}
.r48 {    transform : rotateZ(48deg)}
.r54 {    transform : rotateZ(54deg)}
.r60 {    transform : rotateZ(60deg)}
.r66 {    transform : rotateZ(66deg)}
.r72 {    transform : rotateZ(72deg)}
.r78 {    transform : rotateZ(78deg)}
.r84 {    transform : rotateZ(84deg)}
.r90 {    transform : rotateZ(90deg)}
.r96 {    transform : rotateZ(96deg)}
.r102 {    transform : rotateZ(102deg)}
.r108 {    transform : rotateZ(108deg)}
.r114 {    transform : rotateZ(114deg)}
.r120 {    transform : rotateZ(120deg)}
.r126 {    transform : rotateZ(126deg)}
.r132 {    transform : rotateZ(132deg)}
.r138 {    transform : rotateZ(138deg)}
.r144 {    transform : rotateZ(144deg)}
.r150 {    transform : rotateZ(150deg)}
.r156 {    transform : rotateZ(156deg)}
.r162 {    transform : rotateZ(162deg)}
.r168 {    transform : rotateZ(168deg)}
.r174 {    transform : rotateZ(174deg)}
.r180 {    transform : rotateZ(180deg)}
.r186 {    transform : rotateZ(186deg)}
.r192 {    transform : rotateZ(192deg)}
.r198 {    transform : rotateZ(198deg)}
.r204 {    transform : rotateZ(204deg)}
.r210 {    transform : rotateZ(210deg)}
.r216 {    transform : rotateZ(216deg)}
.r222 {    transform : rotateZ(222deg)}
.r228 {    transform : rotateZ(228deg)}
.r234 {    transform : rotateZ(234deg)}
.r240 {    transform : rotateZ(240deg)}
.r246 {    transform : rotateZ(246deg)}
.r252 {    transform : rotateZ(252deg)}
.r258 {    transform : rotateZ(258deg)}
.r264 {    transform : rotateZ(264deg)}
.r270 {    transform : rotateZ(270deg)}
.r276 {    transform : rotateZ(276deg)}
.r282 {    transform : rotateZ(282deg)}
.r288 {    transform : rotateZ(288deg)}
.r294 {    transform : rotateZ(294deg)}
.r300 {    transform : rotateZ(300deg)}
.r306 {    transform : rotateZ(306deg)}
.r312 {    transform : rotateZ(312deg)}
.r318 {    transform : rotateZ(318deg)}
.r324 {    transform : rotateZ(324deg)}
.r330 {    transform : rotateZ(330deg)}
.r336 {    transform : rotateZ(336deg)}
.r342 {    transform : rotateZ(342deg)}
.r348 {    transform : rotateZ(348deg)}
.r354 {    transform : rotateZ(354deg)}
.r358 {    transform : rotateZ(360deg)}
</style>


<div class="containerX">
        <div class="frame">
        <div class="secHand"></div>
        
        <div class="minHand">
            <div class="miniCut"></div>
            </div>
            
        <div class="hourHand">
            <div class="hourCut"></div>
            </div>
            
<div class="innerFrame"></div> 
<div class="smallFrame"></div>          
<div class="knob"></div>
        <div class="calibrate r0 indicators"></div>
        <div class="calibrate r6"></div>
        <div class="calibrate r12"></div>
        <div class="calibrate r18"></div>
        <div class="calibrate r24"></div>
        <div class="calibrate r30 indicators"></div>
        <div class="calibrate r36"></div>
        <div class="calibrate r42"></div>
        <div class="calibrate r48"></div>
        <div class="calibrate r54"></div>
        <div class="calibrate r60 indicators"></div>
        <div class="calibrate r66"></div>
        <div class="calibrate r72"></div>
        <div class="calibrate r78"></div>
        <div class="calibrate r84"></div>
        <div class="calibrate r90 indicators"></div>
        <div class="calibrate r96"></div>
        <div class="calibrate r102"></div>
        <div class="calibrate r108"></div>
        <div class="calibrate r114"></div>
        <div class="calibrate r120 indicators"></div>
        <div class="calibrate r126"></div>
        <div class="calibrate r132"></div>
        <div class="calibrate r138"></div>
        <div class="calibrate r144"></div>
        <div class="calibrate r150 indicators"></div>
        <div class="calibrate r156"></div>
        <div class="calibrate r162"></div>
        <div class="calibrate r168"></div>
        <div class="calibrate r174"></div>
        <div class="calibrate r180 indicators"></div>
        <div class="calibrate r186"></div>
        <div class="calibrate r192"></div>
        <div class="calibrate r198"></div>
        <div class="calibrate r204"></div>
        <div class="calibrate r210 indicators"></div>
        <div class="calibrate r216"></div>
        <div class="calibrate r222"></div>
        <div class="calibrate r228"></div>
        <div class="calibrate r234"></div>
        <div class="calibrate r240 indicators"></div>
        <div class="calibrate r246"></div>
        <div class="calibrate r252"></div>
        <div class="calibrate r258"></div>
        <div class="calibrate r264"></div>
        <div class="calibrate r270 indicators"></div>
        <div class="calibrate r276"></div>
        <div class="calibrate r282"></div>
        <div class="calibrate r288"></div>
        <div class="calibrate r294"></div>
        <div class="calibrate r300 indicators"></div>
        <div class="calibrate r306"></div>
        <div class="calibrate r312"></div>
        <div class="calibrate r318"></div>
        <div class="calibrate r324"></div>
        <div class="calibrate r330 indicators"></div>
        <div class="calibrate r336"></div>
        <div class="calibrate r342"></div>
        <div class="calibrate r348"></div>
        <div class="calibrate r354"></div>


    </div>
</div>

如何运作

此解决方案更新关键帧动画值的样式表规则。它没有研究将时钟指针元件放置在自身旋转的单独容器中。

样式表用法。

  • HTML中的样式标记在DOM中创建HTMLStyleElement。元素的内容提供CSS源文本。

  • 带有'rel =“stylesheet”属性的链接标记在DOM中创建HTMLinkElement。元素的源代码提供CSS源文本。

  • 解析由STYLE或LINK元素提供的CSS源文本以生成CSSStyleSheet对象。生成的每个样式表对象都会添加到document.styleSheets数组中。

  • 每个样式表对象都有一个ownerNode属性，该属性引用用于创建它的DOM HTMLElement。

  • 每个样式表对象在其cssRules属性中包含一个类似于数组的规则对象列表。

  • 每个规则对象的类型都保存在type property中。 type at-rule的@keyframes值为7.

  • @keyframes规则本身有CSSRules属性，其中包含keyFrame规则对象列表。

  • keyFrame规则包含属性keyText（未使用）和style。样式对象值是只读的但不冻结 - 可以更新其属性。

简化。

findSheetById方法使用生成样式表对象的HTML元素的id值来查找document.styleSheets数组中的对象。可以从所有者节点开始查找样式表，但文档缺少详细信息。另一种方法是通过将document.styleSheets索引硬编码到程序中来引用样式表。

在顶级样式表规则中搜索小时，分钟和秒的@keyframes规则。将它们嵌套在@media规则中会引入更多复杂情况。

假设keyFrame规则成对出现，并由下标0和1索引。未检查keyText值（“0％”和“100％”）。

如果未提供，则setClock函数将毫秒参数默认为零（如示例中所示）。实际上，我建议提供毫秒时间值以提高时钟精度。

在线实验。

对于在线测试，您可以尝试从document.styleSheets[0]返回findSheetById，或者在网上工具的HTML框中输入带有id的样式元素。

相关问题
最新问题