offsetleft(offsetleft與left區別)

作者：愛編程的小和尚

原文鏈接：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 condsContent = [];//存放生成dom元素var monthDom=[];var dayDom=[];var weekDom=[];var hourDom=[];var minutesDom=[];var condsDom=[];//二維數組，0存放數據，1存放dom元素var allSet = [ [monthContent,monthDom], [dayContent,dayDom], [weekContent,weekDom], [hourContent,hourDom], [minuteContent,minutesDom], [condsContent,condsDom] ];

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

function init(){ for(var i=0;i<allSet.length;i++){ for(var j=0;j<allSet[i][0].length;j++){ var temp = createLabel(allSet[i][0][j]); clock.appendChild(temp); allSet[i][1].push(temp); } }}//創建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<labels.length;i++){ labels[i].style.fontWeight = "normal" labels[i].style.color = "#000"; } //獲取當前時間 var now = new Date(); var month = now.getMonth(); var day = now.getDate(); var week = now.getDay(); var hour = now.getHours(); var minute = now.getMinutes(); var conds = now.getSeconds() //把當前時間放到一個數組中，和我們定義數據相對應，時間正好是對應數據的下表 var nowValue = [month,day-1,week,hour,minute,conds]; //把當前時間設置成黃色和加粗效果 for(var i=0;i<nowValue.length;i++){ var index = nowValue[i]; allSet[i][1][index].style.color = "yellow" allSet[i][1][index].style.fontWeight = "bolder" }}

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

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

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

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

function btnClick(){ //改變狀態的變量 isChange = true; //旋轉90deg document.getElementsByClassName("btn")[0].style.display = "none" clock.style.transform = "rotate(90deg)" //延遲200毫秒展示文字 tTimeout(() => { 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<allSet.length;i++){ for(var j=0;j<allSet[i][1].length;j++){ //日期、時間的半徑的計算方法，手動調出來的 var r = (i+1)*25 + i*35; var deg = 360 / allSet[i][0].length *(j-nowValue[i]); //每個時間的位置 var x = midX + r * Math.sin(deg*Math.PI/180); var y = midY - r * Math.cos(deg*Math.PI/180); allSet[i][1][j].style.left = x + "px"; allSet[i][1][j].style.top = y + "px"; //把之前轉過的90deg再轉回來 allSet[i][1][j].style.transform = "rotate("+(deg-90)+"deg)"; } } }}

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

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

function showText(){ var logo = "我這個人，不太會說話 ,,,,也不太會談戀愛 ,,,,但是呢，遇到你之后我才發現 ,,,,不是我不會 ,,,,是因為之前 ,,,,我根本沒有遇到像你這么對路的人 ,,,,我真的很想跟你在一起 ,,,,我需要的不多 ,,,,我需要的只是在你需要的時候 ,,,,我恰好能在你身邊 ,,,,我喜歡你呢 ,,,,并不是因為你漂亮 ,,,,而是因為 ,,,,你能給我一種別人給不了的特殊感覺" var ptext = document.getElementsByClassName('text')[0]; var flag = 0; var show = true; var mou = document.createElement("span"); mou.style.position='absolute'; mou.style.left ='0'; mou.style.top ='0'; mou.innerText = "__" //光標閃爍效果的光標 ptext.append(mou); var timer = tInterval(function(){ if(flag<logo.length){//判斷文字是否全部出現 if(logo.charAt(flag)!=","){ mou.style.left = parInt(mou.style.left) + "px" } if(logo.charAt(flag) == " "){ //判斷空格，換行，使用絕對定位，每個字符高20px mou.style.left = 0 + "px" mou.style.top = 29 + parInt(mou.style.top)+"px" ptext.appendChild(document.createElement("br")) }el if(logo.charAt(flag) == ","){ //判斷, 原地閃爍 if(!show){ mou.style.display = "inline-block"; }el{ mou.style.display = "none"; } show =!show; }el{ //正常文字的話就是添加一個span標簽 mou.style.left = 20 +parInt(mou.style.left) + "px" var span = document.createElement("span"); span.innerText = logo.charAt(flag); ptext.append(span) } flag++; }el{ //文字全部出現，清除定時器，移除光標顯示 clear(); mou.style.display='none' } },150) function clear(){ //清除定時器 clearInterval(timer) }}

全部代碼：

<!DOCTYPE html><html lang="en"><head> <meta chart="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link rel="stylesheet" href="./index.css"> <title>Document</title></head><body> <p class="text"></p> <div class="clock"></div> <div class="btn" onclick="btnClick()"></div> <script src="./index.js"></script></body></html>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 condsContent = ["我愛你","一秒", "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 condsDom=[];var allSet = [ [monthContent,monthDom], [dayContent,dayDom], [weekContent,weekDom], [hourContent,hourDom], [minuteContent,minutesDom], [condsContent,condsDom] ];var isChange = fal;function btnClick(){ isChange = true; document.getElementsByClassName("btn")[0].style.display = "none" clock.style.transform = "rotate(90deg)" tTimeout(() => { showText() }, 200);}window.onload = function(){ init(); changePosition(); tInterval(() => { getTime(); }, 100);}//初始化樣式function init(){ for(var i=0;i<allSet.length;i++){ for(var j=0;j<allSet[i][0].length;j++){ var temp = createLabel(allSet[i][0][j]); clock.appendChild(temp); allSet[i][1].push(temp); } }}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<labels.length;i++){ labels[i].style.fontWeight = "normal" labels[i].style.color = "#000"; } var now = new Date(); var month = now.getMonth(); var day = now.getDate(); var week = now.getDay(); var hour = now.getHours(); var minute = now.getMinutes(); var conds = now.getSeconds() var nowValue = [month,day-1,week,hour,minute,conds]; for(var i=0;i<nowValue.length;i++){ var index = nowValue[i]; allSet[i][1][index].style.color = "yellow" allSet[i][1][index].style.fontWeight = "bolder" } if(isChange){ var midX = document.body.clientWidth / 2; var midY = document.body.clientHeight / 2 -100; for(var i=0;i<allSet.length;i++){ for(var j=0;j<allSet[i][1].length;j++){ var r = (i+1)*25 + i*35; var deg = 360 / allSet[i][0].length *(j-nowValue[i]); var x = midX + r * Math.sin(deg*Math.PI/180); var y = midY - r * Math.cos(deg*Math.PI/180); allSet[i][1][j].style.left = x + "px"; allSet[i][1][j].style.top = y + "px"; allSet[i][1][j].style.transform = "rotate("+(deg-90)+"deg)"; } } }}function changePosition(){ for(let i=0;i<allSet.length;i++){ for(let j=0;j<allSet[i][1].length;j++){ let x = allSet[i][1][j].offtLeft; let y = allSet[i][1][j].offtTop; tTimeout(() => { 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 mou = document.createElement("span"); mou.style.position='absolute'; mou.style.left ='0'; mou.style.top ='0'; mou.innerText = "__" ptext.append(mou); var timer = tInterval(function(){ if(flag<logo.length){ if(logo.charAt(flag)!=","){ mou.style.left = parInt(mou.style.left) + "px" } if(logo.charAt(flag) == " "){ mou.style.left = 0 + "px" mou.style.top = 29 + parInt(mou.style.top)+"px" ptext.appendChild(document.createElement("br")) }el if(logo.charAt(flag) == ","){ if(!show){ mou.style.display = "inline-block"; }el{ mou.style.display = "none"; } show =!show; }el{ mou.style.left = 20 +parInt(mou.style.left) + "px" var span = document.createElement("span"); span.innerText = logo.charAt(flag); ptext.append(span) } flag++; }el{ clear(); mou.style.display='none' } },150) function clear(){ clearInterval(timer) }}

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

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

作者：愛編程的小和尚

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