by Rain Chu | 4 月 13, 2023 | Javascript, 程式
常常有需求要事後調整前台的畫面,尤其現在前端 javascript 的框架一大堆,只能事後處理,把元素的位置變來變去,我這邊舉利用 div 來代表,如何把元素變換位置,讓排版更簡單且容易些。
先準備有原來的 div
<div id="source">
....
</div>
想要把原來的Div移動到目的地的div,id 訂為 dest
<div id="dest">
....
</div>
JQuery 程式碼 appendTo(),把 div 移動到目的地 div 的裡面
$("#source").appendTo("#dest");
除了 appendTo() 最常用,還整理幾個常用的寫法,放在下面
$("#source").insertBefore("#dest");
$("#source").insertAfter("#dest");
$("#source").prependTo("#dest");
$("#source").appendTo("#dest");
參考資料
https://stackoverflow.com/questions/1279957/how-to-move-an-element-into-another-element
by Rain Chu | 2 月 28, 2022 | Javascript, 程式
// 發送email
function sendEmail(title,text){
var email = document.createElement("a");
email.id = "sendemail";
email.href = "mailto:[email protected]?subject="+title+"&body="+ text;
email.click();
}
當使用者在網頁中,再連絡表單中填入資訊後,我們通常會寫入後端資料庫,並且發送通知,以方便管理者使用,但沒有資料庫的人,就需要仰賴使用者自己的電子郵件了,為了統一格式方便,我們還是提供聯絡表單,先幫忙使用者把資料正規化一下,然後在協助它們送出資訊給後端的管理者

by Rain Chu | 2 月 20, 2022 | Javascript, React, 教育, 線上學習
有鑑於最近大家的一股腦兒的跟風 wordle 這款遊戲,讓我們不得不正視這款猜字或是猜東西的小遊戲如何讓大家瘋迷,並且也想要改善我們的拼字練功坊,看能不能讓它有趣一點,在這之前先說說我看到的5種 wordle 應用。
正統英文版的猜英文 Wordle
這款已經紅到了被紐約時報重金買下來的遊戲版本,已經難到了讓我自我放棄的程度,上要知天文,下要知寶可夢,讓只會中文的我,放棄人生。

這款猜日文遊戲跟英文版本大同小異,但我愛的是它也有 OpenSource ,可以到 Github 上下載 mahjong-hand-guessing-game ,

這款看起來是利用 opensource 去發展的中文注音版本,雖然說是香港人開發的,但很適合台灣人使用(因為學的是注音),一樣是會每天有不同的題庫來考考大家
同場加映,粵語版本的 wordle
接下來就不僅僅只有猜字了,開始有人腦洞大開,加入了各種的民族元素,不過開始者是採用了日本麻將,為 14 張牌型,鍵盤上是各種萬、筒、條跟字,共有六次機會猜題機會,比較有趣的是它也有東北風的概念

大逃殺版本的 wordle ? 為什麼說他是大逃殺版本,因為你同時可以跟最多 99 人一起玩,在時間內,最後只會留下一個人為勝利者,也就是說你不僅只有要猜對字,還要能跟其他人競爭、跟時間賽跑,你每答對一題,就可以對其他人發動攻擊,扣除他們的生命力

近期留言