2018年8月31日 星期五

用 localStorage 處理購物車的資料

我們一般要把購物車在頁面間傳遞都會使用 session 的方式,也是可以把資料存到資料庫後在讀取別頁的時候把資料再撈出來,在 html5 有了 localStorage,要處理其實有另一個選擇而且可能更方便。

首先準備一個購物車的陣列 cart,當 localStorage.getItem("cart") 有值的時候就把值塞到陣列內,然後把陣列給 parse 成 html。

而要加購物車的時候再把每次新增的品項跟其他資料加到 cart 內,由於 localStorage 只能存字串,所以必須要把物件字串化後再存,然後重刷一次購物車,資料也可以隨意的帶到其他頁面。

只是注意需要在清空購物車或是結帳後把 cart 給清空,這樣就完成了,完整的 code 如下:

See the Pen shopping cart by deathhell (@deathhell) on CodePen.

Read more

2018年8月29日 星期三

2018年8月28日 星期二

2018年8月27日 星期一

2018年8月26日 星期日

[CSS] 垂直文字書寫- writing-mode 和 text-orientation

網頁的排版預設都是水平由左往右排,所以像是中國文字這種垂直閱讀的,只要設定 css 的 writing-mode 屬性就可以了。

預設的屬性為 writing-mode: horizontal-tb;
可以設成 vertical-lr(垂直由左而右)和 vertical-rl(垂直由右而左)

See the Pen Writing Mode by deathhell (@deathhell) on CodePen.




此外若是英文的話想要調整文字的排列方式,也可以再加上 text-orientation 這個屬性,不過要注意瀏覽器的支援程度。
mixed 為橫向書寫,upright 則是改成英文字母會跟排列方向一樣是垂直的。

See the Pen text-orientation by deathhell (@deathhell) on CodePen.

Read more

2018年8月25日 星期六

[壽屋 ZA] ライガーゼロ(長牙獅零式)

ライガーゼロ

也是因為玩機戰認識的機體,出自於ゾイド新世紀スラッシュゼロ


這系列的洛伊達價位不算高,也只要簡單的組合就好了,之前洛伊德的模型也好像都是壽屋出的,看到那個零件很多就懶得組,所以看到這系列推出我就很開心的收藏了。
ライガーゼロライガーゼロ


可動性沒什麼問題,但這種動物型的能擺的動作有限,怪不得機器人還是人型的受歡迎。
ライガーゼロライガーゼロ


ライガーゼロライガーゼロライガーゼロ


出的有點久了,最近才有時間整理,這種不是 Bandai 出的模型量都不多,大概第一批沒買到就很難再收到了,只不過在台灣應該客群也不算多就是了。
ライガーゼロライガーゼロ

ゾイド新世紀スラッシュゼロ的介紹。
Read more

2018年8月24日 星期五

2018年8月22日 星期三

2018年8月21日 星期二

2018年8月20日 星期一

2018年8月19日 星期日

[Robot 魂] 吉普賽復仇者(Gipsy Avenger)

P1190013

我很喜歡環太平洋第一集,第二集換了導演加上中資介入是真的跟第一集有差,但還是個能看的爽片,只可惜第一集時候的那幾台機器人都沒能出在 R 魂上,第二集看起來 R 魂倒是很快就談好授權,於是我就入手了主角機吉普賽復仇者(Gipsy Avenger)。

正面背面
P1022490P1022491


可以看得出來這台有極力保持原本第一集吉普賽危機外型上的特色,名字說跟復仇者聯盟沒關係我也不相信,武裝也不多但電影中讓人有印象的洛克砲(?)跟斬龍劍(?)有附就好了。

P1022492P1022493


可動性很好塗裝也不錯,R 魂還是沒讓人失望。
P1190005P1190006P1190007


看外盒有蹲下來的姿勢當然要嘗試一下。
P1190008


洛克破壞砲(誤)角度沒喬好的話看起來還滿弱的。
P1190009P1190010P1190011


斬龍劍不知道為什麼只在左手有。
P1190012P1190013P1190014


說實在第一集的機體真的讓人有印象的多,所以第二集我就只收這隻,第一集的話可能還會多收幾隻,不知道 R 魂有沒有機會回頭出第一集的機體就是了。
P1190015P1190016


看個當時的預告回味一下。


Read more

2018年8月18日 星期六

2018年8月16日 星期四

2018年8月15日 星期三

v3 jQuery 的 slim 版本



最近在用 bootstrap,因為發現有些功能會無緣無故的失效,發現 bootstrap 4 之後用的 jquery 版本有 .slim 的字,查了一下才知道在 jquery v3 後把一些功能閹割後弄了一個 slim 的版本,而閹割掉的部分為 effect 和 ajax 的部分,所以如果你的網頁不會用到這些功能可以放心的使用 slim 版本,會的話還是用完整版的會比較好,也記得要更新一下 bootstrap 專案內的 jquery 版本。
Read more

2018年8月14日 星期二

寫程式要乖乖



又一個班要結訓了,因為另一班也正在上課的關係所以偶爾會去看看,今天他們還要我幫他們在乖乖上簽名,然後被要求畫了好幾隻寶可夢。




學生說 google 很常找到我的部落格,又問說是不是應該要寫個部落格,其實我是很支持,因為我從以前開始就一直喜歡在網路上留些東西,不過堅持一直都不是一件簡單的事。



Read more

2018年8月9日 星期四

人生寫的第一個網站!



google 竟然找得到我高中時寫的第一個網站 XD,真是太神奇了傑克。

製作人 212-22 江舜智

製作日期 1999/09/14

指導老師 陳麗雅 老師

應該是家政課的作品,算算也快 20 年了真神奇。


Read more

2018年8月8日 星期三

2018年8月7日 星期二

2018年8月6日 星期一

2018年8月5日 星期日

[Vue.js] Form input 事件綁定

基本的用 model 可以改變 ui 上的值

See the Pen vue model by deathhell (@deathhell) on CodePen.




處理多行文字

See the Pen vue multiline by deathhell (@deathhell) on CodePen.



顯示 checkbox 的選取狀態

See the Pen vue checkbox by deathhell (@deathhell) on CodePen.



取得 checkbox 的值

See the Pen vue checkbox value by deathhell (@deathhell) on CodePen.




取得 radio 的值

See the Pen vue radio by deathhell (@deathhell) on CodePen.




取得 select 的值

See the Pen vue select by deathhell (@deathhell) on CodePen.




複選 select 的值

See the Pen vue multi select by deathhell (@deathhell) on CodePen.




使用 v-for 迴圈

See the Pen vue select v-for by deathhell (@deathhell) on CodePen.




Read more

2018年8月4日 星期六

[Vue.js] 事件控制

使用 v-on:click 可以設定點擊後執行的事件,以下為每次點擊都 +1



直接執行或是事件觸發時再執行的寫法



帶入變數



這邊可以調整事件的預設行為

.stop
.prevent
.capture
.self
.once
.passive

  1. <!-- the click event's propagation will be stopped -->  
  2. <a v-on:click.stop="doThis"></a>  
  3.   
  4. <!-- the submit event will no longer reload the page -->  
  5. <form v-on:submit.prevent="onSubmit"></form>  
  6.   
  7. <!-- modifiers can be chained -->  
  8. <a v-on:click.stop.prevent="doThat"></a>  
  9.   
  10. <!-- just the modifier -->  
  11. <form v-on:submit.prevent></form>  
  12.   
  13. <!-- use capture mode when adding the event listener -->  
  14. <!-- i.e. an event targeting an inner element is handled here before being handled by that element -->  
  15. <div v-on:click.capture="doThis">...</div>  
  16.   
  17. <!-- only trigger handler if event.target is the element itself -->  
  18. <!-- i.e. not from a child element -->  
  19. <div v-on:click.self="doThat">...</div>  



如果要綁定鍵盤事件,可以用 v-on:keyup 後面帶 keycode



若覺得記 keycode 麻煩,也可以用這種寫法
  1. <!-- same as above -->  
  2. <input v-on:keyup.enter="submit">  
  3.   
  4. <!-- also works for shorthand -->  
  5. <input @keyup.enter="submit">  

目前可以使用的鍵盤按鍵如下:

.enter
.tab
.delete (captures both “Delete” and “Backspace” keys)
.esc
.space
.up
.down
.left
.right


Read more

[Vue.js] 列表

可以直接把物件渲染成列表,加入 index 就可以列出當前物件的索引。




輸出 object 的值。



這樣可以把 key 跟 value 都輸出



包含索引




計算後回傳奇數



輸出 1~10 的數字



搭配 v-if 判斷是否是空物件


可以使用一些調整陣列的方式來改變列表內容

push()
pop()
shift()
unshift()
splice()
sort()
reverse()

改變陣列調整 list 內容

See the Pen vue add remove list by deathhell (@deathhell) on CodePen.

Read more

2018年8月3日 星期五

[Vue.js] 條件判斷

使用 v-if 跟 v-else 來判斷不同情況下顯示不同結果



用一個 template 包起來




使用 v-show 來顯示或隱藏,用法跟 v-if 類似,不同的是 DOM 都是存在的,只是切換 display 狀態而已,而 v-show 不支援 template

See the Pen vue v-show by deathhell (@deathhell) on CodePen.





用這樣去切換兩種模式
Read more

CSS 的 grid 教學(3)- grid-template-areas

可以使用 grid-template-columns 和 grid-template-rows 將版面分割為這樣



然後設計好各個區塊的樣式,再利用 grid-template-areas 依序指定每一個區塊想要用哪個樣式,就可以把版排好了。




當版面安排好之後,就可以把內容填進去了,是不是跟以往排版的觀念差很多呢?



最近我很多專案都用 flex 排版了,gird 看起來有他方便的地方,目前也還未知到底哪個比較好,不過多學點總是在專案上有遇到問題就可以用比較好或熟悉的方式來解決。
Read more

CSS 的 grid Layout 教學(2) 對齊

使用 justify-content 可以設定水平對齊方向,分別可以設定
start: 對齊開始
end: 對齊結尾
center: 置中
stretch: 展開
space-around: 平均分散
space-between: 從邊緣平均分散
space-evenly: 平均分配,中間的空隙保持相等


可以對個別元素設定 justify-self,可以用的值為 start, end, center 和 stretch


使用 align-content 可以設定區塊內整體的對齊方向,可以使用的值有
start: 對齊開始
end: 對齊結尾
center: 置中
stretch: 展開
space-around: 平均分散
space-between: 從邊緣平均分散
space-evenly: 平均分配,中間的空隙保持相等


可以對個別元素設定 align-self,可以用的值為 start, end, center 和 stretch
Read more

CSS 的 grid Layout 教學(1)

grid 也出來好一陣子了,瀏覽器也陸續支援,跟以往的排版觀念差很多我不大習慣,不過先筆記一下之後再視情況用看看好了。

最基本的 grid,用 display: grid 把排版方式設為 grid,接下來的 grid-template-columns 是設定 grid 的寬度,可以設固定值,也可以設成 auto 後會自動分散填滿空間。



設定欄位高度使用 grid-template-rows



grid 分為 gird 和 inline-grid,可以看得出來設為 grid 時會自動填滿母層的空間,inline-grid 則是看你裡面東西寬度有多少就撐開多少。



可以用 grid-column-gap 設定左右間距或用 grid-row-gap 設定上下間距,或是合併成 grid-gap,合併寫的第一個值為 row 的間距,第二個值為 column 的間距。



fr: grid 後引進了新的單位 fr,這個單位會去依據每一行或列的總數,再去依據自己佔的數字取得比例,比如有一行是 1fr 2fr 3fr,那第一個就是 1/(1+2+3) 這樣。
Read more

2018年8月2日 星期四

[Vue.js] class 和 style

藉 v-bind:class 裡的判斷式設定 class




也可以用一個 object 包起來



用以下方式設定 class



多個 class 的判斷



使用 style 時



寫成 object


Read more

[Vue.js] 計算屬性

用 vue 把值運算後輸出。




或是像這樣把值輸出。



Read more

[Vue.js] v-bind 與 v-on 的縮寫

v- 是 vue 的前綴字,可以用以下縮寫代替。

v-bind 縮寫:

  1. <!-- 完整語法 -->   
  2. <a v-bind:href="url"></a>   
  3. <!-- 縮寫 -->   
  4. <a :href="url"></a>   
  5. <!-- 完整語法 -->   
  6. <button v-bind:disabled="someDynamicCondition">Button</button>   
  7. <!-- 縮寫 -->   
  8. <button :disabled="someDynamicCondition">Button</button>  


v-on 縮寫:

  1. <!-- 完整語法 -->   
  2. <a v-on:click="doSomething"></a>   
  3. <!-- 縮寫 -->   
  4. <a @click="doSomething"></a>  
Read more

[Vue.js] 使用 Components

當 UI 比較複雜時,可以使用 vue 的 components 的寫法,使用 Vue.component 定義元件和 template,官方範例是將陣列寫入 component 中。




利用 v-bind:class 可以設定不同狀態顯示不同 class
Read more

[Vue.js] 開始使用 vue.js

vue.js 是近年很紅的 js 框架,之前也有多少在一些專案中使用了,這次就來整(ㄅㄧˇ)理(ㄐㄧˋ)一下,並希望可以之後再少用一些 jQuery 來寫專案了。

要使用的話首先跟 jQeury 一樣先把 vue 給讀進來。
  1. <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>  

來看官方第一個範例:
  1. <div id="app">  
  2.   {{ message }}   
  3. </div>  

  1. var app = new Vue({   
  2.   el: '#app',   
  3.   data: {   
  4.     message: 'Hello Vue!'  
  5.   }   
  6. })  

像這樣在 {{ message }} 裡就會出現 Hello Vue! 的字了。


下面這個範例是把時間抓到後放到 message 顯示在 title 內,滑鼠移過去停留一下會出現當前的時間。

See the Pen Vue ex2 by deathhell (@deathhell) on CodePen.




這邊是可以用 v-if 決定是否顯示內容。




使用 v-for 把陣列的東西一次顯示出來



使用 v-on:click 在按下按鈕時去讀取 reverseMessage 這個 function,執行把 message 字串前後顛倒的功能。



這邊是使用 v-model 的方式,讓資料可再輸入的時候同步改變 message


Read more

2018年8月1日 星期三

Related Posts Plugin for WordPress, Blogger...