html中的时钟如何自动,HTML+CSS入门 如何实现模拟时钟

本篇教程介绍了HTML+CSS入门 如何实现模拟时钟，希望阅读本篇文章以后大家有所收获，帮助大家HTML+CSS入门。

<

1 html>

2 

3 

4     

5     

模拟时钟

6     

7         body {

8             margin: 0;

9             padding: 0;

10         }

11

12         #blockDial {

13             width: 200px;

14             height: 200px;

15             border: 2px solid black;

16             border-radius: 50%;

17             position: relative;

18             background-color: coral;

19         }

20

21         .heart {

22             width: 10px;

23             height: 10px;

24             background-color: black;

25             margin: 95px auto;

26             border-radius: 50%;

27         }

28

29         .blockwise {

30             width: 2px;

31             height: 80px;

32             background-color: black;

33             position: absolute;

34             left: 99px;

35             top: 20px;

36             z-index: 10;

37         }

38         .secondHand{

39             width: 2px;

40             height: 50px;

41             background-color: black;

42             position: absolute;

43             left: 99px;

44             top: 50px;

45             z-index: 10;

46         }

47         .minuteHand{

48             width: 2px;

49             height: 65px;

50             background-color: black;

51             position: absolute;

52             left: 99px;

53             top: 35px;

54             z-index: 10;

55         }

56         #currentTime{

57             width: 120px;

58             height: 30px;

59             border: 1px solid black;

60             margin: 10px 40px;

61             text-align: center;

62             line-height: 30px;

63         }

64         .num{

65             font-size: 24px;

66             color: aqua;

67             position: absolute;

68         }

69         .num3{

70             top:42%;

71             left: 90%;

72         }

73         .num6{

74             top:86%;

75             left: 46%;

76         }

77         .num9{

78             top:42%;

79             left: 0;

80         }

81         .num12{

82             top:0;

83             left: 44%;

84         }

85     

86 

87 

88 

89     

90     

91     

92     

93     

3

94     

6

95     

9

96     

12

97 

98 

99 

100 

101 

html

1 (function () {

2

3     var blockwise = document.querySelector("#blockDial .blockwise");

4     var secondHand = document.querySelector("#blockDial .secondHand");

5     var minuteHand = document.querySelector("#blockDial .minuteHand");

6     var currentTime = document.querySelector("#currentTime");

7

8     function formate(num) {

9         return num>=10? num:"0"+num;

10     }

11

12     setInterval(function () {

13         var time = new Date();

14         currentTime.innerHTML = formate(time.getHours()) + ":" +

15             formate(time.getMinutes()) + ":" + formate(time.getSeconds());

16

17         var angleSeconds = time.getSeconds() * 6;

18         rotateDiv(secondHand, angleSeconds);

19

20         var angleHours = time.getHours() * 30;

21         rotateDiv(blockwise, angleHours);

22

23         var angleMinute = time.getMinutes() * 6;

24         rotateDiv(minuteHand, angleMinute);

25     }, 1000);

26

27     function rotateDiv(target, angle) {

28         target.style.transform = "rotate(" + angle + "deg) ";

29         target.style.transformOrigin = "100% 100%";

30     }

31

32     document.body.addEventListener("click", function (event) {

33         console.log(event.pageX, event.pageY);

34     });

35 })();

js

本文由职坐标整理发布，欢迎关注职坐标WEB前端HTML/CSS频道，获取更多HTML/CSS知识！