工作經驗總結
感嘆：我太難了！
本篇爲個人工作記錄，具體代碼涉及本人公司業務不予貼出，但會有小demo與效果圖作爲參考。
任務
使用技術：
js、jquery、ajax、
前端頁面需求：
1、表格。
2、點擊按鈕彈出彈窗。
3、input表單，一邊數字改變，另一邊數字響應變化。
4、按百分比顯示進度條長度與數值。
5、點擊篩選按鈕，滑出篩選框。
6、點擊input框，彈出日期選擇框。
過程
一、 首先做出一個表格。
像這樣
先用HTML/CSS做靜態樣式，使用ajax動態傳值，使用js追加數據及表格樣式。
使用CSS中odd和even對錶格奇偶行樣式設置。
代碼
- 表頭是靜態的，直接寫靜態HTML即可。
<!--START表頭--> <div class="..." style="padding-top: 0px;margin-top:0px;"> <div class="..."> <div style="margin-left: 15px;width: 12.5%;text-align: center;">店鋪情報</div> <div style="width: 20.2%;text-align: center;">商品情報</div> ... ... </div> <div class="..."> <div style="margin-left: 15px;width: 7%;text-align: center;">店鋪コード</div> <div style="width: 6%;text-align: center;">店鋪名</div> <div style="width: 9%;text-align: center;">商品コード</div> <div style="width: 12.7%;text-align: center;">商品名</div> <div style="text-align: right;"> <a style=" width:70px; margin-left: 30px; float:right; cursor: pointer; color: black; position: relative;"> <p style="float: left;height: 20px;">在庫數</p> <img src="..." style="height: 16px;float: left;margin-top: 6px;margin-right: 7px"> <input type="hidden" value="0"> </a> </div> <div style="text-align: right;"> <a style="float:right;cursor: pointer;color: black;position: relative;"> <p style="float: left;height: 20px;">在庫金額（上代）</p> <img src="..." style="height: 16px;float: left;margin-top: 6px;margin-right: 7px;margin-left: -5px"> <input type="hidden" value="0"> </a> </div> ... ... </div> <!--/END表頭--> - 追加數據顯示區域及表格樣式的JS
function addhtml(data) {
for(var i = 0; i < data.rows.length; i++) {
$("#tbody1").append("<tr style = "...">")
+ "<td style = '...'>" + data.row[i].store_no + "</td>"
+ ...
+ "</tr>");
}
}
- ajax動態獲取數據
$.ajax({
type:'GET', //請求方式爲get
url:"./data/shuju.json", //獲取數據
dataType: "json",
success: function(data) {
addhtml1(data)
}
})
二、點擊按鈕彈出彈窗
先給彈窗設置默認樣式爲隱藏，當點擊按鈕時，樣式變爲顯示。即可展示出彈窗效果。
代碼
- 彈窗設置隱藏樣式
<!--START自定義在庫消化率區間彈窗-->
<div id="storeModal" style="z-index: 999; display: none;position: fixed;top: 0;left: 0;right: 0;bottom: 0;background: rgba(0,0,0,0.5)">
<div style="left: 40%;top:30%;position: absolute;">
...
<img src="..." height="20" style="position:absolute;right:10px;top:10px;cursor:pointer" onclick="storePercentModalClose()">
...
....
<div style="width: 100%;height: 26px;margin-top: 11px">
<button type="button" οnclick="storePercentModalClose()" style="...>關閉</button>
<button type="button" style="..." id="storePercentConfirm">保存</button>
</div>
</div>
</div>
</div>
<!--/END自定義在庫消化率區間彈窗-->
- 點擊按鈕顯示彈窗
三、input表單，一邊數字改變，另一邊數字響應變化。
代碼
四、按百分比顯示進度條長度與數值。
初始版：
優化版：
代碼
五、點擊篩選按鈕，滑出篩選框。
代碼
六、點擊input框，彈出日期選擇框。
代碼
寫在最後
剛上手前端時，基本上只懂得HTML和CSS的基礎知識，JS不瞭解。13日下午指定的任務，我說14日下班前完成。
- 表格的製作：使用ajax動態獲取數據不會操作，問了峯峯、星星哥，查找許多資料最後將數據獲取到了，但是表格樣式又不會用js輸出，又查了很多，13日做了一下午才做好表格顯示和動態獲取數據，還有點擊按鈕彈出彈窗、彈窗數值響應改變、點擊按鈕滑出篩選框的顯示和效果、頁面顯示代表百分比的進度條沒做。
- 14日彈窗和窗口滑出效果又不會做，彈窗裏的數值需要響應改變，問同學，問大佬，扒拉出來別人的代碼東改改西改改，趕下班把畫面都做出來了，晚上去參加了部門團建，團建比較開心，但心裏總壓着點事兒，完了給安排任務的同事姐姐發了個消息，說在學校主要學的是Java，前端了解不深，做得不好希望她見諒，她告訴我沒關係，慢慢來。
- 15日交任務被駁回，因爲風格問題和部分顯示問題，需要修改。靜態進度條又需要做成動態按百分比撥動的樣式，點頭接受任務，但是實際上手卻不會做，內心焦灼。於是在公司非常焦躁地邊查資料邊做，到了下班時間，才做了一點，感到深深的無助與弱小，半夜越想越難受，哭了出來，然後就好受了點，明白哭也沒用只能提升自己的能力。
- 16日加快進度，理清楚了邏輯，還是查資料，但是更大部分是向他人學習。在查閱大量資料與通過他人的指點，最後做好了所有功能與顯示。鬆了一口氣。但是去交任務的時候有個顏色需要調整，頁面一個部位的內容需要做成居中顯示，又多加了一個日期彈窗的功能，還得接着做。但內容居中後，進度條顯示又有問題，當晚我下班後回家在自己電腦上琢磨，太困了就睡着了。
- 17日今天，進度條我大哥三下五除二做了一個demo讓我參考，專業前端和我這個半吊子根本沒法比，兩三行代碼就可以搞定的事情，我卻很複雜又費時地去做。日期篩選功能，老系統有日期插件，但是不知道爲什麼我調用起來有問題，問了下開發這個系統的同事，幫我處理好了。
心得
本人是Java入的IT這個坑，原以爲自己從業後就是沒有界面的小後端，沒想到第一份實習工作就要做對本人來說較爲複雜的畫面，前端操作起來偶爾會由於自己的笨拙感到煩躁，但也證明了我更加需要多多學習，提高自身水平。本次工作過程使我深刻感到知識獲取與自身能力的正比關係，還有每一個It工作者的不易與自我滿足的成就感。
在公司鍛鍊很大，很感謝我的公司。