使用HTML5和CSS3制作简单的钟表

最新推荐文章于 2024-04-14 11:46:37 发布

weixin_30235225

最新推荐文章于 2024-04-14 11:46:37 发布

阅读量226

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/taiyuanzhongruan/p/7521225.html

版权

利用html5，css实现钟摆效果，在项目中经常会遇到，今天小编把基于HTML5+CSS3实现简单的时钟效果的实现代码分享到脚本之家平台，需要的d的朋友参考下吧

目的：

利用html5，css实现钟摆效果

知识点：

1）利用position/left/top和calc()实现元素的水平和垂直居中；

2）利用CSS3的animation/transform/transform-origin属性定义动画；

3）利用transform-origin实现旋转原点的圆心调整

废话不多说了，直接看代码吧，具体代码如下所示：

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

<!DOCTYPE html>

<html>

<head>

<style>

li{

list-style:none;

}

#box{

width: 400px;

height: 400px;

position: absolute;

top:calc(50% - 200px);

left:calc(50% - 200px);

border: 2px solid palegoldenrod;

}

#dial{

width: 200px;

height: 200px;

position: absolute;

top:calc(50% - 100px);

left:calc(50% - 100px);

border: 2px solid cyan;

border-radius: 50%;

}

.scaleIndex{

width: 4px;

height: 12px;

position: absolute;

top: 0;

left: calc(50% - 2px);

background-color: gray;

transform-origin: 2px 100px;

}

.angle30{transform : rotate(30deg);}

.angle60{transform : rotate(60deg);}

.angle90{transform : rotate(90deg);}

.angle120{transform : rotate(120deg);}

.angle150{transform : rotate(150deg);}

.angle180{transform : rotate(180deg);}

.angle210{transform : rotate(210deg);}

.angle240{transform : rotate(240deg);}

.angle270{transform : rotate(270deg);}

.angle300{transform : rotate(300deg);}

.angle330{transform : rotate(330deg);}

#fixPoint{

width: 10px;

height: 10px;

position: absolute;

top:calc(50% - 5px);

left:calc(50% - 5px);

background-color: cadetblue;

border-radius: 50%;

}

#hourHand{

width: 6px;

height: 70px;

position:absolute;

top: 40px;

left: calc(50% - 3px);

background-color: darkblue;

transform-origin: 50% 60px;

}

#minuteHand{

width: 4px;

height: 75px;

position:absolute;

top: 35px;

left: calc(50% - 2px);

background-color: yellow;

transform-origin: 50% 65px;

}

#secondHand{

width: 2px;

height: 90px;

position:absolute;

top: 20px;

left: calc(50% - 1px);

background-color: red;

transform-origin: 50% 80px;

}

</style>

</head>

<body>

</ul>

</p>

window.onload = function(){

var hourHand = document.getElementById('hourHand');

var minuteHand = document.getElementById('minuteHand');

var secondHand = document.getElementById('secondHand');

setInterval(function(){

var currentTime = new Date();

var hourValue = currentTime.getHours();

var hourAngle = hourValue / 24 * 360 + 'deg';

var minuteValue = currentTime.getMinutes();

var minuteAngle = minuteValue / 60 * 360 + 'deg';

var secondValue = currentTime.getSeconds();

var secondAngle = secondValue / 60 * 360 + 'deg';

console.log(hourAngle);

// 方法一：利用jquery的css()增加属性

var cmdHour = 'rotate('+ hourAngle +')';

$('#hourHand').css({transform:'rotate('+ hourAngle +')'});

var cmdMinute = 'rotate('+ minuteAngle +')';

$('#minuteHand').css({transform:cmdMinute});

var cmdSecond = 'rotate('+ secondAngle +')';

$('#secondHand').css({transform:cmdSecond});

// 方法二：利用DOM元素的style属性设置

// hourHand.style.transform = 'rotate('+ hourAngle + ')';

// minuteHand.style.transform = 'rotate('+ minuteAngle + ')';

// secondHand.style.transform = 'rotate('+ secondAngle + ')';

},1000);

}

</script>

</body>

</html>

以上就是使用HTML5和CSS3制作简单的钟表的详细内容。

转载于:https://www.cnblogs.com/taiyuanzhongruan/p/7521225.html

weixin_30235225

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
使用HTML5和CSS3制作简单的钟表

利用html5，css实现钟摆效果，在项目中经常会遇到，今天小编把基于HTML5+CSS3实现简单的时钟效果的实现代码分享到脚本之家平台，需要的d的朋友参考下吧目的：利用html5，css实现钟摆效果知识点：1）利用position/left/top和calc()实现元素的水平和垂直居中；2）利用CSS3的animation/transform/transform-ori...
复制链接

扫一扫