栖無

20220110

我來分享顏文字了wwwwww

因為之前自己常用的網站莫名關掉，後來看到有其他部落客在痞客邦分享

整個就:

欸欸欸欸欸欸?!?!妳怎麼用的?!?!?!

為毛可以點一下文字然後就複製?!?!!?!

於是乎我那資管系的身分終於發揮了第二次功效:我去找網站程式碼!

(第一次是網課線上答題透過程式碼找到正確答案XD)(好孩子不要學XD)

在顏文字分享之後我會把怎樣以HTML程式碼的方式，新增到痞客邦文章中

有興趣的可以拉到最後w

氣噗噗

憤怒

(¬_¬)無言

哭哭

開心、大笑

可可愛愛

奇奇怪怪人

我問號

發呆

​​

舉手、甩手臂

跳舞

鼠翹翹

邪惡

興奮、奔跑

黑皮黑皮

動物類

熊熊

啾啾

咪喵

汪汪

齁齁

兔几

咩咩

這邊放上程式碼w

其實出乎意料的簡單，只需要從"原始碼"編輯，

然後放上這段程式碼(我是放在開頭)，反正意思就是呼叫了 data-clipboard-target 這個功能出來

<script src="https://hela.tw/clipboard.min.js"></script>

<script>new ClipboardJS("[data-clipboard-target]");</script>

再使用<input data-clipboard-target="#text101" id="text101" size="12" value="( ≧Д≦)" />

把他呼叫(套用)出來就可以了~

後面的"="、id像是給他一個編碼，讓程式知道要複製誰，

如果還是不是很清楚，可以玩個好玩的:

像我第一個 ( ≧Д≦) 表情符號編碼為text101，第二個（;≧皿≦）為text102，

如果把第一個的 data-clipboard-target="#text101"，改成 data-clipboard-target="#text102"

也就是說當點按第一個 ( ≧Д≦) 圖案的時候，他會去搜尋 id="#text102" 的物件，會看到選擇出的框框是跑到（;≧皿≦）身上~

data-clipboard-target 就是指: 會抓取的目標物件(將會複製物件的內容)

哎呀反正玩玩看就知道了XD

提供一組的程式碼，這樣就不用挨個打~

<script src="https://hela.tw/clipboard.min.js"></script>
<script>new ClipboardJS("[data-clipboard-target]");</script>

<p>
<span style="font-family:comic sans ms,cursive"><span style="font-size:18px">氣噗噗</span></span>
</p>

<p>
<input data-clipboard-target="#text102" id="text101" size="12" value="( ≧Д≦)" />
<input data-clipboard-target="#text102" id="text102" size="12" value="（;≧皿≦）" />
<input data-clipboard-target="#text103" id="text103" size="12" value="(⁎˃ᆺ˂)" />
<input data-clipboard-target="#text104" id="text104" size="12" value="(╬ Ò ‸ Ó)" />
<input data-clipboard-target="#text105" id="text105" size="12" value="&lt;(｀^´)&gt;" />
<input data-clipboard-target="#text106" id="text106" size="12" value="( &gt;д&lt;)" />
<input data-clipboard-target="#text107" id="text107" size="12" value="(ꐦ ಠ皿ಠ )" />
<input data-clipboard-target="#text108" id="text108" size="12" value="(｀Д´)" />
<input data-clipboard-target="#text109" id="text109" size="12" value="(;｀O´)o" />
<input data-clipboard-target="#text110" id="text110" size="12" value="o(-`д´- ｡)" />
<input data-clipboard-target="#text111" id="text111" size="12" value="( ͒˃⌂˂ ͒)" />
<input data-clipboard-target="#text112" id="text112" size="12" value="(°ㅂ° ╬)" />
<input data-clipboard-target="#text113" id="text113" size="12" value="(ʘ言ʘ╬)" />
</p>

再將上面的顏文字、標題換一下

醬就可以客製出自己專屬的顏文字庫啦~

(這是很難得的第二次覺得自己真的是資管系XDD)

參考資料: [十分鐘學習] clipboard.js - 複製/貼上

 ･*･:≡(　ε:)