buttonをクリックしたら2秒間だけメッセージを表示して消したい
hello
コード.gs
function doGet() {
return HtmlService.createHtmlOutputFromFile("index");
}
|
意訳この機能がやること 指定したHTMLファイルを表示する |
index.html
<!DOCTYPE html>
<html>
<head>
<style>
.bg_pink {
background-color: pink;
color: white;
}
</style>
</head>
<body>
<div id="main">hello</div><br>
<button id="bt">button</button>
<script>
var milisec = 2000;
var main = document.getElementById("main");
var bt = document.getElementById("bt");
bt.onclick = btClicked;
function btClicked(){
showMessage();
setTimeout('removeMessage()', milisec);
}
function showMessage(){
main.classList.add("bg_pink");
main.textContent = "2秒だけ表示するメッセージ";
}
function removeMessage(){
main.classList.remove("bg_pink");
main.textContent = "hello";
}
</script>
</body>
</html>
|
意訳
.bg_pinkのスタイル
背景色
文字色
idがmainのdiv要素
idがbtのbutton要素
指定ミリ秒
idがmainの要素を取得する
idがbtの要素を取得する
btの要素がクリックされたら btClicked を実行する
この機能がやること
showMessage() を実行する
milisec秒後に removeMessage() を実行する
この機能がやること
mainのclassに "bg_pink" を追加する
mainに表示するメッセージ
この機能がやること
mainのclassから "bg_pink" を削除する
mainに表示するメッセージ
|
参考
setTimeout
https://developer.mozilla.org/ja/docs/Web/API/WindowTimers/setTimeout
element.classList
https://developer.mozilla.org/ja/docs/Web/API/Element/classList
setTimeout
https://developer.mozilla.org/ja/docs/Web/API/WindowTimers/setTimeout
element.classList
https://developer.mozilla.org/ja/docs/Web/API/Element/classList
