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="( ≧Д≦)" />

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

0110-2-1.png

 

後面的"="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 - 複製/貼上

 

 

 

 

 

 

 


 

 ・*・:≡( ε:)

arrow
arrow

    栖無 發表在 痞客邦 留言(3) 人氣()