作者：愛編程的小和尚

原文鏈接：https://blog.csdn.net/Newbie___/article/details/105378852

抖音上很火的時鐘屏保，被我改造完后用來準備準備準備表白，誰說程序員不浪漫？！

不知道一直關注小編我的小伙伴們之前有沒有JQuery實現的動態羅盤時鐘的這篇文章《基于JQuery的動態羅盤時鐘》，今天就拿這個進行擴展，實現向自己心愛的人表白。

閑言少敘，書歸正文，因為gif格式的圖片只能上傳5M，所以我只能切成兩塊，中間還刪減了一些，大家湊合著看，不要打我，大家可以把源碼拷下來，源碼在最下面，自己運行康康，嘿嘿，話不多說，上圖：

效果主要分成了三個部分，第一個是進入頁面的時候平鋪的時鐘效果，當點擊按鈕的時候，變為圓盤時鐘，左邊的文字以鍵盤敲擊的而方式出現。我來依次講解三個部分：

index.html

.btn{ width: 158px; height:63px; position: absolute; cursor: pointer; left: 50%; margin-left: -79px; top: 400px; background-image: url(./btnImg.png); background-size: 100% 100%;}

我們在index.html中僅放了很少的一部分代碼 ，存放文字的text類名的p標簽，存放時鐘效果的div和按鈕

我們在看一看index.css，設置時鐘的背景色，粉粉的

.btn{ width: 158px; height:63px; position: absolute; cursor: pointer; left: 50%; margin-left: -79px; top: 400px; background-image: url(./btnImg.png); background-size: 100% 100%;}

設置文字的顏色，藍藍的顏色

.text{ position: absolute; left: 50px; top: 120px; color:rgb(106, 213, 255);}

設置按鈕的樣式，和引入圖片。

.btn{ width: 158px; height:63px; position: absolute; cursor: pointer; left: 50%; margin-left: -79px; top: 400px; background-image: url(./btnImg.png); background-size: 100% 100%;}

如果覺得我的配色不好的話，可以自行修改，畢竟男鋼鐵程序員的審美有限，空有一身套路，卻沒有女朋友，我哭了。

我們的html和css都非常少，那就意味著js代碼很多了，但是沒關系，我都是用的原生js實現的，只要有一丟丟基礎就可以了。

首先我們需要定義月份、天、星期、小時、分鐘、秒的基礎數據(在文章最后)。每一個數據，都會對應著生成一個dom元素，所以我在這里定義了一個allSet的二維數組，數組內容分別是dom元素和對應的數據。

//存放數據

var monthContent = [];var dayContent = [];var weekContent = [];var hourContent = [];var minuteContent = [];var secondsContent = [];//存放生成dom元素var monthDom=[];var dayDom=[];var weekDom=[];var hourDom=[];var minutesDom=[];var secondsDom=[];//二維數組，0存放數據，1存放dom元素var allSet = [ [monthContent,monthDom], [dayContent,dayDom], [weekContent,weekDom], [hourContent,hourDom], [minuteContent,minutesDom], [secondsContent,secondsDom] ];

我們三個部分中的第一部分便是平鋪效果的時鐘：其實非常簡單，只要循環alllSet中的所有數據創建對應的dom元素，插入class類名就可以了，樣式我已經在css中寫好了。

function init(){ for(var i=0;i

//創建dom元素

function createLabel(text){ var oDiv = document.createElement("div"); oDiv.innerText = text; oDiv.classList.add("label"); return oDiv;}

還有一個非常重要的步驟就是獲取當前的時間，并把當前的時間設置成不同的顏色。

function getTime(){ var labels = document.getElementsByClassName("label"); //先循環一下，把所有的樣式都變為黑色和正常狀態下的字體 for(var i=0;i

當文檔加載完成的時候就開始運行。

window.onload = function(){ init(); changePosition(); setInterval(() => { getTime(); }, 100);}

順便在這里解釋一下changePosition()這個函數(我自己封裝的，別害怕哈哈哈)實現了把當前的dom元素都改為絕對定位再放到原來的位置上。

再為按鈕實現以一個點擊事件，當點擊按鈕的時候，將其轉換為圓盤的時鐘狀態。我們需要將整個屏幕旋轉90deg，是因為我們要高亮顯示的字是橫著的，并且一直在右側固定。

function btnClick(){ //改變狀態的變量 isChange = true; //旋轉90deg document.getElementsByClassName("btn")[0].style.display = "none" clock.style.transform = "rotate(90deg)" //延遲200毫秒展示文字 setTimeout(() => { showText() }, 200);}

在獲取當前時間的getTime方法中，我們添加這樣的判斷，計算每一個時間的旋轉角度。我們需要注意的是：我們在之前將整個屏幕旋轉了90deg，對應的x軸和y軸也會旋轉

function getTime(){ //之前的一大堆代碼... if(isChange){ //設置圓盤的中心點 var midX = document.body.clientWidth / 2; var midY = document.body.clientHeight / 2 -100; for(var i=0;i

通過cos和sin函數，計算每個時間的位置 ，這個畫圖解釋每個時間的比較復雜，好麻煩，我承認我懶了。所以大家自行腦補。

到了最后一部分，我們的文案啦。文案有逐個閃爍效果，每次換行以后原地閃爍三次，通過空格判斷是否換行，通過英文的 , 來決定原地閃爍的次數，所以如果需要修改文案的話，只要按照格式就好啦。大家自己看吧代碼注釋寫在里面了。

function showText(){ var logo = "我這個人，不太會說話 ,,,,也不太會談戀愛 ,,,,但是呢，遇到你之后我才發現 ,,,,不是我不會 ,,,,是因為之前 ,,,,我根本沒有遇到像你這么對路的人 ,,,,我真的很想跟你在一起 ,,,,我需要的不多 ,,,,我需要的只是在你需要的時候 ,,,,我恰好能在你身邊 ,,,,我喜歡你呢 ,,,,并不是因為你漂亮 ,,,,而是因為 ,,,,你能給我一種別人給不了的特殊感覺" var ptext = document.getElementsByClassName('text')[0]; var flag = 0; var show = true; var mouse = document.createElement("span"); mouse.style.position='absolute'; mouse.style.left ='0'; mouse.style.top ='0'; mouse.innerText = "__" //光標閃爍效果的光標 ptext.append(mouse); var timer = setInterval(function(){ if(flag

全部代碼：

文件目錄

index.html

Document

index.css

*{ margin: 0; padding: 0;}html,body{ width: 100%; height: 100%; background: #FF6A6A;}.clock{ width: 100%; height: 100%; position: relative; background: #FF6A6A;}.btn{ width: 158px; height:63px; position: absolute; cursor: pointer; left: 50%; margin-left: -79px; top: 400px; background-image: url(./btnImg.png); background-size: 100% 100%;}.label{ display: inline-block; font-size: 14px; color: #000; text-align: center; padding:0 5px; transform-origin: 0% 0%; transition: all 1s;}.text{ position: absolute; left: 50px; top: 120px; color:rgb(106, 213, 255);}.text span{ display: inline-block; font-size: 18px; padding-left: 2px; padding-bottom: 5px;}

index.js

var clock = document.getElementsByClassName('clock')[0];var monthContent = ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"];var dayContent = ["一號", "二號", "三號", "四號", "五號", "六號", "七號", "八號", "九號", "十號", "十一號", "十二號", "十三號", "十四號", "十五號", "十六號", "十七號", "十八號", "十九號", "二十號", "二十一號", "二十二號", "二十三號", "二十四號", "二十五號", "二十六號", "二十七號", "二十八號", "二十九號", "三十號", "三十一號"];var weekContent = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"];var hourContent = ["零點", "一點", "兩點", "三點", "四點", "五點", "六點", "七點", "八點", "九點", "十點", "十一點", "十二點", "十三點", "十四點", "十五點", "十六點", "十七點", "十八點", "十九點", "二十點", "二十一點", "二十二點", "二十三點"];var minuteContent = ["零分","一分", "二分", "三分", "四分", "五分", "六分", "七分", "八分", "九分", "十分", "十一分", "十二分", "十三分", "十四分", "十五分", "十六分", "十七分", "十八分", "十九分", "二十分", "二十一分", "二十二分", "二十三分", "二十四分", "二十五分", "二十六分", "二十七分", "二十八分", "二十九分", "三十分", "三十一分", "三十二分", "三十三分", "三十四分", "三十五分", "三十六分", "三十七分", "三十八分", "三十九分", "四十分", "四十一分", "四十二分", "四十三分", "四十四分", "四十五分", "四十六分", "四十七分", "四十八分", "四十九分", "五十分", "五十一分", "五十二分", "五十三分", "五十四分", "五十五分", "五十六分", "五十七分", "五十八分", "五十九分"];var secondsContent = ["我愛你","一秒", "Love", "三秒", "我愛你", "五秒", "Love", "七秒", "我愛你", "九秒", "Love", "十一秒", "我愛你", "十三秒", "Love", "十五秒", "我愛你", "十七秒", "Love", "十九秒", "我愛你", "二十一秒", "Love", "二十三秒", "我愛你", "二十五秒", "Love", "二十七秒", "我愛你", "二十九秒", "Love", "三十一秒", "我愛你", "三十三秒", "Love", "三十五秒", "我愛你", "三十七秒", "Love", "三十九秒", "我愛你", "四十一秒", "Love", "四十三秒", "我愛你", "四十五秒", "Love", "四十七秒", "我愛你", "四十九秒", "Love", "五十一秒", "我愛你", "五十三秒", "Love", "五十五秒", "我愛你", "五十七秒", "Love", "五十九秒"];//存放生成dom元素var monthDom=[];var dayDom=[];var weekDom=[];var hourDom=[];var minutesDom=[];var secondsDom=[];var allSet = [ [monthContent,monthDom], [dayContent,dayDom], [weekContent,weekDom], [hourContent,hourDom], [minuteContent,minutesDom], [secondsContent,secondsDom] ];var isChange = false;function btnClick(){ isChange = true; document.getElementsByClassName("btn")[0].style.display = "none" clock.style.transform = "rotate(90deg)" setTimeout(() => { showText() }, 200);}window.onload = function(){ init(); changePosition(); setInterval(() => { getTime(); }, 100);}//初始化樣式function init(){ for(var i=0;i { allSet[i][1][j].style.position = "absolute"; allSet[i][1][j].style.left = x + "px"; allSet[i][1][j].style.top = y + "px"; }, 50); } }}function showText(){ var logo = "我這個人，不太會說話 ,,,,也不太會談戀愛 ,,,,但是呢，遇到你之后我才發現 ,,,,不是我不會 ,,,,是因為之前 ,,,,我根本沒有遇到像你這么對路的人 ,,,,我真的很想跟你在一起 ,,,,我需要的不多 ,,,,我需要的只是在你需要的時候 ,,,,我恰好能在你身邊 ,,,,我喜歡你呢 ,,,,并不是因為你漂亮 ,,,,而是因為 ,,,,你能給我一種別人給不了的特殊感覺" // var logo = "我是一個俗人 ,,,,看山是山 ,,,,看海是海 ,,,,看花是花 ,,,,唯獨見了你 ,,,,心潮開始翻涌 ,,,,山岳百川開始震蕩 ,,,,滿天星光開始閃爍 ,,,,無需你一聲令下 ,,,,我和天地間萬物便通通奔向你"; var ptext = document.getElementsByClassName('text')[0]; var flag = 0; var show = true; var mouse = document.createElement("span"); mouse.style.position='absolute'; mouse.style.left ='0'; mouse.style.top ='0'; mouse.innerText = "__" ptext.append(mouse); var timer = setInterval(function(){ if(flag

————————————————

總結

需要源碼的小伙伴，關注我，私信回復：時鐘屏保表白 獲取

作者：愛編程的小和尚

原文鏈接：https://blog.csdn.net/Newbie___/article/details/105378852

總結

以上是生活随笔為你收集整理的python时钟罗盘酷炫代码_抖音上的时钟屏保，被我改造完用来表白的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。