イクライフログ

旅好きクリエーターいくらによる旅・バイク・仕事雑記 since 2005
new最新記事
<< ツーリング@千葉 木更津 | トップ | バイクカバーをAmazonで購入 >>
[Java Script]csvファイルのありなしで画像を出しわける

サーバー上の規定の場所にcsvファイルがあるかないかによって、画像を出しわけるJava Scriptのメモ。

 

<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-csv/1.0.8/jquery.csv.min.js"></script>
<script>
$(window).on('load',function(){

  var randomNum = Math.random()*1000;
  var csvPath = 'csv/teideninfo.csv?d='+randomNum;
  var csvCheckTimer;
  var intervalTime = 10000;
  var dispBlackoutInfo_F;

  onCheckBlackoutInfo(csvPath);
  csvCheckTimer = setInterval(
    function(){
      onCheckBlackoutInfo(csvPath)
    },intervalTime
  );
  function onCheckBlackoutInfo(csvPath,sort_F){
   
    $.ajaxSetup({
        beforeSend : function(xhr) {
            xhr.overrideMimeType('text/csv;charset=Shift_JIS');
        }
    });
    
    $.ajax({
        type: 'GET',
        url: csvPath,
        dataType: 'text',
        cache: false
      }).done(function (results) {
        
//csvファイルが取得できた時に表示するimg      
        document.getElementById('icon').innerHTML = '<img src="icon_a.jpg" alt="A">';

        onDispBlackoutInfo(results,sort_F);
      }).fail(function (jqXHR, textStatus, errorThrown) {
       
//csvファイルが取得できなかった時に表示するimg
        document.getElementById('icon').innerHTML = '<img src="icon_b.jpg" alt="B">';

      });
  }

});
</script>

 

//html

<p id="icon">IMG</p>

 

//demo(これだけみてもわからんが)

http://ikuranet.com/jstest/index4.html

 

 

元々は、「csvファイルが規定の場所にあるかないかで表示/非表示を切り替えるスクリプト」で

協力会社のエンジニアさんに書いてもらいました。

それをベースに青いところだけ改変して、

「csvファイルが規定の場所にあるかないかで画像を切り替えるスクリプト」にしました。

csvファイルがあるときはnewがついたアイコンをだし、

ファイルがない時はnewのないアイコンがでます。

 

参考にさせていただいたサイト:

【JavaScript】入門14. JavaScriptで文字や画像を表示する

https://www.webdlab.com/javascript/javascript-write/

 


| いくら | クリエーターの仕事 | comments(0) | - | 16:59
コメントComment





▼Facebookページ「シングルトラベラー」Let'sジョイン→
著者/運営者

運営WEBサイト
レコメンド
レコメンド
レコメンド
■OTHERS

更新カレンダー << June 2020 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 >>
RSS1.0Atom0.3Powered by ロリポブログスマホ版管理者ページ
いくら運営サイト> ブログ-旅メモ シングルトラベラー-海外一人旅 マタタビ 一生に一度は行きたい場所したい旅 海外個人旅行のはじめ方