TP Notes: 7月 2020

2020年7月24日星期五

網頁可用的符號

既然發現原來這麼多圖示都只是字, 那麼就來寫個小程式把那些有趣的字都秀出來吧 !
另外，除了這些圖示之外，還有一個有趣的東西叫 **<font color="#0088ff">Emoji Skin Tones.</font>** , 參考網址 : https://www.w3schools.com/charsets/ref_emoji_skin_tones.asp
  
<pre style="border:1px solid #000"><span>&#</span>127999; 🏿 Dark skin tone
<span>&#</span>127998; 🏾 Medium Dark skin tone
<span>&#</span>127997; 🏽 Medium skin tone
<span>&#</span>127996; 🏼 Medium Light skin tone
<span>&#</span>127995; 🏻 Light skin tone
</pre>

除了 Emoji Skin Tones 之外, 還有很多特別的組合, 
  
參考網址 : http://www.get-emoji.com/
參考網址 : https://emojipedia.org/kiss-woman-woman/  
  
例如 :
  
<span>&#</span>x1F468;<span>&#</span>x200D;<span>&#</span>x1F469;<span>&#</span>x200D;<span>&#</span>x1F467;<span>&#</span>x200D;<span>&#</span>x1F466;

拆開是 : <font size="6m">👨 ‍ 👩 ‍ 👧 ‍ 👦</font>
  
合起來會出現 <font size="6m">👨‍👩‍👧‍👦</font>
  
<style>
.a07241_0
{
  font-size:3em;
}
</style>

<span>&#</span>128102;<span>&#</span>127998; 
<span class="a07241_0">👦🏾</span> 
Medium Dark skin tone<br>

<span>&#</span>128102;<span>&#</span>127997; 
<span class="a07241_0">👦🏽</span> 
Medium skin tone<br>

<span>&#</span>128102;<span>&#</span>127996;
<span class="a07241_0">👦🏼</span> 
Medium Light skin tone<br>

<span>&#</span>128102;<span>&#</span>127995;
<span class="a07241_0">👦🏻</span> 
Light skin tone<br>

</div><br>
  
<style>
#a07241_1 button
{
  font-size:1.3em;
  width:5em;
  margin:2px;
}
#a07241_2
{
  font-size:2em;
/*  
  font-family:"Noto Sans TC";
*/  
}
.a07241_3
{
  display:inline-block;
}
</style>
<div id="a07241_1">
🤍
🪤
</div><br>

for (i in r)
  {
    hh+="<button>"+i+"</button> ";
  }
  $("#a07241_1").html(hh);

function run(b,e)
  {
    hh="";
    for (i=b;i<e;i++)
    {
//    if ((i%50)==0) hh+=" "+i+" ";
      hh+="<div class='a07241_3'>";
      hh+="&#"+i+"; ";
      hh+="</div>";
    }

$("#a07241_2").html(hh);
  }
  function run1(b,e)
  {
    let j;

hh="";
    for (i=b;i<=0xddff;i++)
    {
      for (j=e;j<=0xddff;j++)
      {
        let h1=String.fromCharCode(0xd83c,i,0xd83c,j);
        hh+=h1+" ";
      }
    }
    $("#a07241_2").html(hh);
  }

$("#a07241_1 button").on("click",function()
  {
    let n=parseInt($(this).html());
    if (n<10)
    {
      run(r[n][0],r[n][1]);
    }
    else
    {
      run1(r[n][0],r[n][1]);
    }
  });

run(r[9][0],r[9][1]);

})()
</script>

2020年7月23日星期四

網頁可用的符號資源收集

無意間看到這幾個網站，很驚訝原來系統中本來就有這些**<font color=#f00 style="font-size:1.3em">字</font>**了
  
網站 1 : https://www.copypastecharacter.com/emojis
  
網站 2 : https://tw.piliapp.com/symbol/
  
網站 3 : https://www.toptal.com/designers/htmlarrows/currency/

以下轉貼自[網站1](https://www.copypastecharacter.com/emojis)  
  
<div style="font-size:2em">
🎳 🏂 🌁 🌉 🌋 🌌 🌏 🌑 🌓 🌔 🌕 🌛 🌠 🌰 🍏 🌱 🌼 🌽 🌿 🍄 🍇 🍈 🍌 🍍 🍑 🍒 🍩 🍕 🍖 🍗 🍠 🍤 🍥 🍨 🍪 🍫 🍬 🍭 🍮 🍯 🍷 🍹 🎊 🎋 🎠 🎣 🎭 🎮 🎲 🎴 🎹 🎻 🎼 🎽 🏡 🏮 🐌 🐜 🐝 🐞 🐡 🐢 🐣 🐥 🐩 🐼 🐽 🐾 👅 👓 👖 👚 👛 👝 👤 👪 👰 👹 👺 💌 💕 💖 💞 💠 💥 💧 💫 💬 💮 💯 💲 💳 💴 💵 💸 💾 📁 📂 📃 📄 📅 📆 📇 📈 📉 📊 📋 📌 📍 📎 📏 📐 📑 📒 📓 📔 📕 📙 📚 📛 📜 📞 📟 📤 📥 📦 📧 📨 📪 📰 📹 🔃 🔋 🔌 🔎 🔏 🔐 🔖 🔗 🔘 🔙 🔚 🔛 🔜 🔟 🔠 🔡 🔢 🔣 🔤 🔦 🔧 🔩 🔪 🔮 🔵 🔶 🔷 🔸 🔹 🔼 🔽 😄 😊 😃 😉 😍 😘 😚 😳 😌 😁 😜 😝 😒 😏 😓 😔 😞 😱 😠 😡 😪 😷 👿 👽 💛 💙 💜 💗 💚 💔 💓 💘 🌟 💢 💤 💨 💦 🎶 🎵 🔥 💩 👍 👎 👌 👊 👋 👐 👆 👇 👉 👈 🙌 🙏 👏 💪 🚶 🏃 👫 💃 👯 🙆 🙅 💁 🙇 💏 💑 💆 💇 💅 👦 👧 👩 👨 👶 👵 👴 👱 👲 👳 👷 👮 👼 👸 💂 💀 👣 💋 👄 👂 👀 👃 ⛄ 🌙 🌀 🌊 🐱 🐶 🐭 🐹 🐰 🐺 🐸 🐯 🐨 🐻 🐷 🐮 🐗 🐵 🐒 🐴 🐎 🐫 🐑 🐘 🐍 🐦 🐤 🐔 🐧 🐛 🐙 🐠 🐟 🐳 🐬 💐 🌸 🌹 🌻 🌺 🍁 🍃 🍂 🌴 🌵 🌾 🐚 🎍 💝 🎎 🎒 🎓 🎏 🎆 🎇 🎐 🎑 🎃 👻 🎅 🎄 🎁 🔔 🎉 🎈 💿 📀 📷 🎥 💻 📺 📱 📠 💽 📼 🔊 📢 📣 📻 📡 🔍 🔓 🔒 🔑 🔨 💡 📲 📩 📫 📮 🛀 🚽 💺 💰 🔱 🚬 💣 🔫 💊 💉 🏈 🏀 ⚽ ⚾ 🎾 ⛳ 🎱 🏊 🏄 🎿 🏆 👾 🎷 🎸 👟 👡 👠 👢 👕 👔 👜 💄 💍 💎 🍵 🍺 🍻 🍸 🍶 🍴 🍔 🍟 🍝 🍛 🍱 🍣 🍙 🍘 🍚 🍜 🍲 🍞 🍳 🍢 🍡 🍦 🍧 🎂 🍰 🍎 🍊 🍉 🍓 🍆 🍅 🏠 🏫 🏢 🏣 🏥 🏦 🏪 🏩 🏨 💒 ⛪ 🏬 🌇 🌆 🏯 🏰 ⛺ 🏭 🗼 🗻 🌄 🌅 🌃 🗽 🌈 🎡 ⛲ 🎢 🚢 🚤 ⛵ 🚀 🚲 🚙 🚗 🚕 🚌 🚓 🚒 🚑 🚚 🚃 🚉 🚄 🚅 🎫 ⛽ 🚥 🚧 🔰 🏧 🎰 🚏 💈 🏁 🎌 🎯 🀄 🎬 📝 📖 🎨 🎤 🎧 🎺 👗 👘 👙 🎀 🎩 👑 👒 🌂 💼  
  
</div>

以下轉貼自[網站2](https://tw.piliapp.com/symbol/)    
  
<div style="font-size:2em">
𓀞 𓀟 𓀠 𓀡 𓀢 𓀣 𓀤 𓀥 𓀦 𓀧 𓀨 𓀩 𓀪 𓀫 𓀬 𓀀 𓀁 𓀂 𓀃 𓀄 𓀅 𓀆 𓀇 𓀈 𓀉 𓀊 𓀋 𓀌 𓀍 𓀎 𓀏 𓀐 𓀑 𓀒 𓀓 𓀔 𓀕 𓀖 𓀗 𓀘 𓀙 𓀚 𓀛 𓀜 𓀝 𓁁 𓁂 𓁃 𓁄 𓁅
𓁆 𓁇 𓁈 𓁉 𓁊 𓁋 𓁌 𓁍 𓁎 𓁏 𓁐 𓁑 𓁒 𓁓 𓁔 𓁕 𓁖 𓁗 𓁘 𓁙
𓀭 𓀮 𓀯 𓀰 𓀱 𓀲 𓀳 𓀴 𓀵 𓀶 𓀷 𓀸 𓀹 𓀺 𓀻 𓀼 𓀽 𓀾 𓀿 𓁀 𓁲 𓁚 𓁛 𓁜 𓁝 𓁞 𓁟 𓁠 𓁡 𓁢 𓁣 𓁤 𓁥 𓁦 𓁧 𓁨 𓁩 𓁪 𓁫 𓁬 𓁭 𓁮 𓁯 𓁰 𓁱 𓁳 𓁴 𓁵  
<br><br>  
𓃥 𓃠 𓃰 𓃱 𓃯 𓃭 𓃸 𓃵 𓃗 𓃘 𓃙 𓃟 𓄀 𓄁 𓄂 𓄃 𓃚 𓃛 𓃜 𓃝 𓃞 𓃒 𓃓 𓃔 𓃕 𓃖 𓃡 𓃢 𓃦 𓃩 𓃫 𓃬 𓃮 𓃲 𓃴 𓃶 𓃷 𓃹 𓃻 𓃽 𓃾 𓃿 𓄄 𓄅 𓄆 𓄇
𓆇 𓆈 𓆉 𓆌 𓆏 𓆗 𓆘 𓆙 𓆚 𓆐 𓆑 𓆒 𓆓 𓆔 𓆕 𓆖 𓆊 𓆍
𓆣 𓆤 𓆥 𓆦 𓆧 𓆨 𓆛 𓆜 𓆝 𓆞 𓆟 𓆠 𓆡 𓆢
𓄿 𓅀 𓅁 𓅂 𓅃 𓅄 𓅅 𓅆 𓅇 𓅈 𓅉 𓅊 𓅋 𓅌 𓅍 𓅎 𓅏 𓅐 𓅑 𓅒 𓅓 𓅔 𓅕 𓅖 𓅗 𓅘 𓅙 𓅚 𓅛 𓅜 𓅝 𓅞 𓅟 𓅠 𓅡 𓅢 𓅣 𓅤 𓅥 𓅦 𓅧 𓅨 𓅩 𓅪 𓅫 𓅬 𓅭 𓅮 𓅯 𓅰 𓅱 𓅲 𓅳 𓅴 𓅵 𓅶 𓅷 𓅸 𓅹 𓅺 𓅻 𓅼 𓅽 𓅾 𓅿 𓆀 𓆁 𓆂 𓆃 𓆆  
<br><br>
😀 😃 😄 😁 😆 😅 😂 🤣 😇 😉 😊 🙂 🙃 ☺ 😋 😌 😍 🥰 😘 😗 😙 😚 🤪 😜 😝 😛 🤑 😎 🤓 🧐 🤠 🥳 🤗 🤡 😏 😶 😐 😑 😒 🙄 🤨 🤔 🤫 🤭 🤥 😳 😞 😟 😠 😡 🤬 😔 😕 🙁 ☹ 😬 🥺 😣 😖 😫 😩 🥱 😤 😮 😱 😨 😰 😯 😦 😧 😢 😥 😪 🤤 😓 😭 🤩 😵 🥴 😲 🤯 🤐 😷 🤕 🤒 🤮 🤢 🤧 🥵 🥶 😴 💤 😈 👿 👹 👺 💩 👻 💀 ☠ 👽 🤖 🎃 😺 😸 😹 😻 😼 😽 🙀 😿 😾 👐 🤲 🙌 👏 🙏 🤝 👍 👎 👊 ✊ 🤛 🤜 🤞 ✌ 🤘 🤟 👌 🤏 👈 👉 👆 👇 ☝ ✋ 🤚 🖐 🖖 👋 🤙 💪 🦾 🖕 ✍ 🤳 💅 🦵 🦿 🦶 👄 🦷 👅 👂 🦻 👃 👁 👀 🧠 🦴 👤 👥 🗣 👶 👧 🧒 👦 👩 🧑 👨 👩‍🦱 🧑‍🦱 👨‍🦱 👩‍🦰 🧑‍🦰 👨‍🦰 👱‍♀️ 👱 👱‍♂️ 👩‍🦳 🧑‍🦳 👨‍🦳 👩‍🦲 🧑‍🦲 👨‍🦲 🧔 👵 🧓 👴 👲 👳‍♀️ 👳 👳‍♂️ 🧕 👼 👸 🤴 👰 🤵‍♀️ 🤵 🤵‍♂️ 🙇‍♀️ 🙇 🙇‍♂️ 💁‍♀️ 💁 💁‍♂️ 🙅‍♀️ 🙅 🙅‍♂️ 🙆‍♀️ 🙆 🙆‍♂️ 🤷‍♀️ 🤷 🤷‍♂️ 🙋‍♀️ 🙋 🙋‍♂️ 🤦‍♀️ 🤦 🤦‍♂️ 🧏‍♀️ 🧏 🧏‍♂️ 🙎‍♀️ 🙎 🙎‍♂️ 🙍‍♀️ 🙍 🙍‍♂️ 💇‍♀️ 💇 💇‍♂️ 💆‍♀️ 💆 💆‍♂️ 🤰 🤱 🧎‍♀️ 🧎 🧎‍♂️ 🧍‍♀️ 🧍 🧍‍♂️ 🚶‍♀️ 🚶 🚶‍♂️ 👩‍🦯 🧑‍🦯 👨‍🦯 🏃‍♀️ 🏃 🏃‍♂️ 👩‍🦼 🧑‍🦼 👨‍🦼 👩‍🦽 🧑‍🦽 👨‍🦽 💃 🕺 👫 👭 👬 🧑‍🤝‍🧑 👩‍❤️‍👨 👩‍❤️‍👩 💑 👨‍❤️‍👨 👩‍❤️‍💋‍👨 👩‍❤️‍💋‍👩 💏 👨‍❤️‍💋‍👨 ❤ 🧡 💛 💚 💙 💜 🤎 🖤 🤍 💔 ❣ 💕 💞 💓 💗 💖 💘 💝 💟  
<br><br>  
🐶 🐱 🐭 🐹 🐰 🐻 🧸 🐼 🐨 🐯 🦁 🐮 🐷 🐽 🐸 🐵 🙈 🙉 🙊 🐒 🦍 🦧 🐔 🐧 🐦 🐤 🐣 🐥 🐺 🦊 🦝 🐗 🐴 🦓 🦒 🦌 🦘 🦥 🦦 🦄 🐝 🐛 🦋 🐌 🐞 🐜 🦗 🕷 🕸 🦂 🦟 🦠 🐢 🐍 🦎 🐙 🦑 🦞 🦀 🦐 🦪 🐠 🐟 🐡 🐬 🦈 🐳 🐋 🐊 🐆 🐅 🐃 🐂 🐄 🐪 🐫 🦙 🐘 🦏 🦛 🐐 🐏 🐑 🐎 🐖 🦇 🐓 🦃 🕊 🦅 🦆 🦢 🦉 🦩 🦚 🦜 🐕 🦮 🐕‍🦺 🐩 🐈 🐇 🐀 🐁 🐿 🦨 🦡 🦔 🐾 🐉 🐲 🦕 🦖 🌵 🎄 🌲 🌳 🌴 🌱 🌿 ☘ 🍀 🎍 🎋 🍃 🍂 🍁 🌾 🌺 🌻 🌹 🥀 🌷 🌼 🌸 💐 🍄 🌰 🐚 🌎 🌍 🌏 🌕 🌖 🌗 🌘 🌑 🌒 🌓 🌔 🌙 🌚 🌝 🌛 🌜 ⭐ 🌟 💫 ✨ ☄ 🪐 🌞 ☀ 🌤 ⛅ 🌥 🌦 ☁ 🌧 ⛈ 🌩 ⚡ 🔥 💥 ❄ 🌨 ☃ ⛄ 🌬 💨 🌪 🌫 🌈 ☔ 💧 💦 🌊  
<br><br>
🍏 🍎 🍐 🍊 🍋 🍌 🍉 🍇 🍓 🍈 🍒 🍑 🥭 🍍 🥥 🥝 🍅 🥑 🍆 🌶 🥒 🥬 🥦 🧄 🧅 🌽 🥕 🥗 🥔 🍠 🥜 🍯 🍞 🥐 🥖 🥨 🥯 🥞 🧇 🧀 🍗 🍖 🥩 🍤 🥚 🍳 🥓 🍔 🍟 🌭 🍕 🍝 🥪 🌮 🌯 🥙 🧆 🍜 🥘 🍲 🥫 🧂 🧈 🍥 🍣 🍱 🍛 🍙 🍚 🍘 🥟 🍢 🍡 🍧 🍨 🍦 🍰 🎂 🧁 🥧 🍮 🍭 🍬 🍫 🍿 🍩 🍪 🥠 🥮 ☕ 🍵 🥣 🍼 🥤 🧃 🧉 🥛 🍺 🍻 🍷 🥂 🥃 🍸 🍹 🍾 🍶 🧊 🥄 🍴 🍽 🥢 🥡  
<br><br>  
⚽ 🏀 🏈 ⚾ 🥎 🎾 🏐 🏉 🎱 🥏 🏓 🏸 🥅 🏒 🏑 🏏 🥍 🥌 ⛳ 🏹 🎣 🤿 🥊 🥋 ⛸ 🎿 🛷 ⛷ 🏂 🏋️‍♀️ 🏋 🏋️‍♂️ 🤺 🤼‍♀️ 🤼 🤼‍♂️ 🤸‍♀️ 🤸 🤸‍♂️ ⛹️‍♀️ ⛹ ⛹️‍♂️ 🤾‍♀️ 🤾 🤾‍♂️ 🧗‍♀️ 🧗 🧗‍♂️ 🏌️‍♀️ 🏌 🏌️‍♂️ 🧘‍♀️ 🧘 🧘‍♂️ 🧖‍♀️ 🧖 🧖‍♂️ 🏄‍♀️ 🏄 🏄‍♂️ 🏊‍♀️ 🏊 🏊‍♂️ 🤽‍♀️ 🤽 🤽‍♂️ 🚣‍♀️ 🚣 🚣‍♂️ 🏇 🚴‍♀️ 🚴 🚴‍♂️ 🚵‍♀️ 🚵 🚵‍♂️ 🎽 🎖 🏅 🥇 🥈 🥉 🏆 🏵 🎗 🎫 🎟 🎪 🤹‍♀️ 🤹 🤹‍♂️ 🎭 🎨 🎬 🎤 🎧 🎼 🎹 🥁 🎷 🎺 🎸 🪕 🎻 🎲 🧩 ♟ 🎯 🎳 🪀 🪁 🎮 👾 🎰 👮‍♀️ 👮 👮‍♂️ 👩‍🚒 🧑‍🚒 👨‍🚒 👷‍♀️ 👷 👷‍♂️ 👩‍🏭 🧑‍🏭 👨‍🏭 👩‍🔧 🧑‍🔧 👨‍🔧 👩‍🌾 🧑‍🌾 👨‍🌾 👩‍🍳 🧑‍🍳 👨‍🍳 👩‍🎤 🧑‍🎤 👨‍🎤 👩‍🎨 🧑‍🎨 👨‍🎨 👩‍🏫 🧑‍🏫 👨‍🏫 👩‍🎓 🧑‍🎓 👨‍🎓 👩‍💼 🧑‍💼 👨‍💼 👩‍💻 🧑‍💻 👨‍💻 👩‍🔬 🧑‍🔬 👨‍🔬 👩‍🚀 🧑‍🚀 👨‍🚀 👩‍⚕️ 🧑‍⚕️ 👨‍⚕️ 👩‍⚖️ 🧑‍⚖️ 👨‍⚖️ 👩‍✈️ 🧑‍✈️ 👨‍✈️ 💂‍♀️ 💂 💂‍♂️ 🕵️‍♀️ 🕵 🕵️‍♂️ 🤶 🎅 🕴️‍♀️ 🕴 🕴️‍♂️ 🦸‍♀️ 🦸 🦸‍♂️ 🦹‍♀️ 🦹 🦹‍♂️ 🧙‍♀️ 🧙 🧙‍♂️ 🧝‍♀️ 🧝 🧝‍♂️ 🧚‍♀️ 🧚 🧚‍♂️ 🧞‍♀️ 🧞 🧞‍♂️ 🧜‍♀️ 🧜 🧜‍♂️ 🧛‍♀️ 🧛 🧛‍♂️ 🧟‍♀️ 🧟 🧟‍♂️ 👯‍♀️ 👯 👯‍♂️ 👪 👨‍👩‍👧 👨‍👩‍👧‍👦 👨‍👩‍👦‍👦 👨‍👩‍👧‍👧 👩‍👩‍👦 👩‍👩‍👧 👩‍👩‍👧‍👦 👩‍👩‍👦‍👦 👩‍👩‍👧‍👧 👨‍👨‍👦 👨‍👨‍👧 👨‍👨‍👧‍👦 👨‍👨‍👦‍👦 👨‍👨‍👧‍👧 👩‍👦 👩‍👧 👩‍👧‍👦 👩‍👦‍👦 👩‍👧‍👧 👨‍👦 👨‍👧 👨‍👧‍👦 👨‍👦‍👦 👨‍👧‍👧  
<br><br>
🚗 🚙 🚕 🛺 🚌 🚎 🏎 🚓 🚑 🚒 🚐 🚚 🚛 🚜 🏍 🛵 🚲 🦼 🦽 🛴 🛹 🚨 🚔 🚍 🚘 🚖 🚡 🚠 🚟 🚃 🚋 🚝 🚄 🚅 🚈 🚞 🚂 🚆 🚇 🚊 🚉 🚁 🛩 ✈ 🛫 🛬 🪂 💺 🛰 🚀 🛸 🛶 ⛵ 🛥 🚤 ⛴ 🛳 🚢 ⚓ ⛽ 🚧 🚏 🚦 🚥 🛑 🎡 🎢 🎠 🏗 🌁 🗼 🏭 ⛲ 🎑 ⛰ 🏔 🗻 🌋 🗾 🏕 ⛺ 🏞 🛣 🛤 🌅 🌄 🏜 🏖 🏝 🌇 🌆 🏙 🌃 🌉 🌌 🌠 🎇 🎆 🏘 🏰 🏯 🏟 🗽 🏠 🏡 🏚 🏢 🏬 🏣 🏤 🏥 🏦 🏨 🏪 🏫 🏩 💒 🏛 ⛪ 🕌 🛕 🕍 🕋 ⛩  
<br><br>
⌚ 📱 📲 💻 ⌨ 🖥 🖨 🖱 🖲 🕹 🗜 💽 💾 💿 📀 📼 📷 📸 📹 🎥 📽 🎞 📞 ☎ 📟 📠 📺 📻 🎙 🎚 🎛 ⏱ ⏲ ⏰ 🕰 ⏳ ⌛ 🧮 📡 🔋 🔌 💡 🔦 🕯 🧯 🗑 🛢 🛒 💸 💵 💴 💶 💷 💰 💳 🧾 💎 ⚖ 🦯 🧰 🔧 🔨 ⚒ 🛠 ⛏ 🪓 🔩 ⚙ ⛓ 🧱 🔫 🧨 💣 🔪 🗡 ⚔ 🛡 🚬 ⚰ ⚱ 🏺 🔮 📿 🧿 💈 🧲 ⚗ 🧪 🧫 🧬 🔭 🔬 🕳 💊 💉 🩸 🩹 🩺 🌡 🏷 🔖 🚽 🚿 🛁 🛀 🪒 🧴 🧻 🧼 🧽 🧹 🧺 🔑 🗝 🛋 🪑 🛌 🛏 🚪 🧳 🛎 🖼 🧭 🗺 ⛱ 🗿 🛍 🎈 🎏 🎀 🧧 🎁 🎊 🎉 🎎 🎐 🏮 🪔 ✉ 📩 📨 📧 💌 📮 📪 📫 📬 📭 📦 📯 📥 📤 📜 📃 📑 📊 📈 📉 📄 📅 📆 🗓 📇 🗃 🗳 🗄 📋 🗒 📁 📂 🗂 🗞 📰 📓 📕 📗 📘 📙 📔 📒 📚 📖 🔗 📎 🖇 ✂ 📐 📏 📌 📍 🧷 🧵 🧶 🔐 🔒 🔓 🔏 🖊 🖋 ✒ 📝 ✏ 🖍 🖌 🔍 🔎 👚 👕 🥼 🦺 🧥 👖 👔 👗 👘 🥻 🩱 👙 🩲 🩳 💄 💋 👣 🧦 👠 👡 👢 🥿 👞 👟 🩰 🥾 🧢 👒 🎩 🎓 👑 ⛑ 🎒 👝 👛 👜 💼 👓 🕶 🥽 🧣 🧤 💍 🌂 ☂  
<br><br>  
☮ ✝ ☪ 🕉 ☸ ✡ 🔯 🕎 ☯ ☦ 🛐 ⛎ ♈ ♉ ♊ ♋ ♌ ♍ ♎ ♏ ♐ ♑ ♒ ♓ 🆔 ⚛ ⚕ ☢ ☣ 📴 📳 🈶 🈚 🈸 🈺 🈷 ✴ 🆚 🉑 💮 🉐 ㊙ ㊗ 🈴 🈵 🈹 🈲 🅰 🅱 🆎 🆑 🅾 🆘 ⛔ 📛 🚫 ❌ ⭕ 💢 ♨ 🚷 🚯 🚳 🚱 🔞 📵 🚭 ❗ ❕ ❓ ❔ ‼ ⁉ 💯 🔅 🔆 🔱 ⚜ 〽 ⚠ 🚸 🔰 ♻ 🈯 💹 ❇ ✳ ❎ ✅ 💠 🌀 ➿ 🌐 ♾ Ⓜ 🏧 🚾 ♿ 🅿 🈳 🈂 🛂 🛃 🛄 🛅 🚰 🚹 ♂ 🚺 ♀ ⚧ 🚼 🚻 🚮 🎦 📶 🈁 🆖 🆗 🆙 🆒 🆕 🆓 0⃣ 1⃣ 2⃣ 3⃣ 4⃣ 5⃣ 6⃣ 7⃣ 8⃣ 9⃣ 🔟 🔢 ▶ ⏸ ⏯ ⏹ ⏺ ⏏ ⏭ ⏮ ⏩ ⏪ 🔀 🔁 🔂 ◀ 🔼 🔽 ⏫ ⏬ ➡ ⬅ ⬆ ⬇ ↗ ↘ ↙ ↖ ↕ ↔ 🔄 ↪ ↩ 🔃 ⤴ ⤵ #⃣ *⃣ ℹ 🔤 🔡 🔠 🔣 🎵 🎶 〰 ➰ ✔ ➕ ➖ ➗ ✖ 💲 💱 © ® ™ 🔚 🔙 🔛 🔝 🔜 ☑ 🔘 🔴 🟠 🟡 🟢 🔵 🟣 🟤 ⚫ ⚪ 🟥 🟧 🟨 🟩 🟦 🟪 🟫 ⬛ ⬜ ◼ ◻ ◾ ◽ ▪ ▫ 🔸 🔹 🔶 🔷 🔺 🔻 🔲 🔳 🔈 🔉 🔊 🔇 📣 📢 🔔 🔕 🃏 🀄 ♠ ♣ ♥ ♦ 🎴 👁‍🗨 🗨 💭 🗯 💬 🕐 🕑 🕒 🕓 🕔 🕕 🕖 🕗 🕘 🕙 🕚 🕛 🕜 🕝 🕞 🕟 🕠 🕡 🕢 🕣 🕤 🕥 🕦 🕧  
<br><br>
🏳 🏴 🏁 🚩 🎌 🏴‍☠️ 🏳️‍🌈 🏳️‍⚧️ 🇦🇨 🇦🇩 🇦🇪 🇦🇫 🇦🇬 🇦🇮 🇦🇱 🇦🇲 🇦🇴 🇦🇶 🇦🇷 🇦🇸 🇦🇹 🇦🇺 🇦🇼 🇦🇽 🇦🇿 🇧🇦 🇧🇧 🇧🇩 🇧🇪 🇧🇫 🇧🇬 🇧🇭 🇧🇮 🇧🇯 🇧🇱 🇧🇲 🇧🇳 🇧🇴 🇧🇶 🇧🇷 🇧🇸 🇧🇹 🇧🇼 🇧🇾 🇧🇿 🇨🇦 🇨🇨 🇨🇩 🇨🇫 🇨🇬 🇨🇭 🇨🇮 🇨🇰 🇨🇱 🇨🇲 🇨🇳 🇨🇴 🇨🇷 🇨🇺 🇨🇻 🇨🇼 🇨🇽 🇨🇾 🇨🇿 🇩🇪 🇩🇯 🇩🇰 🇩🇲 🇩🇴 🇩🇿 🇪🇨 🏴󠁧󠁢󠁥󠁮󠁧󠁿 🇪🇪 🇪🇬 🇪🇭 🇪🇷 🇪🇸 🇪🇹 🇪🇺 🇫🇮 🇫🇯 🇫🇰 🇫🇲 🇫🇴 🇫🇷 🇬🇦 🇬🇧 🇬🇩 🇬🇪 🇬🇫 🇬🇬 🇬🇭 🇬🇮 🇬🇱 🇬🇲 🇬🇳 🇬🇵 🇬🇶 🇬🇷 🇬🇸 🇬🇹 🇬🇺 🇬🇼 🇬🇾 🇭🇰 🇭🇳 🇭🇷 🇭🇹 🇭🇺 🇮🇨 🇮🇩 🇮🇪 🇮🇱 🇮🇲 🇮🇳 🇮🇴 🇮🇶 🇮🇷 🇮🇸 🇮🇹 🇯🇪 🇯🇲 🇯🇴 🇯🇵 🇰🇪 🇰🇬 🇰🇭 🇰🇮 🇰🇲 🇰🇳 🇰🇵 🇰🇷 🇰🇼 🇰🇾 🇰🇿 🇱🇦 🇱🇧 🇱🇨 🇱🇮 🇱🇰 🇱🇷 🇱🇸 🇱🇹 🇱🇺 🇱🇻 🇱🇾 🇲🇦 🇲🇨 🇲🇩 🇲🇪 🇲🇬 🇲🇭 🇲🇰 🇲🇱 🇲🇲 🇲🇳 🇲🇴 🇲🇵 🇲🇶 🇲🇷 🇲🇸 🇲🇹 🇲🇺 🇲🇻 🇲🇼 🇲🇽 🇲🇾 🇲🇿 🇳🇦 🇳🇨 🇳🇪 🇳🇫 🇳🇬 🇳🇮 🇳🇱 🇳🇴 🇳🇵 🇳🇷 🇳🇺 🇳🇿 🇴🇲 🇵🇦 🇵🇪 🇵🇫 🇵🇬 🇵🇭 🇵🇰 🇵🇱 🇵🇲 🇵🇳 🇵🇷 🇵🇸 🇵🇹 🇵🇼 🇵🇾 🇶🇦 🇷🇪 🇷🇴 🇷🇸 🇷🇺 🇷🇼 🇸🇦 🏴󠁧󠁢󠁳󠁣󠁴󠁿 🇸🇧 🇸🇨 🇸🇩 🇸🇪 🇸🇬 🇸🇭 🇸🇮 🇸🇰 🇸🇱 🇸🇲 🇸🇳 🇸🇴 🇸🇷 🇸🇸 🇸🇹 🇸🇻 🇸🇽 🇸🇾 🇸🇿 🇹🇦 🇹🇨 🇹🇩 🇹🇫 🇹🇬 🇹🇭 🇹🇯 🇹🇰 🇹🇱 🇹🇲 🇹🇳 🇹🇴 🇹🇷 🇹🇹 🇹🇻 🇹🇼 🇹🇿 🇺🇦 🇺🇬 🇺🇳 🇺🇸 🇺🇾 🇺🇿 🇻🇦 🇻🇨 🇻🇪 🇻🇬 🇻🇮 🇻🇳 🇻🇺 🏴󠁧󠁢󠁷󠁬󠁳󠁿 🇼🇫 🇼🇸 🇽🇰 🇾🇪 🇾🇹 🇿🇦 🇿🇲 🇿🇼  
</div>

2020年7月22日星期三

css 使用變數

css 可以使用一些 function , 例如 calc 可以計算，還有一個比較少用的 var 這個變數的 function 
  
規則 : 
    
1. 變數前面要加 **"<font color='#f00'>--</font>"**
2. var 內容別放空格

範例如下:

```
$mmcode(r1)
```
  
<div class="mmresult r1">

--aa:repeating-linear-gradient(90deg, var(--color1),var(--color1) 0.1em,#0000 0.1em,#0000 1em) 0em 0em;

--bb:repeating-linear-gradient(90deg, var(--color1),var(--color1) 0.05em,#0000 0.05em,#0000 1em) 0.525em 0.5em/auto 1em;

--cc:repeating-linear-gradient(90deg, var(--color1),var(--color1) 0.02em,#0000 0.02em,#0000 0.1em) 0.04em 0.7em/auto 1em;

}

.a07221_c1
{
  width:6.1em;
  height:1em;
  background: var(--aa),var(--bb),var(--cc); 
  background-repeat:no-repeat;
  font-size:3em;
}
</style>

</div>
  
var 也可以搭配 calc 做計算 , 這樣可以把很多參數設為變數, 如果要修改，不需要一個一個改了

```
$mmcode(r2)
```
  
<div class="mmresult r2">

</div>

2020年7月17日星期五

background

網頁上要秀一張圖，第一個想到的是 `<img src=xxx>` 這個方式，後來才發現有個更好用的，叫做 background-image , 雖然知道有些特別的用法，卻一直沒有去深入瞭解, 所以在這做個小筆記!

```
$mmcode(r1)
```

<div class="mmresult r1">
<style>
/*
   background 可以設定很多張圖片，只需用逗號分隔, 
   上下層是由上而下，第一個圖片會在最上方
*/
.a07171_aa
{
  width:20em;
  height:10em;
  background-color: #ff0;
  background-image: url(https://yiharng.github.io/bomb.png)
                   ,url(https://yiharng.github.io/bird.jpg);
  background-position: 0em 0em,2em 0em;
  background-size: 5em 5em,16em 10em;
  background-repeat: repeat, no-repeat;
}
/*
   可以用下面這個方式合併來寫
*/
.a07171_bb
{
  width:20em;
  height:10em;
  background:url(https://yiharng.github.io/bomb.png) 0em 0em/5em 5em repeat
      , #ff0 url(https://yiharng.github.io/bird.jpg) 2em 0em/16em 10em no-repeat;
  
  /*
      注意那個 #ff0 背景顏色設定，必須在最後一個才能設定
  */
}
</style>

背景圖片不一定要用圖片，也可以用 repeating-linear-gradient 和 repeating-radial-gradient 來產生線性漸層或圓形漸層的背景, 如果再控制好大小和座標，基本上可以用來畫圖了
  
```
$mmcode(r2)
```
  
<div class="mmresult r2">
<style>
.a07172_c1
{
  width:20em;
  height:10em;
  background-image: 
    repeating-linear-gradient(0deg, 
      #00000088,#00000055 1em, 
      transparent 1em,transparent 3em)
    ,repeating-linear-gradient(90deg, 
      #00000088,#00000055 1em, 
      transparent 1em,transparent 3em)
    ,repeating-radial-gradient(
      #f00, #ff0 10%, #0f0 15%,#f00 20%);
  background-position:0em 0em,0em 0em,10em 1em;
  background-size:auto auto,auto auto,5em 5em;
  background-repeat:no-repeat;
}
</style>

<div class="a07172_c1">
</div>
</div>
  
repeating-linear-gradient 很好玩的地方就是, 他自帶 repeat 功能，可以很容易實現尺規的繪製

```
$mmcode(r3)
```
  
<div class="mmresult r3">
<style>
.a07173_c1
{
  width:6.1em;
  height:1em;
  background: 
    repeating-linear-gradient(90deg, #000,#000 0.1em,#0000 0.1em,#0000 1em) 0em 0em,
    repeating-linear-gradient(90deg, #000,#000 0.05em,#0000 0.05em,#0000 1em) 0.525em 0.5em/auto 1em,
    repeating-linear-gradient(90deg, #000,#000 0.02em,#0000 0.02em,#0000 0.1em) 0.04em 0.7em/auto 1em
    ;
  background-repeat:no-repeat;
  font-size:3em;
}
</style>

repeating-radial-gradient 可以用來畫圓，加上 ::before 及 ::after 用邊框來畫三角形，就可以畫出之前靠邊框做不到的箭頭  
  
```
$mmcode(r4)
```
  
<div class="mmresult r4">
<style>
.a07174_c1
{
  width:10em;
  height:10em;
  background: 
    repeating-linear-gradient(0deg, #0000,#0000 40%,#fff 40%,#fff 60%) 0em 0em,
    repeating-radial-gradient(#0000, #0000 40%, #0bb 0%, #0bb 60%) 0em 0em;
  background-repeat:no-repeat;
  background-color:#fff;
  position:relative;
  border-radius:100em;
  animation:a07174_a1 3s 0s linear infinite;
}
.a07174_c1::before
{
  content:"";
  position:absolute;
  width:0;
  height:0;
  border:#000 solid 1.3em;
  border-color:#0000 #0bb #0bb #0000;
  left:68%;
  top:20%;
  transform:rotate(30deg);
}
.a07174_c1::after
{
  content:"";
  position:absolute;
  width:0;
  height:0;
  border:#000 solid 1.3em;
  border-color:#0bb #0000 #0000 #0bb;
  left:6%;
  top:53%;
  transform:rotate(30deg);
}
@keyframes a07174_a1
{
  100%
  {
    transform:rotate(360deg);
  }
}
</style>

<div class="a07174_c1">
</div>
</div>
  
repeating-radial-gradient 的詳細說明

參考網址：https://www.runoob.com/cssref/func-repeating-radial-gradient.html
  
repeating-radial-gradient(shape size at position, start-color, ..., last-color);

shape : ellipse (預設), circle <br>
size  : farthest-corner (預設), closest-side, closest-corner, farthest-side
  
可以利用這個來晝半圓
  
```
$mmcode(r5)
```
  
<div class="mmresult r5">
<style>
.a07175_c1
{
  width:10em;
  height:10em;
  background: 
/*
    完整寫法 :
    repeating-radial-gradient(ellipse farthest-corner at 50% 100%
*/      
    repeating-radial-gradient(at 50% 100%
      , #0000
      , #0000 40%
      , #a0f  40%
      , #0ff  48%
      , #0f0  50%
      , #ff0  52%
      , #f00  60%
    ) 0em 0em/10em 5em;
  background-repeat:no-repeat;
  background-color:#9ff;
}
</style>

<div class="a07175_c1">
</div>
</div>
  
-----------------------------------------------------

# background-attachment

scroll - 預設, 就是像牆壁的背景，不會跟著捲動而移動<br>
local  - 背景圖片會隨著捲動而移動<br>
fixed  - 背景圖片的位置是固定在螢幕上的，不會隨著 div 移動而移動<br>

**<font color="#ff0000">在 iPhone 上似忽只有 scroll 其它的不支援</font>**

<div class="a07176_c1">
background-attachment<br><br>
<label>
<input type="radio" name="a07176_s1" checked> <span>scroll,scroll</span>
</label><br>
<label>
<input type="radio" name="a07176_s1"> <span>local,local</span>
</label><br>
<label>
<input type="radio" name="a07176_s1"> <span>scroll,local</span>
</label><br>
<label>
<input type="radio" name="a07176_s1"> <span>local,scroll</span>
</label><br>
</div>

<div class="a07176_c2">
<div>
This is a background test.<br>
This is a background test.<br>
This is a background test.<br>
 <div class="a07176_c3">fixed</div><br>
This is a background test.<br>
 <div class="a07176_c4">scroll/local</div><br>
This is a background test.<br>
This is a background test.<br>
This is a background test.<br>
This is a background test.<br>
This is a background test.<br>
</div>
</div>

var k=document.querySelector(".a07176_c2");
  var kn=3;
  setInterval(function()
  {
    let k1=k.scrollTop;
    k.scrollTop+=kn;
    if (k1==k.scrollTop) kn=-3;
    if (k.scrollTop>=k.scrollTopMax-3) kn=-3;
    if (k.scrollTop<=0) kn=3;
  },30);
})();
</script>  
  
-----------------------------------------------------

# background-clip

背景的裁切，最好玩的地方是可以用文字裁切，可以做文字的特效

**<font color="#ff0000">在 iPhone 和 Mac 的 safari 對於 text 的支援有點不一樣</font>**  
  
<style>
.a07177_c1
{
  display:inline-block;
  width:40%;
  vertical-align:top;
  font-size:1.5em;
}
.a07177_c1 label
{
  display:inline-block;
  border:1px solid #000;
  width:8em;
  padding:0.2em;
  margin:0.1em;
}
.a07177_c2
{
  display:inline-block;
  width:calc(59% - 2em);
  height:4em;
  background:
    url(https://yiharng.github.io/bird.jpg) 0 0/100%;
  background-repeat:repeat;
  color:#ff0;
  font-size:3em;  
  font-weight:900;
  line-height:1em;
  overflow:auto;
  text-align:center;
  border:0.5em dashed #f00;
  padding:0.5em;
/*
  color: transparent;
  -webkit-background-clip: text;
*/  
  font-family:Impact, Charcoal, sans-serif;
}
</style>

<div class="a07177_c1">
background-clip<br>
<label>
<input type="radio" name="a07177_s1" checked> <span>border-box</span>
</label><br>
<label>
<input type="radio" name="a07177_s1"> <span>padding-box</span>
</label><br>
<label>
<input type="radio" name="a07177_s1"> <span>content-box</span>
</label><br>
<label>
<input type="radio" name="a07177_s1"> <span>text</span>
</label><br>
</div>

<div class="a07177_c2"><br>
This is a background test.
</div>

$(".a07177_c2").css("background-clip",c);
    $(".a07177_c2").css("-webkit-background-clip",c);

if (c=="text")
    {
      $(".a07177_c2").css("color","transparent");
    }
    else
    {
      $(".a07177_c2").css("color","#ff0");
    }
  });

})();
</script>
  
-----------------------------------------------------

2020年7月3日星期五

即時操作 CSS - cssjson.js

上一篇本來想寫個操作所有 CSS 的程式, 卻發現只要在不同網域其實是無法修改的，最簡單的方式還是用新的取代舊的，而 CSS 的設計又有點奇怪，刪除就是該設定全部刪掉了，既然如此，就來寫一個加強版的CSS 工具，用 json 來操作 CSS
  
原始碼 : https://github.com/yiharng/cssjson  
  
首先先加入 cssjson.js
  
```
<script src="https://yiharng.github.io/cssjson.min.js"></script>  
  
```

# 使用方式
  
```
  var rc=cssjson();//在 head 新增一個 style
  var rc=cssjson("body");//在 body 新增一個 style
  var rc=cssjson("style");//使用目前網頁中的第一個 style
  var rc=cssjson("#objid");//使用 id 為 objid 的 style

```

# Functions

```
  rc.list() //列出所有的 css 名稱
  rc.list(".tag") //取得 .tag 的索引位置
  
  rc.get(".tag") //取得 .tag 的 CSS 設定，以 json 型態回傳
  key=rc.get("@key") //取得 @keyframes 名稱為 key 的 CSS 設定
  
  rc.set(".tag",{color:"#f00"}) //新增或取代 .tag 中的 css 設定
  rc.set(".tag","{color:#f00}") //以字串中的設定取代原來的所有設定
  
  rc.del(".tag")//刪除 .tag
  
  key.list() //列出所有的 keyframes 
  key.get("100%") //取得該 frame 的設定，以 json 型態回傳
  key.set("100%",{background-color:"#00f"}) //新增或取代 frame 的設定
  key.del("100%") // 刪除 frame
  
```  
  
這裡寫了一個簡單的範例，用這樣來操作 CSS 方便多了  
  
```
$mmcode(r1)  
```

}
button
{
  font-size:1em;
}
@keyframes a07031_a1
{
  0%
  {
    transform:translate(0em,0em);
  }
  100%
  {
    transform:translate(10em,0em);
  }
}
</style>

<div class="a07031_c1">內容</div>
<br>
<br>
<br>
<button id="a07031_b1">更改 before</button>
<button id="a07031_b2">新增 after</button>
<button id="a07031_b3">新增動畫</button>
<button id="a07031_b4">修改動畫</button>

$("#a07031_b1").on("click",()=>
  {
    rc.set(".a07031_c1::before",{color:"#05f"});
  });

$("#a07031_b2").on("click",()=>
  {
    rc.set(".a07031_c1::after",{content:'" [我是After]"',color:"#f0a"});
  });

$("#a07031_b3").on("click",()=>
  {
    rc.set(".a07031_c1",{animation:"a07031_a1 3s 0s ease infinite"});
  });

$("#a07031_b4").on("click",()=>
  {
    let k=rc.get("@a07031_a1");
    if (k.get("50%"))
    {
      k.set("50%",null); // k.del("50%"); 也可以
    }
    else
    {
      k.set("50%",{transform:"translate(5em,2em)"});
    }
  });

})();
</script>
  
</div>

2020年7月24日 星期五