質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.39%
jQuery UI

jQuery UI はjQuery公式のインターフェースライブラリであり、対話型のウェブアプリケーションを作る際に役立ちます。

プラグイン

プラグイン(plug-in)は、ソフトウェアアプリケーションの機能拡張の為に開発された、一組のソフトウェアコンポーネントのことを指します。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

1回答

130閲覧

「Flip Counter Plugin」でカウンターの内容を更新したい

17dez

総合スコア13

jQuery UI

jQuery UI はjQuery公式のインターフェースライブラリであり、対話型のウェブアプリケーションを作る際に役立ちます。

プラグイン

プラグイン(plug-in)は、ソフトウェアアプリケーションの機能拡張の為に開発された、一組のソフトウェアコンポーネントのことを指します。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

1クリップ

投稿2024/07/14 17:28

編集2024/07/14 17:58

実現したいこと

Flip Counter Plugin」というプラグインを使用し、自分の誕生日を入力すると、還暦の歳になるまでのカウントダウンを表示するWEBページを作成しようとしています。

発生している問題・分からないこと

誕生日の入力はjQueryのdatepickerで、さらに還暦の日付も作るまではいけたのですが、それをどうしてもプラグインで表示することができません。

ページを表示した際は「1970年1月1日生まれ」の人が還暦になるまでのカウントダウンを表示し、datepickerで日付を選択すると、随時カウントダウンの数字が変わるようにしたいです。

1日かけて無理だったので、プロの方のお知恵をお借りできればと思います。よろしくお願いいたします。

該当のソースコード

HTML

1<!doctype html> 2<html lang="ja" class="h-100"> 3 <head> 4 <meta charset="utf-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1"> 6 <meta name="description" content=""> 7 8 <title>Test</title> 9 10 11 <script src="https://code.jquery.com/jquery-3.7.1.js"></script> 12 <script src="https://code.jquery.com/ui/1.13.3/jquery-ui.js"></script> 13 <script src="https://rawgit.com/jquery/jquery-ui/master/ui/i18n/datepicker-ja.js"></script> 14 <script src="https://unpkg.com/@pqina/flip/dist/flip.min.js"></script> 15 <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz" crossorigin="anonymous"></script> 16 17 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous"> 18 <link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" rel="stylesheet"> 19 <link href="https://unpkg.com/@pqina/flip/dist/flip.min.css" rel="stylesheet"> 20 <link rel="stylesheet" href="https://code.jquery.com/ui/1.13.3/themes/base/jquery-ui.css"> 21 22 <style> 23 body{font-family:"Noto Sans JP",sans-serif;font-weight:normal;background-color:#d5dfde}body p{text-align:justify}h1,h2,h3,h4,h5,hr{margin:0}.tick{width:50%;max-width:600px;margin:0 auto 4vw;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif}@media screen and (max-width: 560px){.tick{width:80%}}.tick-label{font-size:.375em;text-align:center;color:gray}.tick-group{margin:0 .25em;text-align:center}#text-styled [data-view=text]{font-weight:bold;font-family:sans-serif;color:red;letter-spacing:.25em}footer{padding-top:3em}/*# sourceMappingURL=style.css.map */ 24 </style> 25 26 </head> 27 <body class="d-flex h-100"> 28 29 <div class="d-flex w-100 h-100 flex-column animate__animated animate__fadeIn animate__delay-1s"> 30 31 <main class="mt-auto w-100"> 32 <section> 33 <div class="container"> 34 <div class="row justify-content-center flex-column"> 35 <div class="col-12 mb-5 text-center"> 36 <label for="start">誕生日を設定</label> 37 <input type="text" id="datepicker"> 38 </div> 39 <div class="col-12 cdt_tick_box"> 40 <div class="tick" data-did-init="handleTickInit" data-credits="false"> 41 <h4 class="mb-4 text-center">あなたが還暦まであと</h4> 42 <div data-repeat="true" data-layout="horizontal center fit" data-transform="preset(d, h, m, s) -> delay"> 43 <div class="tick-group"> 44 <div data-key="value" data-repeat="true" data-transform="pad(00) -> split -> delay"> 45 <span data-view="flip"></span> 46 </div> 47 <span data-key="label" data-view="text" class="tick-label"></span> 48 </div> 49 </div> 50 </div> 51 <div class="tick-onended-message"> 52 <h4 class="mb-4 text-center" style="display: none;">あなたはすでに還暦を迎えています。</h4> 53 </div> 54 </div><!-- /.cdt_tick_box --> 55 <script> 56 $( "#datepicker" ).datepicker({ 57 dateFormat: "yy年mm月dd日", 58 changeMonth: true, 59 changeYear: true, 60 onSelect: function(dateText) { 61 const bd = $(this).val(); 62 const re = /年|月|日/; 63 const resultSplit = bd.split(re); 64 kanrekiYear = Number(resultSplit[0]) + 60; 65 var kanreki = kanrekiYear + '-' + resultSplit[1] + '-' + resultSplit[2] + ' GMT+09:00'; 66 console.log(kanreki); 67 } 68 }); 69 $( "#datepicker" ).datepicker("setDate","1970年01月01日"); 70 71 function handleTickInit(tick) { 72 kanreki = '2030-01-01 GMT+09:00'; 73 var counter = Tick.count.down(kanreki); 74 counter.onupdate = function (value) { 75 tick.value = value; 76 }; 77 counter.onended = function() { 78 document.querySelector('.tick-onended-message').style.display = ''; 79 document.querySelector('.tick').style.display = 'none'; 80 }; 81 } 82 </script> 83 </div><!-- .row --> 84 </div><!-- .container --> 85 </section> 86 </main> 87 <footer class="mt-auto"> 88 <p class="text-center small">&copy; Test</p> 89 </footer> 90 </div> 91 92 93 </body> 94</html> 95

試したこと・調べたこと

  • teratailやGoogle等で検索した
  • ソースコードを自分なりに変更した
  • 知人に聞いた
  • その他
上記の詳細・結果

初期表示したカウントダウンを更新する方法が分からず。
公式のドキュメントを読んだのですが、理解できませんでした。
https://pqina.nl/tick/

補足

特になし

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ChatGPTに考えてもらいました。でも機能は実現してるんですが、コンソールにエラーが出るんですよね。。

HTML

1<!doctype html> 2<html lang="ja" class="h-100"> 3 <head> 4 <meta charset="utf-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1"> 6 <meta name="description" content=""> 7 8 <title>Test</title> 9 10 <script src="https://code.jquery.com/jquery-3.7.1.js"></script> 11 <script src="https://code.jquery.com/ui/1.13.3/jquery-ui.js"></script> 12 <script src="https://rawgit.com/jquery/jquery-ui/master/ui/i18n/datepicker-ja.js"></script> 13 <script src="https://unpkg.com/@pqina/flip/dist/flip.min.js"></script> 14 <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz" crossorigin="anonymous"></script> 15 16 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous"> 17 <link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" rel="stylesheet"> 18 <link href="https://unpkg.com/@pqina/flip/dist/flip.min.css" rel="stylesheet"> 19 <link rel="stylesheet" href="https://code.jquery.com/ui/1.13.3/themes/base/jquery-ui.css"> 20 21 <style> 22 body{font-family:"Noto Sans JP",sans-serif;font-weight:normal;background-color:#d5dfde}body p{text-align:justify}h1,h2,h3,h4,h5,hr{margin:0}.tick{width:50%;max-width:600px;margin:0 auto 4vw;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif}@media screen and (max-width: 560px){.tick{width:80%}}.tick-label{font-size:.375em;text-align:center;color:gray}.tick-group{margin:0 .25em;text-align:center}#text-styled [data-view=text]{font-weight:bold;font-family:sans-serif;color:red;letter-spacing:.25em}footer{padding-top:3em}/*# sourceMappingURL=style.css.map */ 23 </style> 24 25 </head> 26 <body class="d-flex h-100"> 27 28 <div class="d-flex w-100 h-100 flex-column animate__animated animate__fadeIn animate__delay-1s"> 29 30 <main class="mt-auto w-100"> 31 <section> 32 <div class="container"> 33 <div class="row justify-content-center flex-column"> 34 <div class="col-12 mb-5 text-center"> 35 <label for="start">誕生日を設定</label> 36 <input type="text" id="datepicker"> 37 </div> 38 <div class="col-12 cdt_tick_box"> 39 <div class="tick" id="countdown" data-did-init="handleTickInit" data-credits="false"> 40 <h4 class="mb-4 text-center">あなたが還暦まであと</h4> 41 <div data-repeat="true" data-layout="horizontal center fit" data-transform="preset(d, h, m, s) -> delay"> 42 <div class="tick-group"> 43 <div data-key="value" data-repeat="true" data-transform="pad(00) -> split -> delay"> 44 <span data-view="flip"></span> 45 </div> 46 <span data-key="label" data-view="text" class="tick-label"></span> 47 </div> 48 </div> 49 </div> 50 <div class="tick-onended-message" style="display: none;"> 51 <h4 class="mb-4 text-center">あなたはすでに還暦を迎えています。</h4> 52 </div> 53 </div><!-- /.cdt_tick_box --> 54 <script> 55 let counter; 56 let tick; 57 58 function initializeCounter(kanrekiDate) { 59 if (counter) { 60 counter.onupdate = null; 61 counter.onended = null; 62 document.querySelector('.tick-onended-message').style.display = 'none'; 63 document.querySelector('.tick').style.display = ''; 64 } 65 66 counter = Tick.count.down(kanrekiDate); 67 counter.onupdate = function (value) { 68 tick.value = value; 69 }; 70 counter.onended = function() { 71 document.querySelector('.tick-onended-message').style.display = ''; 72 document.querySelector('.tick').style.display = 'none'; 73 }; 74 } 75 76 function handleTickInit(t) { 77 tick = t; 78 const initialDate = new Date('2030-01-01T00:00:00+09:00'); 79 initializeCounter(initialDate); 80 } 81 82 $( "#datepicker" ).datepicker({ 83 dateFormat: "yy年mm月dd日", 84 changeMonth: true, 85 changeYear: true, 86 maxDate: 0, 87 onSelect: function(dateText) { 88 const bd = $(this).val(); 89 const re = /年|月|日/; 90 const resultSplit = bd.split(re); 91 const kanrekiYear = Number(resultSplit[0]) + 60; 92 const kanreki = new Date(`${kanrekiYear}-${resultSplit[1]}-${resultSplit[2]}T00:00:00+09:00`); 93 initializeCounter(kanreki); 94 } 95 }); 96 97 $( "#datepicker" ).datepicker("setDate","1970年01月01日"); 98 </script> 99 </div><!-- .row --> 100 </div><!-- .container --> 101 </section> 102 </main> 103 <footer class="mt-auto"> 104 <p class="text-center small">&copy; Test</p> 105 </footer> 106 </div> 107 108 109 </body> 110</html> 111

投稿2024/07/14 19:49

17dez

総合スコア13

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.39%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問