----

  • 見当かなみ

    わいはほもみやで

  • かぶとむし

    樹液おいしー♪

view source

JavaScript

const sleep = msec => new Promise(resolve => setTimeout(resolve, msec));

var homomi = {
  img : 'https://pbs.twimg.com/profile_images/1178635538229649409/Vzx0cbrM_normal.jpg',
  name : 'ほもみ',
}

var kabuto = {
  img : 'icon-kabuto.png',
  name : 'かぶと',
}

var addComment = function(who){
  
}

var switchText = function(){

  (async () => {
    $('#tweet li p').eq(0).text('おっ かぶとむしやんけ くったろ');
    await sleep(1000);
    $('#tweet li p').eq(1).text('えっ');
    await sleep(1000);
    $('#tweet li img').eq(1).addClass('kuwareru');
    $('#tweet li p').eq(1).text('ら らめっ');
    await sleep(2000);
    $('#tweet li p').eq(0).text('スゥゥゥウゥゥ');
    $('#tweet li p').eq(1).text('やめて…');
    await sleep(3000);
    $('#tweet li p').eq(0).text('いただきまーす♪');
    $('#tweet li p').eq(1).text('ぁぁぁ…');
    await sleep(3000);
    $('#tweet li p').eq(0).text('むしゃ むしゃ ごっくん');
    await sleep(1000);
    $('#tweet li b').eq(1).css({display:'none'});
    $('#tweet li p').eq(1).css({display:'none'});
    $('#tweet li img').eq(1).css({display:'none'});
    $('#tweet li p').eq(0).text('うめぇ');
    await sleep(2000);
    $('#tweet li p').eq(0).text('ごちそうさまでした~♪');
    await sleep(5000);
  })();//async
}

$(function(){
  
  //switchText();

  $('#start').on('click', function(){
    switchText();
  });
});

CSS

HTML

ページのソースを表示 : Ctrl+U , DevTools : F12

view-source:https://hi0a.com/demo/-js/js-await-comment/

ABOUT

hi0a.com 「ひまアプリ」は無料で遊べるミニゲームや便利ツールを公開しています。

プログラミング言語の動作デモやWEBデザイン、ソースコード、フロントエンド等の開発者のための技術を公開しています。

必要な機能の関数をコピペ利用したり勉強に活用できます。

プログラムの動作サンプル結果は画面上部に出力表示されています。

環境:最新のブラウザ GoogleChrome / Windows / Android / iPhone 等の端末で動作確認しています。

画像素材や音素材は半分自作でフリー素材配布サイトも利用しています。LINK参照。

動く便利なものが好きなだけで技術自体に興味はないのでコードは汚いです。

途中放置や実験状態、仕様変更、API廃止等で動かないページもあります。