• JavaScript如何实现钟表效果，时分秒针指向当前时间，并显示当前年月日,及2024春节倒计时，源码奉上

     本篇有运用jQuery，记得引入jQuery库，否则不会执行的喔~

     

    1. <!DOCTYPE html>
    2. <html>
    3. <head>
    4. <meta charset="utf-8">
    5. <title></title>
    6. <meta name="chenc" content="Runoob">
    7. <meta name="description" content="时钟 时间 & 钟表 日历">
    8. <meta name="viewport" content="width=device-width, initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0, user-scalable=no">
    9. <link rel="stylesheet" type="text/css" href="css/style.css">
    10. <script src="js/jquery-3.6.0.js"></script>
    11. <script src="js/app.js"></script>
    12.  
    13. </head>
    14. <body>
    15.     <div class="today">
    16.         <div class="clock">
    17.             <div class="pos SS"></div>
    18.             <div class="pos MM"></div>
    19.             <div class="pos HH"></div>
    20.             <div class="spot"></div>
    21.         </div>
    22.     </div>
    23. </body>
    24. </html>
    1. *{margin: 0 auto;padding: 0;}
    2. html,body{background: #eeeeed;font-size: 14px;color: white!important;}
    3. /* html,body{
    4. 	background-color:#a018d3;
    5. 	background-repeat: repeat-y;
    6. 	background-image: -moz-linear-gradient(left,#a018d3,#fe30ae);
    7. 	background-image: -webkit-linear-gradient(left,#a018d3,#fe30ae);
    8. 	background-image: -o-linear-gradient(left,#a018d3,#fe30ae);
    9. 	background-image: linear-gradient(left,#a018d3,#fe30ae);
    10. 	position: relative;
    11. 	overflow-x: hidden;
    12. } */
    13. @font-face {
    14. 	font-family:impact;
    15. 	src:url(https://misc.360buyimg.com/mtd/pc/index_2019/1.0.0/fonts/a07974d9a45376b8441d90005764beb0.eot);
    16. 	src:url(https://misc.360buyimg.com/mtd/pc/index_2019/1.0.0/fonts/a07974d9a45376b8441d90005764beb0.eot#iefix) format("embedded-opentype"),
    17. 	url(https://misc.360buyimg.com/mtd/pc/index_2019/1.0.0/fonts/b07c9855bd807ccc9d825cb0392c6ef8.woff) format("woff"),
    18. 	url(https://misc.360buyimg.com/mtd/pc/index_2019/1.0.0/fonts/1a0d82dfb49fff2d2a291d3dbce6c95c.ttf) format("truetype"),
    19. 	url(https://misc.360buyimg.com/mtd/pc/index_2019/1.0.0/fonts/d1e37bdd079d3151cc0edcc71d2c8f0f.svg) format("svg");
    20. 	font-weight:400;
    21. 	font-style:normal
    22.    }
    23. @font-face {
    24.     font-family:DINBold;
    25.     src:url(../fonts/dinbold-webfont.bc8aa63.woff);
    26.     font-weight:400;
    27.     font-style:normal
    28. }
    29. @font-face {
    30.     font-family:DINBold;
    31.     src:url(../fonts/DIN-Bold_0.otf);
    32.     font-weight:400;
    33.     font-style:normal
    34. }
    35. @font-face {
    36. 	font-family:DINBold;
    37. 	src:url(https://jddx.jd.com/finance/index/3.0.0/static/fonts/dinbold-webfont.bc8aa63.woff);
    38. 	font-weight:400;
    39. 	font-style:normal
    40. }
    41. .today {
    42. 	width: 100%;
    43. 	height: auto;
    44.     margin: 0 auto;
    45.     text-align: center;
    46. 	padding: 20px;
    47. 	box-sizing: border-box;
    48. }
    49. .today p{
    50. 	margin: 20px auto;
    51. }
    52. .clock {
    53. 	position: relative;
    54. 	width: 300px;
    55. 	height: 300px;
    56. 	margin: 20px auto 0px;
    57. 	text-align: center;
    58. 	background: white;
    59. 	border-radius: 50%;
    60. 	border: 12px solid #590d75;
    61. 	box-shadow: inset 0px 0px 20px 2px rgba(89,13,117,.6);
    62. }
    63. .clock ol {
    64. 	list-style-type: none;
    65. 	width: 100%;
    66. 	height: 100%;
    67. 	position: relative;
    68. 	margin: 0;
    69. 	padding: 0;
    70. 	transform: scale(0.96);
    71. }
    72. .clock ol li::before {
    73. 	font-family: Helvetica;
    74. 	content: counter(labelCounter) "";
    75. }
    76. .clock ol li {
    77. 	counter-increment: labelCounter;
    78. 	position: absolute;
    79.     font-size: 1.5em;
    80.     color: #7d13a5;
    81. }
    82. .clock ol li:nth-child(1){right:73px;top:21px}
    83. .clock ol li:nth-child(2){right:29px;top:64px}
    84. .clock ol li:nth-child(3){right:12px;top:123px}
    85. .clock ol li:nth-child(4){right:31px;bottom:64px}
    86. .clock ol li:nth-child(5){right:73px;bottom:21px}
    87. .clock ol li:nth-child(6){left:132px;bottom:5px}
    88. .clock ol li:nth-child(7){left:73px;bottom:21px}
    89. .clock ol li:nth-child(8){left:31px;bottom:65px}
    90. .clock ol li:nth-child(9){left:12px;top:123px;}
    91. .clock ol li:nth-child(10){left:27px;top:64px}
    92. .clock ol li:nth-child(11){left:69px;top:22px}
    93. .clock ol li:nth-child(12){left:126px; top:5px;}
    94. .spot {
    95. 	position: absolute;
    96. 	top: 0;
    97. 	bottom: 0;
    98. 	left: 0;
    99. 	right: 0;
    100. 	margin: auto;
    101. 	width: 30px;
    102. 	height: 30px;
    103. 	/* background: #DD2476; */
    104.     border-radius: 50%;
    105.     z-index: 5;
    106. }
    107. .HH {
    108. 	position: absolute;
    109. 	top: 0;
    110. 	bottom: 0;
    111. 	left: 0;
    112. 	right: 0;
    113. 	margin: auto;
    114. 	width: 13px;
    115. 	height: 13px;
    116. 	border-radius: 7px;
    117. 	transform: rotate(0deg);
    118. 	z-index: 97;
    119. 	background: #4e0b66;
    120. 	opacity: 0.8;
    121. }
    122. .HH::before {
    123. 	width: 10px;
    124. 	height: 65px;
    125. 	border-radius: 5px;
    126. 	background: #4e0b66;
    127. 	position: absolute;
    128. 	bottom: -10px;
    129. 	left: 50%;
    130. 	transform: translate(-50%,0);
    131. }
    132. .MM {
    133. 	position: absolute;
    134. 	top: 0;
    135. 	bottom: 0;
    136. 	left: 0;
    137. 	right: 0;
    138. 	margin: auto;
    139. 	width: 13px;
    140. 	height: 13px;
    141. 	border-radius: 7px;
    142. 	transform: rotate(0deg);
    143. 	z-index: 98;
    144. 	background: #7d13a5;
    145. 	opacity: 0.8;
    146. }
    147. .MM:before {
    148. 	width: 6px;
    149. 	height: 95px;
    150. 	border-radius: 4px;
    151. 	background: #7d13a5;
    152. 	position: absolute;
    153. 	bottom: -10px;
    154. 	left: 50%;
    155. 	transform: translate(-50%,0);
    156. }
    157. .SS {
    158. 	position: absolute;
    159. 	top: 0;
    160. 	bottom: 0;
    161. 	left: 0;
    162. 	right: 0;
    163. 	margin: auto;
    164. 	width: 13px;
    165. 	height: 13px;
    166. 	border-radius: 7px;
    167. 	transform: rotate(0deg);
    168. 	z-index: 99;
    169. 	background: #fe30ae;
    170. 	opacity: 0.8;
    171. }
    172. .SS:before {
    173. 	width: 2px;
    174. 	height: 135px;
    175. 	border-radius: 4px;
    176. 	background: #fe30ae;
    177. 	position: absolute;
    178. 	bottom: -20px;
    179. 	left: 50%;
    180. 	transform: translate(-50%,0);
    181. 	box-shadow: 2px 0px 5px rgba(174, 28, 92,.5);
    182. }
    183. .HH::after, .HH::before,
    184. .MM::after, .MM::before,
    185. .SS::after, .SS::before {
    186. 	content: "";
    187. 	display: block;
    188. 	position: absolute;
    189. }
    190. .day {
    191. 	margin: 10px auto 20px;
    192. 	text-align: left;
    193. 	font-size: 24px;
    194. 	font-family: DINBold;
    195. 	font-weight: lighter;
    196. 	width: 145px;
    197. }
    198. .time span,
    199. .day span {
    200. 	/* font-weight: bold; */
    201.     margin: 0px 2px;
    202. 	font-family: DINBold;
    203. 	font-weight: lighter;
    204. 	font-size: 24px;
    205. 	vertical-align: middle;
    206. }
    207. .time p{
    208. 	vertical-align: middle;
    209. }
    210. .time p:nth-child(1){
    211. 	font-size: 20px;
    212. }
    213. .time p span{
    214. 	font-family: DINBold;
    215. 	font-weight: lighter;
    216. 	font-size: 36px;
    217. }
    218. .sydate,
    219. .time{
    220. 	color: yellow;
    221. 	vertical-align: middle;
    222. }
    223. .sydate{
    224. 	margin: 10px auto;
    225. }
    226. .sydate span{
    227. 	font-family: DINBold;
    228. 	font-weight: lighter;
    229. 	margin: 0px 2px;
    230. }
    231. .date {
    232. 	position: absolute;
    233. 	top: 65px;
    234. 	left: 0;
    235. 	right: 0;
    236. 	color: #590d75;
    237. 	text-align: center;
    238. 	font-size: 15px;
    239. }
    240. .times {
    241. 	position: absolute;
    242. 	bottom: 65px;
    243. 	left: 0;
    244. 	right: 0;
    245. 	color: #590d75;
    246. 	text-align: left;
    247. 	font-size: 16px;
    248. 	width: 100px;
    249. }
    250. .times span,
    251. .date span{
    252. 	margin: 0px 2px;	
    253. 	color: #b21beb;
    254. 	font-family: DINBold;
    255. 	font-weight: lighter;
    256. }
    257. .week {
    258. 	position: absolute;
    259. 	top: 125px;
    260. 	right: 40px;
    261. 	color: #7d13a5;
    262. 	text-align: center;
    263. 	/* border: 1px solid #7d13a5; */
    264. 	width: 52px;
    265. 	height: 22px;
    266. 	line-height: 21px;
    267. 	font-size: 12px;
    268. 	z-index: 0;
    269. 	box-shadow: inset 0px 0px 10px 1px rgba(89,13,117,.3);
    270. }
    271. .year {
    272. 	position: absolute;
    273. 	top: 80px;
    274. 	left: 0;
    275. 	right: 0;
    276. 	color: #590d75;
    277. 	text-align: center;
    278. 	font-size: 80px;
    279. 	font-family: impact;
    280. 	opacity: 0.08;
    281. 	z-index: 1;
    282. }
    283.  
    284. @-webkit-keyframes rotateOutDownLeft {
    285. 	0% {
    286. 		transform-origin: left bottom;
    287. 		opacity: 1
    288. 	}
    289.  
    290. 	0%,to {
    291. 		-webkit-transform-origin: left bottom
    292. 	}
    293.  
    294. 	to {
    295. 		transform-origin: left bottom;
    296. 		-webkit-transform: rotate(45deg) translateY(20px);
    297. 		transform: rotate(45deg) translateY(20px);
    298. 		opacity: 0
    299. 	}
    300. }
    301.  
    302. @keyframes rotateOutDownLeft {
    303. 	0% {
    304. 		transform-origin: left bottom;
    305. 		opacity: 1
    306. 	}
    307.  
    308. 	0%,to {
    309. 		-webkit-transform-origin: left bottom
    310. 	}
    311.  
    312. 	to {
    313. 		transform-origin: left bottom;
    314. 		-webkit-transform: rotate(45deg) translateY(20px);
    315. 		transform: rotate(45deg) translateY(20px);
    316. 		opacity: 0
    317. 	}
    318. }
    319.  
    320. .Lose{
    321. 	display: -webkit-inline-box;
    322. 	animation: rotateOutDownLeft 1000ms infinite;
    323.     -webkit-animation: rotateOutDownLeft 1000ms infinite; /* Safari 与 Chrome */
    324. }
    325. .Barrage {
    326. 	position: absolute;
    327. 	width: 100%;
    328. 	height: 380px;
    329. 	margin: 0 auto;
    330. 	top: 0;
    331. 	left: 0;
    332. 	right: 0;
    333. 	z-index: 99;
    334. }
    335. .message {
    336. 	width: 60%;
    337. 	height: 50px;
    338. 	border-radius: 25px;
    339. 	text-align: center;
    340. 	line-height: 48px;
    341. 	font-size: 15px;
    342. 	cursor: pointer;
    343. 	background: rgba(89,13,117,.25);
    344. 	/* background-color: #a018d3;
    345. 	background-repeat: repeat-y;
    346. 	background-image: -moz-linear-gradient(0deg,rgba(254,48,174,.5),rgba(160,24,211,.5));
    347. 	background-image: -webkit-linear-gradient(0deg,rgba(254,48,174,.5),rgba(160,24,211,.5));
    348. 	background-image: -o-linear-gradient(0deg,rgba(254,48,174,.5),rgba(160,24,211,.5));
    349. 	background-image: linear-gradient(0deg,rgba(254,48,174,.5),rgba(160,24,211,.5)); */
    350. }
    351.  
    352. .key {
    353. 	position: fixed;
    354. 	width: 100%;
    355. 	height: 200px;
    356. 	padding: 40px 20px 20px 20px;
    357. 	box-sizing: border-box;
    358. 	background: white;
    359. 	z-index: 20;
    360. 	bottom: -400px;
    361. 	border-radius: 20px 20px 0px 0px;
    362. 	transition: all 300ms;
    363. }
    364. .keys{
    365. 	bottom: 0px;
    366. 	animation: keys 300ms ease;
    367.     -webkit-animation: keys 300ms ease; /* Safari 与 Chrome */
    368. }
    369. @-webkit-keyframes keys {
    370. 	0% {
    371. 		transform: translateY(400px);
    372. 	}
    373. 	100% {
    374. 		transform: translateY(0px);
    375. 	}
    376. }
    377. @keyframes keys {
    378. 	0% {
    379. 		transform: translateY(400px);
    380. 	}
    381. 	100% {
    382. 		transform: translateY(0px);
    383. 	}
    384. }
    385.  
    386. .van-field__control {
    387. 	display: block;
    388. 	box-sizing: border-box;
    389. 	width: 100%;
    390. 	min-width: 0;
    391. 	margin: 0;
    392. 	padding: 0;
    393. 	color: #323233;
    394. 	text-align: left;
    395. 	background-color: transparent;
    396. 	border: 0;
    397. 	resize: none;
    398. 	min-height: 100px;
    399. 	font-size: 16px;
    400. }
    401. .buts {
    402. 	width: 80%;
    403. 	height: 42px;
    404. 	background-color: #a018d3;
    405. 	background-repeat: repeat-y;
    406. 	background-image: -moz-linear-gradient(left,#a018d3,#fe30ae);
    407. 	background-image: -webkit-linear-gradient(left,#a018d3,#fe30ae);
    408. 	background-image: -o-linear-gradient(left,#a018d3,#fe30ae);
    409. 	background-image: linear-gradient(left,#a018d3,#fe30ae);
    410. 	border-radius: 21px;
    411. 	line-height: 42px;
    412. 	text-align: center;
    413. 	font-size: 16px;
    414. 	cursor: pointer;
    415. }
    416. .iocnBox {
    417. 	position: absolute;
    418. 	width: 100%;
    419. 	height: 40px;
    420. 	top: 0;
    421. 	left: 0;
    422. 	right: 0;
    423. 	margin: auto;
    424. 	color: #333;
    425. 	text-align: right;
    426. 	padding-right: 20px;
    427. 	line-height: 40px;
    428. 	cursor: pointer;
    429. }
    430. .iocnBox i {
    431. 	font-size: 18px;
    432. 	color: #909399;
    433. }
    434. .remove{
    435. 	animation-fill-mode: forwards;
    436. 	animation: remove 300ms ease;
    437.     -webkit-animation: remove 300ms ease; /* Safari 与 Chrome */
    438. }
    439. @-webkit-keyframes remove {
    440. 	0% {
    441. 		transform: translateY(0px);
    442. 	}
    443. 	100% {
    444. 		transform: translateY(400px);
    445. 	}
    446. }
    447. @keyframes remove {
    448. 	0% {
    449. 		transform: translateY(0px);
    450. 	}
    451. 	100% {
    452. 		transform: translateY(400px);
    453. 	}
    454. }
    455.  
    456. .Barrage span {
    457. 	position: absolute;
    458. 	background: rgba(89,13,117,.25);
    459. 	color: white;
    460. 	display: initial;
    461. 	padding: 0px 15px;
    462. 	box-sizing: border-box;
    463. 	border-radius: 20px;
    464. 	line-height: 35px;
    465. 	animation: Barrag 10s linear infinite;
    466. 	-webkit-animation: Barrag 10s linear infinite;
    467. 	top: 60px;
    468. 	white-space: nowrap;
    469. 	font-size: 12px;
    470. }
    471. @keyframes Barrag
    472. {
    473.     0% {right: -200px;opacity: 1;}
    474.     80% {right: 1120px;opacity: 1;}
    475.     100% {right: 1400px;opacity: 0;}
    476. }
    477.  
    478. @-webkit-keyframes Barrag /* Safari 与 Chrome */
    479. {
    480.     0% {right: -200px;opacity: 1;}
    481.     80% {right: 1120px;opacity: 1;}
    482.     100% {right: 1400px;opacity: 0;}
    483. }
    484. .Barrage span:nth-child(2):before,
    485. .Barrage span:nth-child(1):before{
    486. 	content:"";
    487. 	width: 24px;
    488. 	height: 24px;
    489. 	margin-right: 5px;
    490. 	background:url(../images/bq001.png) no-repeat;
    491. 	background-size: 24px 24px;
    492. 	background-position: center bottom;
    493. 	display: inline-block;
    494. 	vertical-align: middle;
    495. }
    496. .Barrage span:nth-child(2):after,
    497. .Barrage span:nth-child(1):after{
    498. 	content:"";
    499. 	width: 26px;
    500. 	height: 26px;
    501. 	margin-left: 5px;
    502. 	background:url(../images/bq002.gif) no-repeat;
    503. 	background-size: 26px auto;
    504. 	background-position: center bottom;
    505. 	display: inline-block;
    506. 	vertical-align: middle;
    507. }
    508. .B-span2{
    509. 	top: 100px!important;
    510. 	color: #ff0!important;
    511. 	animation: Barrag 6s linear infinite!important;
    512. 	-webkit-animation: Barrag 6s linear infinite!important;
    513. }
    514. .Barrage span:nth-child(3){
    515. 	top: 140px!important;
    516. 	color: #0dd2ef!important;
    517. 	animation: Barrag 12.8s linear infinite!important;
    518. 	-webkit-animation: Barrag 12.8s linear infinite!important;
    519. }
    520. .Barrage span:nth-child(4){
    521. 	top: 160px!important;
    522. 	color: #ff0!important;
    523. 	animation: Barrag 10s linear infinite!important;
    524. 	-webkit-animation: Barrag 10s linear infinite!important;
    525. }
    526. .Barrage span:nth-child(5){
    527. 	top: 190px!important;
    528. 	color: #3fd316!important;
    529. 	animation: Barrag 17.5s linear infinite!important;
    530. 	-webkit-animation: Barrag 17.5s linear infinite!important;
    531. }
    532. .Barrage span:nth-child(6){
    533. 	top: 100px!important;
    534. 	color: #ff0!important;
    535. 	animation: Barrag 20s linear infinite!important;
    536. 	-webkit-animation: Barrag 20s linear infinite!important;
    537. }
    538. .Barrage span:nth-child(7){
    539. 	top: 120px!important;
    540. 	color: #0dd2ef!important;
    541. 	animation: Barrag 15s linear infinite!important;
    542. 	-webkit-animation: Barrag 15s linear infinite!important;
    543. }
    544. .Barrage span:nth-child(8){
    545. 	top: 200px!important;
    546. 	color: #ff0!important;
    547. 	animation: Barrag 16s linear infinite!important;
    548. 	-webkit-animation: Barrag 16s linear infinite!important;
    549. }
    550. .Barrage span:nth-child(9){
    551. 	top: 80px!important;
    552. 	color: #3fd316!important;
    553. 	animation: Barrag 8s linear infinite!important;
    554. 	-webkit-animation: Barrag 8s linear infinite!important;
    555. }
    556. @keyframes Barragss
    557. {
    558.     0% {right: 0px;opacity: 1;}
    559.     80% {right: 1120px;opacity: 1;}
    560.     100% {right: 1400px;opacity: 0;}
    561. }
    562.  
    563. @-webkit-keyframes Barragss /* Safari 与 Chrome */
    564. {
    565.     0% {right: 0px;opacity: 1;}
    566.     80% {right: 1120px;opacity: 1;}
    567.     100% {right: 1400px;opacity: 0;}
    568. }
    569.  
    570. .Tips {
    571. 	background: rgba(0,0,0,.6);
    572. 	position: fixed;
    573. 	top: 0;
    574. 	bottom: 0;
    575. 	left: 0;
    576. 	right: 0;
    577. 	margin: auto;
    578. 	width: 120px;
    579. 	height: 45px;
    580. 	border-radius: 4px;
    581. 	line-height: 45px;
    582. 	text-align: center;
    583. }
    584.  
    585. .empty {
    586. 	position: absolute;
    587. 	width: 40px;
    588. 	height: 30px;
    589. 	top: 38px;
    590. 	right: 15px;
    591. 	margin: auto;
    592. 	color: red;
    593. 	text-align: center;
    594. 	line-height: 30px;
    595. 	cursor: pointer;
    596. 	opacity: 0;
    597. }
    598. .Tipss{
    599. 	background: rgba(0,0,0,.6);
    600. 	position: fixed;
    601. 	top: 0;
    602. 	bottom: 0;
    603. 	left: 0;
    604. 	right: 0;
    605. 	margin: auto;
    606. 	width: 200px;
    607. 	height: 45px;
    608. 	border-radius: 4px;
    609. 	line-height: 45px;
    610. 	text-align: center;
    611. }
    612. .music {
    613. 	width: 270px;
    614. 	margin: 30px auto;
    615. 	height: 45px;
    616. }
    617. .music audio {
    618. 	background: none;
    619. 	width: 100%;
    620. 	height: 100%;
    621. }
    622. .music marquee {
    623. 	font-size: 13px;
    624. 	color: yellow;
    625. 	margin-top: 5px;
    626. }
    1.  
    2. $(document).ready(function(){   
    3.     //加入时钟数字元素 
    4.     var list = "
    16. ";
  • var ool = "
      " + list + "
    "    ;
  • $(".spot").after(ool);
  • //显示日期
  • var date = "
    "    ;
  • $(".spot").before(date);
  • //显示星期
  • var week = "
    "    ;
  • $(".date").before(week);
  • //显示年度
  • var year = "
    "    ;
  • $(".date").before(year);
  • //显示时间
  • var times = "
    "    ;
  • $(".date").before(times);
  • // 春节倒计时
  • var starttime = new Date("2024/1/10");
  • setInterval(function () {
  • var nowtime = new Date();
  • var time = starttime - nowtime;
  • var day = parseInt(time / 1000 / 60 / 60 / 24);
  • var hour = parseInt(time / 1000 / 60 / 60 % 24);
  • var minute = parseInt(time / 1000 / 60 % 60);
  • var seconds = parseInt(time / 1000 % 60);
  • var syday = "" + hour + "" + "小时" + "" + minute + "" + "分钟" + "" + seconds + "" + "秒";
  • $('.time').html("

    春节倒计时

    "     + "

    " + day + "" + "天

    "    );
  • $(".sydate").html(syday);
  • }, 1000);
  • // 时钟走字方法
  • function Todayss(){
  • var day = new Date(); //日期
  • var Y = day.getFullYear(); //年
  • var M = day.getMonth() + 1; //月
  • var D = day.getDate(); //日
  • var U = day.getUTCDay(); //周
  • var H = day.getHours(); //时
  • var MIN = day.getMinutes(); //分
  • var S = day.getSeconds(); //秒
  • var MSs = day.getMilliseconds();
  • var MS = MSs.toString().substring(0,2);
  • // 计算指针度数
  • var sss = S * 6,
  • mmm = MIN * 6 + (sss * 0.01),
  • hhh = (H * 30) + (MIN * 0.5);
  • var rotss = "rotate(" + sss + "deg)";
  • var rotmm = "rotate(" + mmm + "deg)";
  • var rothh = "rotate(" + hhh + "deg)";
  • $(".HH").css({"transform":rothh});
  • $(".MM").css({"transform":rotmm});
  • $(".SS").css({"transform":rotss});
  • // 小于两位数,保持两位
  • if(M < 10){M = "0" + M;};
  • if(D < 10){D = "0" + D;};
  • if(H < 10){H = "0" + H;};
  • if(MIN < 10){MIN = "0" + MIN;};
  • if(S < 10){S = "0" + S;};
  • switch (U){
  • case 0:U="星期日";
  • break;
  • case 1:U="星期一";
  • break;
  • case 2:U="星期二";
  • break;
  • case 3:U="星期三";
  • break;
  • case 4:U="星期四";
  • break;
  • case 5:U="星期五";
  • break;
  • case 6:U="星期六";
  • break;
  • };
  • //星期赋值
  • var week = U;
  • $(".week").html(week);
  • //年份赋值
  • var year = Y;
  • $(".year").html(year);
  • //日期赋值
  • var date = "" + M + "" + "月" + "" + D + "" + "日";
  • $(".date").html(date);
  • //时间赋值
  • var times = "" + H + "" + ":" + "" + "" + MIN + "" + ":" + "" + "" + S + "" + ":" + "" + "" + MS + "";
  • $(".times").html(times);
  • }
  • // Todayss();
  • setInterval(Todayss, 10);
  • });

  • 相关阅读:
    Flink 流处理API-Window API
    2023 年度国家科学技术奖励公布
    流程控制知识大闯关
    计算模型参数量
    一本通2053；三个数
    Nginx配置限流
    【数据结构】——优先级队列（堆）
    面试官：RocketMQ是什么，它有什么特性与使用场景？
    教你如何制作vue+springboot项目
    后端返回 date 时间日期格式为 UTC 格式字符串，形如 2022-08-11T10:50:31.050+00:00前端如何修改为yyyy-mm-dd
  • 原文地址：https://blog.csdn.net/m0_71966801/article/details/134340336