html5 css3 时钟,js html5 css3动态时钟

1

2

3

4

5

6

7

8

9

动态时钟

10

11 * {

12 margin: 0;

13 padding: 0;

14 background: gray;

15 }

16

17 .wrapper {

18 position: absolute;

19 left: 50%;

20 top: 50%;

21 margin-top: -150px;

22 margin-left: -150px;

23 width: 300px;

24 height: 300px;

25 /* background: white; */

26 }

27

28 .horologe {

29 /* 没有指针的时钟图片 */

30 background: url(img/原子钟2.png);

31 background-size: 100%;

32 width: 100%;

33 height: 100%;

34 border-radius: 50%;

35 display: flex;

36 justify-content: center;

37 align-items: center;

38 }

39

40 /* 圆心 */

41 .clock {

42 background: red;

43 width: 10px;

44 height: 10px;

45 border-radius: 50%;

46 }

47

48 /* 刻度在没有背景图片时使用 */

49 .scale {

50 position: absolute;

51 background: red;

52 width: 5px;

53 height: 15px;

54 border-radius: 5px;

55 }

56

57 .shi {

58

59 display: flex;

60 flex-direction: row;

61 justify-content: center;

62 background: rgb(28, 28, 29);

63 width: 6px;

64 height: 80px;

65 /* transform: rotate(0deg); */

66 transform-origin: 3px 70px;

67 border-radius: 5px;

68 position: absolute;

69 top: 80px;

70 }

71

72 .shi::before {

73 content: '';

74 display: block;

75 width: 5px;

76 height: 10px;

77 background: rgb(28, 28, 29);

78 transform: rotate(160deg);

79 position: relative;

80 top: -5px;

81 left: 3px;

82 border-radius: 50%;

83 }

84

85 .shi::after {

86 position: relative;

87 content: '';

88 display: block;

89 width: 5px;

90 height: 10px;

91 background: rgb(28, 28, 29);

92 transform: rotate(-160deg);

93 top: -5px;

94 left: -3px;

95 border-radius: 50%;

96 }

97

98 .fen {

99 display: flex;

100 flex-direction: row;

101 justify-content: center;

102 background: rgb(28, 28, 29);

103 width: 4px;

104 height: 115px;

105 /* transform: rotate(10deg); */

106 transform-origin: 2px 100px;

107 border-radius: 5px;

108 position: absolute;

109 top: 50px;

110 }

111

112 .miao {

113 display: flex;

114 flex-direction: row;

115 justify-content: center;

116 background: rgb(28, 28, 29);

117 width: 1px;

118 height: 150px;

119 /* transform: rotate(0deg); */

120 transform-origin: 0.5px 130px;

121 border-radius: 5px;

122 position: absolute;

123 top: 20px;

124 }

125

126

127

128

129

130

131

132

133

134

135

136

137

138 var horologe = document.getElementsByClassName("horologe")[0];

139 // 时针

140 var shi = document.getElementsByClassName('shi')[0];

141 // 分针

142 var fen = document.getElementsByClassName('fen')[0];

143 // 秒针

144 var miao = document.getElementsByClassName('miao')[0];

145 createScale()

146 // 调用

147 setInitTime();

148 setInterval(function () {

149 var setDate = new Date();

150 var seconds = setDate.getSeconds();

151 var minutes = setDate.getMinutes();

152 var hours = setDate.getHours();

153 elapse(hours, minutes, seconds)

154 }, 1000);

155 function createScale() {

156 for (var i = 1; i <= 12; i++) {

157 var scale = document.createElement("div");

158 scale.setAttribute('class', "scale");

159 if (i == 12 || i == 3 || i == 6 || i == 9) {

160 // 3、6、9、12的刻度宽一点

161 scale.style.width = '10' + 'px';

162 }

163 scale.style.transform = "rotate(" + (30 * i) + "deg) translateY(-142px)";

164 //生成刻度

165 horologe.appendChild(scale)

166 }

167 }

168 // 初始时间

169 function setInitTime() {

170 // 获取当前时间

171 var date = new Date();

172 // 获取当前时

173 var hours = date.getHours();

174 // var hours = 12;

175 // 获取当前分

176 var minutes = date.getMinutes()

177 // var minutes = 10;

178 // 获取当前秒

179 var seconds = date.getSeconds();

180 // var seconds = 30;

181 elapse(hours, minutes, seconds)

182 }

183

184 //时间在流逝，不曾停歇

185 function elapse(hours, minutes, seconds) {

186 // 时针 一小时走30deg 一分钟走0.5deg 一秒走0.1/12 deg; 十分钟分钟5度

187 // 分针 一小时走360deg 一分钟走6deg 一秒走 0.1deg 十分钟60度 速度是时针的12倍

188 // 秒针 一分钟走360deg 一分钟360deg 一秒走6deg 十分钟 3600deg 速度是分针的60倍 时针的720倍

189 shi.style.transform = "rotate(" + ((hours * 30) + ((minutes * 6) + seconds * (6 / 60)) / 12) + "deg)";

190 fen.style.transform = "rotate(" + ((minutes * 6) + seconds * (6 / 60)) + "deg)";

191 miao.style.transform = "rotate(" + (seconds * 6) + "deg)";

192 }

193

194

195

196