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月23日 星期四

哥吉拉

去哥吉拉展買的小東西,可惜我最熟悉的平常時代的哥吉拉賣光了,所以只收了這幾隻。

紅蓮哥吉拉
P1190017P1190018P1190019P1190029P1190030P1190031


庵野秀明版真・哥吉拉
P1190020P1190021P1190022P1190032P1190033P1190034


Netflix 動畫電影版哥吉拉
P1190023P1190024P1190025P1190026P1190027P1190028
Read more

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
Related Posts Plugin for WordPress, Blogger...