H5新春賀卡之筆記

課程是前端中級課程

知識方面我們無可挑剔，html，css，javascript作爲一個前端方面人員得必須熟練！不知道什麼鬼來的，那得學習學習啦！

好了，現在該說說我從課程學到了什麼和課程中會遇到的坑！權當課程學習的筆記！

從課程中我學到了什麼，慕課中提及的我就省略了，沒提及的，我就補充一下。

結構與表現分離（web標準）
代碼的簡潔與整潔（便於讀源碼和改源碼）
代碼的註釋（便於讀源碼和改源碼）

一個項目從立項到完成！多多少少都得經歷這樣的一個過程：需求分析-開發-優化-發佈。

很多人都是拿到任務就馬上寫代碼，其實這不是一個好習慣，需求分析對自己代碼構思很有幫助，如果簡單頁面，省去這步驟倒還不會挺麻煩！但是項目如果是中大型網站，沒有詳細分析好，後續會帶來各種各樣的問題，比如代碼的冗餘，多人合作產生的衝突，代碼組織沒有規律等等！
項目分析

由於項目面對的是移動端用戶，並且主題是新春主題，所以表現形式得歡快活潑！
移動端項目，採用html作爲結構層
網頁樣式方面，小demo優先選用Css3
項目過小，用原生javascript代替其他框架.
項目涉及的特殊字體因爲考慮到移動端並且有一定大小影響加載，所以採取圖片代替
圖片方面儘可能壓縮到無損最小值
爲了便於測試，使用WampServer爲本地服務器測試環境

開發

- 切圖

切圖方面老師沒怎麼細講，但我們還是得學吶！企業中，多數都是設計好psd圖提供給前端人員，前端人員再跟設計師溝通，看這圖怎麼切！不會吶！那得學！

切圖的軟件有Photoshop，Fireworks。下面有個教程！會的鞏固鞏固，不會的學習學習！

前端工程師必備的PS技能——切圖篇

- 搭建結構層

編程嘛！得有一個好的工具。開發工具很多，但最適合自己的纔是最好的工具！

前端開發工具技巧介紹—DW篇

前端開發工具技巧介紹—Sublime篇

WebStorm 有哪些過人之處？

移動端開發都一個模板可套的！這是前輩們分享的經驗也經過考驗與驗證了！

移動端頁面開發資源總結

課程用到的很簡單：

<!DOCTYPE html>
<html lang="Zh-cn">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta name="format-detection" content="telephone=no">
<title>2016年慕課網新年特獻</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<script src="js/script.js" type="text/javascript" charset="utf-8" async defer></script>
</head>
<body>
</body>
</html>

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

以上代碼IE = edge告訴IE使用最新的引擎渲染網頁，chrome = 1則可以激活Chrome Frame .

“IE=Edge,chrome=1″這樣簡單快捷，但是弊端是代碼將無法通過W3C驗證。其實這並不是問題，畢竟標準只是標準。有時我們不能過於教條主義！

項目W3c驗證

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta name="format-detection" content="telephone=no">
<script src="js/script.js" type="text/javascript" charset="utf-8" async defer></script>

width:可視區域的寬度，值可爲數字或關鍵詞device-width
intial-scale:頁面首次被顯示是可視區域的縮放級別，取值1.0則頁面按實際尺寸顯示，無任何縮放
maximum-scale=1.0, minimum-scale=1.0;可視區域的縮放級別，
maximum-scale用戶可將頁面放大的程序，1.0將禁止用戶放大到實際尺寸之上。
user-scalable:是否可對頁面進行縮放，no 禁止縮放
在iPhone 手機上默認值是（電話號碼顯示爲撥號的超鏈接），可將telephone=no，則手機號碼不被顯示爲撥號鏈接
script的async屬性指示瀏覽器是否在允許的情況下異步執行該腳本
script的defer屬性定義該腳本是否會延遲到文檔解析完畢後才執行，兼容性不好。

主體代碼值得注意的是代碼編寫時要預留id給javascript用於控制音樂的播放與暫停和三屏的切換！

<div id="music">
    <img class="music_disc music_play" src="images/music_disc.png">
    <img class="music_pointer" src="images/music_pointer.png">
</div>
<div class="page" id="page1">
    <div class="bg"></div>
    <div class="p1_lantern">點擊屏幕<br>開啓好運2016</div>
    <div class="p1_imooc"></div>
    <div class="p1_words">2016年慕課網新年特獻</div>
</div>
<div class="page" id="page2">
    <div class="bg p2_bg_loading"></div>
    <div class="bg"></div>
    <div class="p2_circle" id="p2_circle"></div>
    <div class="p2_2016"></div>
</div>
<div class="page" id="page3">
    <div class="bg"></div>
    <div class="p3_logo"></div>
    <div class="p3_title"></div>
    <div class="p3_couplet_second couplet"></div>
    <div class="p3_couplet_first couplet"></div>
    <div class="p3_blessing"></div>
</div>
<audio autoplay="true">
    <source src="audio/happynewyear.mp3" type="audio/mpeg">
</audio>

- 表示層

    *{ margin: 0; padding: 0; border: none; font-size: 1.5625vw; font-family: "Microsoft YaHei"; }

CSS reset,大家最爲熟悉的是“*”，這應該也是最早的CSS reset了，但這樣重置樣式，很多原有特性都被重置了，比如h系列標籤的加粗，字號等等！
更好的寫法是將常用的標籤羅列出來並設置樣式！更多的css重置請搜索瞭解！
但教程中的css爲啥又用上通配符了呢？由於項目較小，涉及的標籤也不多，這時偷個懶也情有可原的，有時我們不能太過於教條主義，受傷的不是誰，最終受傷還是寫代碼之人！

    font-size: 1.5625vw;

爲了不同屏幕的字體自適應。假設手機端的默認寬度640px，而1vw就相當於6.4px，1.5625vw剛剛爲10px！知道怎麼計算的話，後面的vw，vh也好理解了！像

    div#music {top: 3vh; right: 4vw; width: 15vw; height: 15vw;}

擴展閱讀:七個你可能不瞭解的CSS單位

由於是項目的全屏的多屏切換，所以html，body得設置

    html,
    body { height: 100%; overflow: hidden;}

    div.page {height: 100%; }

背景圖片不隨頁面寬高而改變，不急不急，Background-size來幫您！

    background-size: 100%;

音樂圖標由於是固定位置的！所以設置：

    div#music { position: fixed;}

音樂圖標這邊怎麼是方的，啊哈！Border-radius能有大作爲了！

    div#music { border-radius: 50%;}

第一屏的燈籠閃爍，再沒接觸僞元素的話，可能會選擇內嵌一個div，但有僞元素實現起來就更好了！CSS3 選擇器——僞類選擇器

 Element:before||:after {
    content: '';//必加，不加撐不開容器的寬高
    }

在設置燈籠的以及內容位置時，計算對應數值是很頭痛的。比如本來寬度是640px，但要padding：5px，這是盒模型就被撐大了，但又爲了控制好盒子寬度爲640px，所以我們最終設置的寬度爲630+5+5=640px！但有了Box-sizing，那就好辦了！

box-sizing屬性可以爲三個值之一：content-box（default），border-box，padding-box。
content-box，border和padding不計算入width之內
padding-box，padding計算入width內
border-box，border和padding計算入width之內

控制燈籠閃爍和音樂圖標、福、三小圈轉動都有用到Css3的Animation、Transform屬性。

燈籠閃爍使用transform:scale(x,y);實現2d縮放！想實現這效果還得通過 @keyframes 規則！代碼如下（兼容前綴已刪，下面如有也是一樣！）：

div#page1 div.p1_lantern:before { position: absolute; z-index: -1; top: 0; right: 0; bottom: 0; left: 0; width: 30vw; height: 30vw; margin: auto; content: ''; opacity: .5; border-radius: 50%; background: #d60b3b;
box-shadow: 0 0 10vw 10vw #d60b3b;
animation: p1_lantern_flash .5s infinite alternate;
//0.5s完成一次動畫，
//infinite：規定動畫應該無限次播放。
//alternate：動畫應該輪流反向播放。
}
@keyframes p1_lantern_flash {
0% { opacity: .5;
transform: scale(.8, .8);
}
100% { opacity: 1; }
}

在第二屏的三小圈轉動使用了transform:rotate(angle);實現2d旋轉！
爲什麼旋轉的度數要一正一反且不同度數，我的理解是我們要的效果是看出三小圈一起轉動，如果都設置相同度數的話，最終看到的效果就是一個物體在轉動而已！

拓展學習：CSS3模擬齒輪轉動

福字轉動類似音樂圖標的實現！

第一屏到第二屏的切換由於切換沒有等待效果，影響體驗，所以增加

並添加等待樣式

    div#page2 div.bg.p2_bg_loading { z-index: 4; background: #ef1639;animation: p2_bg_loading 1s linear forwards;
    }
    @keyframes p2_bg_loading {
    0% { opacity: 1; }
    100% { opacity: 0; }
    }

第二屏切換到第三屏使用fadeout和fadein

div#page2.fadeout{
    transform: translate(0,-100%);//滑動一個屏的高度
    opacity: .3;
    }

    div#page3.fadein{
    transform: translate(0,-100%);
    }

- 動作層

由於onclick事件有300ms的延遲，並且項目面對的是移動端用戶！所以改用觸摸事件TouchEvent；控制音樂的暫停與播放是通過控制[audio](audio的API的！

music.addEventListener("touchstart", function() {
    if (audio.paused) {
    audio.play();
    this.childNodes[1].setAttribute("class","music_disc music_play");
    } else {
    audio.pause();
    this.childNodes[1].setAttribute("class","music_disc");
    };
    // if (audio.paused) {
    // audio.play();
    // this.childNodes[1].style.animationPlayState = "running";
    // this.childNodes[1].style.webkitAnimationPlayState = "running";
    // } else {
    // audio.pause();
    // this.childNodes[1].style.animationPlayState = "paused";
    // this.childNodes[1].style.webkitAnimationPlayState = "paused";
    // };
    }, false);

人爲控制音樂停止的話，動畫也跟着停止，由於考慮到兼容性，棄用

 this.childNodes[1].style.animationPlayState = "paused";
 this.childNodes[1].style.webkitAnimationPlayState = "running";

改用移除或增加對應的class：music_play。

音樂總會有停止的時候，所以我們得通過addEventListener監聽音樂的停止從而控制音樂磁盤停止轉動！

 audio.addEventListener('ended', function () {
    music.childNodes[1].setAttribute("class","music_disc");
    }, false);

如需轉載，請註明出處。

H5新春賀卡之筆記

AI模型 Llama 3體驗筆記

【面試準備】又一次失敗的面試經歷，題目離譜～資深軟件測試工程師

dotnet 8 版本與銀河麒麟V10和UOS系統的 glibc 兼容性

TCP連接通信過程及網絡管理

H5新春賀卡之筆記

數據庫管理視圖:查看視圖定義

初識Linux-系統安裝，系統信息查看，馬哥初印象

文本編輯器專輯之—Vim

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結