Hexoブログ記事内でjavascriptを動かす方法
記事ファイル「〇〇.md」中に直接書いたら動いた。
本文中に
1
2
3
| <script>
source code
</script>
|
と書くと反映される。
1. ボタンを押す アラートを出す
下のボタンを押すとメッセージが表示される。
こんなかんじに書く↓
1
2
3
4
5
6
7
| <button onclick="test();">Button</button>
<script>
function test() {
alert("メッセージ");
}
</script>
|
2. 計算する テキストを置き換える
下のボタンを押すと数値が増えていく。
Count 0
こんなかんじに書く↓
1
2
3
4
5
6
7
8
9
10
11
12
| <button onclick="test2();">Button</button>
<p id="test2">Count 0</p>
<script>
let count = 0;
function test2() {
count++;
document.getElementById("test2").innerHTML = "Count " + count;
}
setInterval('date_test_2()',1000);
</script>
|
3. 画像を読み込み表示する
下の選択するやつから画像ファイルを選択すると表示される。
こんなかんじに書く↓
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
| <input type="file" id="selectedFile">
<div id="image"></div>
<script>
var obj = document.getElementById("selectedFile");
obj.addEventListener("change", function(event){
var file = event.target.files;
var reader = new FileReader();
//画像ファイル読み込み
reader.readAsDataURL(file[0]);
//ファイル読込終了時に画像表示
reader.onload = function(){
var dataUrl = reader.result;
document.getElementById("image").innerHTML = "<img src='" + dataUrl + "'>";
}
},false);
</script>
|
4. ブロック崩し
参考
https://developer.mozilla.org/ja/docs/Games/Workflows/2D_Breakout_game_pure_JavaScript
https://www.pazru.net/html5/File/040.html
