はじめに
今回は趣味でJsとJQueryを使って動く顔文字くんを作ったので皆さんも暇な時に作ってみて下さい。
環境構築いらないし解説たくさん書いたので初心者の方は是非🥺
準備
・適当にディレクトリ(フォルダ)を作ります。
Macなら
$ mkdir フォルダ名
そしたらそのフォルダをVSCodeで開いて下さい
次に開いたディレクトリの中に下記の３つのファイルを作ります。
（ファイル名はなんでも構いません、もし違う名前にした際は、適宜置き換えて読んでいって下さい）
index(ファイル名).html
style(ファイル名).css
App(ファイル名).js
各ファイルの説明
index(ファイル名).html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JQuery_Sample</title>
<!--外部からJQueryを読み込む-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!--CSSを読み込む-->
<link rel="stylesheet" href="style.css">
<!--jsファイルを読み込む-->
<script src="App.js"></script>
</head>
<body>
<div>
<p>
<button id="start-button">スタート！！</button>
</p>
<div id="emoji">ヽ( ￣∇￣)ノ</div>
</div>
</body>
</html>
style(ファイル名).css
#start-button {
margin: 10px;
}
#emoji {
text-align: left;
margin: 10px;
}
App(ファイル名).js
// $(function () {})ここでHTMLが全部読み込まれた後に下記の処理をするようにしている
$(function () {
// id = 'start-button'を押した時の処理を記述
$('#start-button').on('click',
function () {
if ($('#start-button').text() === "スタート！！") {
// id = buttonの要素に'disabled', trueを追加する（ここでボタンの制御）
$('#start-button').prop('disabled', true);
// id = emojiの要素にε=ヽ(*￣∇￣)ノ文字列を追加している
$('#emoji').text('ε=ヽ(*￣∇￣)ノ');
// countに０を代入
var count = 0;
// setTimeoutでfunctionを“0.5秒後”に実行
setTimeout(function progress() {
// countに１づつたす
count++;
// もし、countの値が10以下なら
if (count <= 10) {
// ここでid = emojiの要素に文字列ε=を先頭に追加して行っている
$('#emoji').prepend('ε=');
// progress関数を実行する
setTimeout(progress, 500);
}
}, 500);
setTimeout(function () {
$('#start-button').prop('disabled', false);
$('#start-button').text('位置について');
}, 5500);//5500は500を10回処理した後に表示したいから
}
else {
$('#start-button').text('スタート！！');
$('#emoji').text('ヽ( ￣∇￣)ノ');
}
}
)
})
これで完成です。
あとはブラウザで今回作ったindex.htmlファイルを開くだけです。
簡単でしょう！
参考:http://alphasis.info/2012/01/jquery-gyakubiki-emozi-run
今回のソースコード：https://github.com/junichmiyahara/emoji_js
最後に
上手く説明できなかったところもあるかもしれませんが、少しでもお役になったら幸いです。
また何かわからないことや間違っていたことなどありましたら、コメントいただけたらと思います。