[无聊] 用 tikz 画简易时钟

kuing

纯粹无聊下





用法、示例及具体代码见下列附件。

abababa

回复 1# kuing

听说latex能做动画，这个是不是也能像时钟那样做成动起来的？

kuing

回复 2# abababa

这个是不动的，我能做到的只是显示编译的那一刻的时间，所以纯粹无聊。

Jan

学习了

kuing

跑个题，用 CSS + JS 也弄一个简易时钟：

（懒得画刻度）
实现代码见楼下（发这里的话由于开了 html 的关系 code 里的空格会失效，代码难看，只好发楼下）

kuing

1. <style>
2. #circle {
3.     width: 200px;
4.     height: 200px;
5.     border-radius: 100px;
6.     border: 2px solid black;
7. }
8. #circle>div {
9.     width: 0px;
10.     height: 0px;
11. }
12. #sec,#min,#hour {
13.     position: relative;
14.     transform-origin: bottom;
15. }
16. #sec {
17.     width: 2px;
18.     left: 99px;
19.     height: 80px;
20.     top: 20px;
21.     background-color: red;
22. }
23. #min {
24.     width: 4px;
25.     left: 98px;
26.     height: 65px;
27.     top: 35px;
28.     background-color: blue;
29. }
30. #hour {
31.     width: 6px;
32.     left: 97px;
33.     height: 50px;
34.     top: 50px;
35.     background-color: black;
36. }
37. .num {
38.     width: 200px;
39.     height: 200px;
40.     line-height: 200px;
41.     text-align: center;
42. }
43. </style>
45. <div id="circle">
46.     <div><div id="hour"></div></div>
47.     <div><div id="min"></div></div>
48.     <div><div id="sec"></div></div>
49. </div>
51. <script>
52. let cc = document.getElementById("circle");
53. for(let i=1;i<13;i++){
54.     let div = document.createElement("div");
55.     div.innerHTML = `<div class="num" style="transform: rotate(${30*i}deg) translate(0,-85px) rotate(${-30*i}deg);">${i}</div>`;
56.     cc.appendChild(div);
57. }
58. function time(){
59.     let s=document.getElementById("sec");
60.     let m=document.getElementById("min");
61.     let h=document.getElementById("hour");
62.     let date=new Date();
63.     let snum=date.getSeconds();
64.     let mnum=date.getMinutes()+snum/60;
65.     let hnum=date.getHours()+mnum/60;
66.     s.style.transform=`rotate(${snum*6}deg)`;
67.     m.style.transform=`rotate(${mnum*6}deg)`;
68.     h.style.transform=`rotate(${hnum*30}deg)`;
69. }
70. setInterval(time,1000)
71. </script>

复制代码

isee

kuing 发表于 2023-2-17 23:19
跑个题，用 CSS + JS 也弄一个简易时钟：

#circle {

哎哟快十二点半了，睡觉睡觉