傻傻呼呼，折折騰騰得寫了兩天的可樂罐和鐘錶，小小地總結一下，鼓勵一下自己。
其實這兩個東西主要內容還都是通過css完成的，在這兩個程式裡js的作用無非是縮減一下**的長度，還有就是通過函式的方法新增css完成不了的樣式，當然還有展示一下自己的理科思維，誰知道真的跑起來誰快誰滿呢。。。
1、可樂罐，主要思路是通過
background-attachment
:fixed使得背景相對於顯示視窗不動，而背景對應的div的是相對於body不動的，於是這樣子，背景和其所在的div便產生了相對移動。在顯示的框內，當我們向右拖動滑條，我們感覺到我們從這張背景的右邊部分，一直看到了這張的左邊（顯示的永遠只有整張的一部分而已。於是拖動的效果便產生了。在通過將div細分，分別用
background-position:設定沒一小塊的背景，形成可樂罐的立體效果，從而變成了可以滾動的立體的可樂罐。
同時，這個裡面第一次碰到了js設定css樣式，乙個值很容易，什麼"red" "center"之類的，只要保證value部分的值是字串即可。而對於
background-position:這樣的樣式，值不只乙個，而在js中同樣要把他們當做乙個字串來看。對於js來說，css樣式的值永遠都只是乙個字串，而js只負責在這個css樣式上面綁上了這樣乙個字串（格式要注意，如另一條筆記寫的那樣只能有乙個""），對於css來說，只要這個字串符合它自身的格式，他就可以解析，而js完全不知道這樣的結構，他只是進行了這個行為而已。（部分需參見"js給css賦值"筆記）
2、鐘錶，不太能理解原作者的**中的js部分。以後再返回來看吧。我的思路是，先讓各個指標先動起來，按照他們應該動的速度。在css中通過定義乙個@-webkit-keyframes rotate
的樣式，通過-webkit-animation: rotate 36000000s linear infinite;
css3的動畫效果
引用，讓時間和rotate的角度對應好，這樣子指標就能夠按照它應該有的速度旋轉了，預設旋轉是按照中心旋轉的，如有需要可以設定。然後把時間和角度都設定久一點，不然轉轉一半就停住了就不好了。。。接下來，讓鐘錶從當前時間開始動。通過var hour=date.gethours(); var second = date.getseconds(); var minute = date.getminutes();
得到當前的時間，接下來只要按照當前時間旋轉img外面的div即可（因為之前的動畫師對應於img的）於是外面又碰到了js設定css的情況了。可是這次不能用
document.getelementbyid("part_"+i).style.backgroundposition=
backgroundposition(i)+"px "+"30px";
這種形式了，因為這次是value是rotate('+startminute()+'deg)
由於rotate內部以及為了結合數值與單位以及是字串了，要使得整個value變成乙個字串好像不行。參考網上教程，設定css樣式時可以採用如下格式
element.style.csstext += 』width:100px;height:100px;top:100px;left:100px;』將新的樣式作為乙個字串整體加到某個id的元素上，而不管是什麼樣的屬性與功能於是我們也可以把rotate按照document.getelementbyid("second").style.csstext+=' -webkit-transform:rotate('+startsecond()+'deg);';
的格式加上去，這裡的value是'-webkit-transform:rotate('+startsecond()+'deg);'這個字串，而字串內部的內容被整體的加到所對應的元素上，因此，在css來看是-webkit-transform:rotate('+startsecond()+'deg);
這麼個東西多了出來（注意這個裡面要用的是：不要用=不然css不認識），很好，乙個-webkit-transform
操作，操作的內容是rotate，rotate的值是一整個字串，第一條的時候說過，這樣子作為乙個整體的字串的值，css是可以辨別的，同時也符合css格式，ok，樣式可以改變了。。。
總結起來，結構和思路都沒有太大的問題，相反的是一些格式不清楚，不知道新增css的格式是什麼導致自己浪費了很多時間。。。還是得多積累才行啊。。。
JS原型與原型鏈總結篇
函式物件 通過new function 得到的物件，有 proto 和prototype兩個屬性 普通物件 通過非function 函式new得的物件，有 proto 乙個屬性 總結 凡是通過 new function 建立的物件都是函式物件，其他的都是普通物件。例項的建構函式 constructo...
js 巨集任務與微任務總結
script settimeout setinterval messagechannel postmessage setimmediate requestanimationframe i o操作 ui渲染 process.nexttick mutationobserver promise.then ...
js函式防抖與節流總結
頻繁觸發，只在特定的時間內執行一次 函式防抖 function debounce fn,delay delay 頻繁觸發，但只在特定的時間內沒有再次觸發執行函式，函式才會真的去執行。應用場景 輸入框自動補全時間，頻繁操作點讚取消點讚等。function throttle fn,delay delay...