JavaScript

全16052件中101～120件表示
  • いいねボタンの簡単なカウント数の作成

    こんにちは、お世話になります。 質問ですが、いいねボタンの簡単なカウント数を表示したいのですが 何かいい方法はありますでしょうか？ http://urbanqee.com/webutil/sns/mypage-likecount.html ここのページを参考にしようとしたのですが何かかなり複雑そうで 初心者の私にはとっつきづらいです。 CSSとjsで作成できる簡単なソースコードはないでしょうか？ 因みに画像コンテンツの評価ができるような仕様にしたいです。 ご教示お願いします。

  • JavascriptでXSSの脆弱性対策を行いたい

    JavascriptのXSS対策としてinnerHTMLでHTMLのエスケープ処理コードを書いてみたのですが、正しいのか分かりませんアドバイスお願い致します。 ※名前HTML <div class="msg_partial">あと<strong>50</strong>文字</div> ※コメントHTML <div class="msg_partial">あと<strong>500</strong>文字</div> ※該当コード <h2>名前<span class="required">※必須</span></h2> <input class="length_input" data-maxlength="<?php echo MAX_LENGTH::NAME; ?>" type="text" name="namae" id="name" placeholder="未入力の場合は、匿名で表示されます" value="<?php echo $namae; ?>"> <div class="msg_partial"></div> <h2>コメント<span class="required">※必須</span></h2> <textarea class="length_input" data-maxlength="<?php echo MAX_LENGTH::MESSAGE; ?>" name="message" id="message" placeholder="荒らし行為や誹謗中傷や著作権の侵害はご遠慮ください"><?php echo $message; ?></textarea> <div class="msg_partial"></div> ※エスケープ処理を追加 function lengthCheck() { const left = this.dataset.maxlength - this.value.length; if (left >= 0) { const a = document.querySelectorAll('msg_partial'); return a.innerHTML; this.nextElementSibling.innerHTML = '<strong>' + escapeHTML(left) + '</strong>文字'; this.dataset.submit_disabled = this.value.length === 0; } else { const b = document.querySelectorAll('msg_partial'); return b.innerHTML; this.nextElementSibling.innerHTML = '<strong>' + escapeHTML(-left) + '</strong>文字超過しています'; this.dataset.submit_disabled = true; }

  • javascriptのifの中にconstはNG？

    javascriptで運賃計算プログラムを作成していますが、 次の問題で困っています。 if文の中にconstはNGなのでしょうか。 可能であれば、scriptの全文を書いてくださればありがたいです。 <!DOCTYPE html> <meta charset="utf-8"> <title></title> <style> </style> <body> <p id=A> <select id=B> <option value="">-- <option value="nakamozu">中百舌鳥 <option value="fukai">深井 <option value="izumigaoka">泉ケ丘 <option value="a0">a0 <option value="a1">a1 <option value="a2">a2 </select> ここから先は同じなので省略 </p> <p id=D></p> <script> const vals = { 'nakamozufukai':3.7, 'nakamozuizumigaoka':7.8, 'a0b0': 1.2, 'a0b1': 12, 'a0b2': 28.8, }, len = [1, 2, 4, 6, 8, 10, 12, 14, 16], prc = ['運賃170(90),<br>回数券1,700（900）,<br>通勤_1か月6,540(3,270）_3か月18,640（9,320）_6か月35,320(17,660）,通学_1か月3,030(1,520)_3か月8,640(4,320)_6か月_16,370（8,190）', '運賃170(90),回数券1,700（900）,<br>通勤_1か月6,540(3,270）_3か月18,640（9,320）_6か月35,320(17,660）,通学_1か月3,030(1,520)_3か月8,640(4,320)_6か月_16,370（8,190）', '運賃190(100),回数券1,900（1,000）,<br>通勤_1か月7,360(3,680）_3か月20,980（10,490）_6か月39,750(19,880）,通学_1か月3,470(1,700)_3か月9,690(4,850)_6か月_18,360（9,180）', '運賃210(110),回数券2,100（1,100）,<br>通勤_1か月8,180(4,090）_3か月23,320（11,680）_6か月44,180(22,090）,通学_1か月3,780(1,890)_3か月10,780(5,390)_6か月_20,420（10,210）', '運賃230(120),回数券2,300（1,200）,<br>通勤_1か月8,990(4,500）_3か月25,630（12,820）_6か月48,550(24,280）,通学_1か月4,160(2,080)_3か月11,860(5,930)_6か月_22,470（11,240）', '運賃250(130),回数券2,500（1,300）,<br>通勤_1か月9,810(4,910）_3か月27,960（13,980）_6か月52,980(26,490）,通学_1か月4,530(2,270)_3か月12,920(6,460)_6か月_24,470（12,240）', '運賃270(140),回数券2,700（1,400）,<br>通勤_1か月10,620(5,310）_3か月30,270（15,140）_6か月57,350(28,680）,通学_1か月4,910(2,460)_3か月14,000(7,000)_6か月_26,520（13,260）', '運賃290(150),回数券2,900（1,500）,<br>通勤_1か月11,450(5,730）_3か月32,840（16,320）_6か月52,980(30,920）,通学_1か月5,290(2,650)_3か月15,080(7,540)_6か月_28,570（14,290）'], f = (_, l = Math.floor(_)) => D.innerHTML = l ? prc[len.findIndex(_ => _ > l)] + '円' : ''; A.addEventListener('change', _ => f(vals[(_ = B.value) + (__ = C.value)] || vals[__ + _])); </script>

  • pinterest風のページのjsのプラグイン化

    こんばんは、いつもお世話になっています。 結局のところ私はpinterest風のグリッドレイアウトが作りたいのですが、JavaScriptのプラグイン化の方法が解りません。 https://dev.classmethod.jp/articles/html5-css3-jquerystudy-12-pinterestgrid/このサイトを参考にしたのですが、 宜しければご教示お願いします。 いつもすみません・・・。

  • innerhtmlで出た値から、ifで返り値を出す

    innerhtmlで出た値から、要素を判断し、if文で返り値を求めることは可能でしょうか。 具体的にはinnerhtmlで、2未満の数値が出た場合、 りんごを、4未満であればみかんと返すようにいたしたいです。 なお、回答が長くなることから、script文のみの記述でOKですが、 script文は省略なさらないでください。 <!--適当--> <!DOCTYPE html> <html> <head> <title></title> <script language="javascript" type="text/javascript"> function selectboxChange101() { judge(); } function selectboxChange111() { judge(); } function judge() { /* この場合は、varではなくletを使う。*/ let val101 = document.forms.form101.Select101.value; let val111 = document.forms.form111.Select111.value; /* そもそも両方が当てたら、メッセージを出すのなら、outputは1つでいいのでは？ */ let target = document.getElementById("output201"); let target2 = document.getElementById("output202"); if ((val101 == "要素101")&&(val111 == "要素111")) { target.innerText = "合っています。"; target2.innerText = "合っています。"; } else { target.innerHTML = "間違っています。"; } } </script> </head> <body> <form name="form101" action=""> <select id="Select101" onchange="selectboxChange101();"> <option>---</option> <option value101 == "要素101">要素101</option> <option>要素2</option> <option>要素3</option> <option>要素4</option> <option>要素5</option> </select> </form> </body> <body> <form name="form111" action=""> <select id="Select111" onchange="selectboxChange111();"> <option>---</option> <option value111 == "要素111">要素111</option> <option>要素12</option> <option>要素13</option> <option>要素14</option> <option>要素15</option> </select> </form> <div id="output201"></div> <div id="output202"></div> <div id="output203"></div> <div id="output204"></div> <div id="output205"></div> </body> </body> </html>

  • セレクトボックスで何度選択しても並び替えが可能に？

    自分は、テーブルを用いて、セレクトボックスを押して、並び替えができるようにしましたが、 いかんせん、セレクトボックスを変更すると、 表示内容が変わりますが、1度並び替えたらセレクトボックスの変更ができません。 どうすればいいのでしょうか。 以下は、そのhtml文です。 <select> <option value="select">選択してください</option> <option value="nankai-main">南海本線</option> <option value="semboku">泉北高速鉄道</option> </select> <table id="sort_table"> <thead> <tr> <th>No</th> <th>全角項目</th> <th>数値項目</th> <tbody> <tr id="nankai-main"><td class="nankai-color">1</td><td class="nankai-color">難波駅</td><td class="nankai-color">なんばえき</td></tr> <tr id="nankai-main"><td class="nankai-color">2</td><td class="nankai-color">今宮戎駅</td><td class="nankai-color">いまみやえびすえき</td></tr> <tr id="semboku" style="display:none;"><td class="semboku-color">1</td><td class="semboku-color">中百舌鳥駅</td><td class="semboku-color">なかもずえき</td></tr> <tr id="semboku" style="display:none;"><td class="semboku-color">2</td><td class="semboku-color">深井駅</td><td class="semboku-color">ふかいえき</td></tr> </tbody> <style> #nankai-main { display:none; } #semboku { display:none; } td.nankai-color { background-color:#ccc; border: 1pt solid #f70; } td.semboku-color { background-color:#ccc; border: 1pt solid #00f; } </style> </table> <!--セレクトボックスで表示切替--> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script> <script id="rendered-js" > $('select').change(function () { var val = $('select option:selected').val(); if (val == 'select') return; $('tbody tr').fadeOut(); $('tbody tr#' + val).fadeIn(); }); </script> <style> #sort_table { border-collapse:collapse; } #sort_table td { } #sort_table th { cursor:pointer; background-color:lightgray; } </style> <script src="https://cpwebassets.codepen.io/assets/editor/iframe/iframeRefreshCSS-44fe83e49b63affec96918c9af88c0d80b209a862cf87ac46bc933074b8c557d.js"></script> <!--テーブルのソート機能--> <script> window.addEventListener('load', function () { let column_no = 0; //今回クリックされた列番号 let column_no_prev = 0; //前回クリックされた列番号 document.querySelectorAll('#sort_table th').forEach(elm => { elm.onclick = function () { column_no = this.cellIndex; //クリックされた列番号 let table = this.parentNode.parentNode.parentNode; let sortType = 0; //0:数値 1:文字 let sortArray = new Array; //クリックした列のデータを全て格納する配列 for (let r = 1; r < table.rows.length; r++) { //行番号と値を配列に格納 let column = new Object; column.row = table.rows[r]; column.value = table.rows[r].cells[column_no].textContent; sortArray.push(column); //数値判定 if (isNaN(Number(column.value))) { sortType = 1; //値が数値変換できなかった場合は文字列ソート } } if (sortType == 0) { //数値ソート if (column_no_prev == column_no) { //同じ列が2回クリックされた場合は降順ソート sortArray.sort(compareNumberDesc); } else { sortArray.sort(compareNumber); } } else { //文字列ソート if (column_no_prev == column_no) { //同じ列が2回クリックされた場合は降順ソート sortArray.sort(compareStringDesc); } else { sortArray.sort(compareString); } } //ソート後のTRオブジェクトを順番にtbodyへ追加（移動） let tbody = this.parentNode.parentNode; for (let i = 0; i < sortArray.length; i++) { tbody.appendChild(sortArray[i].row); } //昇順／降順ソート切り替えのために列番号を保存 if (column_no_prev == column_no) { column_no_prev = -1; //降順ソート } else { column_no_prev = column_no; } }; }); }); //数値ソート（昇順） function compareNumber(a, b) { return a.value - b.value; } //数値ソート（降順） function compareNumberDesc(a, b) { return b.value - a.value; } //文字列ソート（昇順） function compareString(a, b) { if (a.value < b.value) { return -1; } else { return 1; } return 0; } //文字列ソート（降順） function compareStringDesc(a, b) { if (a.value > b.value) { return -1; } else { return 1; } return 0; } </script>

  • ラジオボタン→セレクトボックスで表示切替がしたい

    次のhtml文をラジオボタンではなく、セレクトボックスによる選択に変えることって不可能でしょうか。 参考にしたサイトはこちらです。 https://www.torat.jp/css-radiobotton/ 以下はそのソースです。 <form> <div class="form-check"> <input class="form-check-input" type="radio" name="maker" value="food" onclick="formSwitch()" checked> <label class="form-check-label"> 好きな食べ物</label> </div> <div class="form-check"> <input class="form-check-input" type="radio" name="maker" value="place" onclick="formSwitch()"> <label class="form-check-label"> 好きな場所</label> </div> </form> <ul> <div id="foodList"> <li>お寿司</li> <li>アイスクリーム</li> <li>チーズケーキ</li> <li>お団子</li> </div> <div id="placeList"> <li>自由が丘</li> <li>下北沢</li> <li>吉祥寺</li> <li>高円寺</li> </div> </ul> <script> function formSwitch() { hoge = document.getElementsByName('maker') if (hoge[0].checked) { // 好きな食べ物が選択されたら下記を実行します document.getElementById('foodList').style.display = ""; document.getElementById('placeList').style.display = "none"; } else if (hoge[1].checked) { // 好きな場所が選択されたら下記を実行します document.getElementById('foodList').style.display = "none"; document.getElementById('placeList').style.display = ""; } else { document.getElementById('foodList').style.display = "none"; document.getElementById('placeList').style.display = "none"; } } window.addEventListener('load', formSwitch()); </script>

  • bootstrapについて

    bootstrapのデモを見ると、フワッと写真や文字が浮かび上がる演出を、私のHPもに取り入れたい思っていますが、Bbootstrapの設定方法が分かりません。 どなたか、ご存知でしたらご教授をお願いします。

  • 以下のjavascriptでvalueを取得、判定

    以下のjavascriptでvalueを取得、判定したいです。 以下のように、value値に数字が与えられていて、 その数値を出すというのと、 また、その数値を仮に3以上かどうか判定したい場合に、どのようなjs文になるのかをお伺いしたいです。 また、if文を使うのはわかりますが、consoleでも、alertでも、windows.openでもなく、画面に直接表示させたいです。 このような場合はイベントを使わざるを得ないのでしょうか。 なるべく簡便に済ませたいです。 <html lang="ja"> <head> <meta charset="utf-8"> <title>サンプル</title> <script src="sample.js"></script> </head> <body> <select id="sel1"> <option value="01">みかん</option> <option value="02">りんご</option> <option value="03">バナナ</option> <option value="04">ぶどう</option> <option value="05">レモン</option> </select> <input type="button" value="ボタン" onclick="getValue('sel1');"> </body> </html>

  • HTML、CSS、Javaスクリプトを使用して

    HTML、CSS、Javaスクリプトを使用して1つの場所に、リンク付きの画像を順番に複数表示させ、それをループさせるにはどのようにすれば良いでしょうか？

  • 質問Aと質問Bを選択して、メッセージを出したい。

    質問Aと質問Bを選択して、メッセージを出すプログラムを作っています。 ところが、functionについて、引数の場合は2つ同時に使用できますけれども、関数はできないのがネックです。 なぜそれが必要かというと、 funcの中にifが入っており、そこで、メッセージの挙動の操作をしているためです。 もし、関数を2つ同時に使うとしたらどのようにしたらいいですか。 以下はそのjavascript文です。 <!DOCTYPE html> <html> <head> <title></title> <script language="javascript" type="text/javascript"> function selectboxChange101() { var val101 = document.forms.form101.Select101.value; var target = document.getElementById("output101"); if (val101 == "要素101") { target.innerHTML = "合っています。"; } else { target.innerHTML = "間違っています。"; } } </script> </head> <body> <form name="form101" action=""> <select id="Select101" onchange="selectboxChange101();"> <option>---</option> <option value101 == "要素101">要素101</option> <option>要素2</option> <option>要素3</option> <option>要素4</option> <option>要素5</option> </select> </form> <div id="output101"></div> </body> <body> <form name="form111" action=""> <select id="Select111" onchange="selectboxChange111();"> <option>---</option> <option value111 == "要素111">要素111</option> <option>要素12</option> <option>要素13</option> <option>要素14</option> <option>要素15</option> </select> </form> <div id="output111"></div> </body> </body> </html>

  • JS ベタ打ち原稿を成型して配列変数に格納する

    JavaScript ベタ打ち原稿を成型して配列変数に格納するには？ テキストエリアにベタ打ち原稿があります。 これを出力例のように配列変数に格納するには JavaScriptでどういうコードになりますか？ 出力例 1. Harrison Gregory - I'm Alone (2:09) ・・・ 51. Adward Hamilton - I Love You So (2:53) ・・・ 100. The Levons - We're Just Friends Now (2:25) [HTML] <textarea id="genkou" cols=100 rows=30 style="display:none"> 1. Harrison Gregory - I'm Alone (2:09) 2. Los Po-Boy & Citos - Trinidad (3:29) 3. Greenwood Rythm Coalition - Guajira (3:34) 4. Bobby Milano - Rags To Riches (2:07) 5. Frank Heppinstall - Sweetheart (3:27) 6. Sonny Holley - I Need Your More (2:49) 7. Spece Long - José (3:19) 8. Dlen Lovers - May I Hide The Pride (2:36) 9. Bernadette - Set Me Free (2:20) 10. Big Guss Jefferson - Will You Be There (2:47) 51. Adward Hamilton - I Love You So (2:53) 52. Heaven All Around Me - Heaven All Around Me (2:39) 53. Keith Powell & The Valets - I Sould Know Better (2:44) 54. Adah Louise Wilson - Too Much (2:10) 55. The Snowmen - Sugar Daddy (2:10) 56. Victorians - I Want To Belong To You (2:19) 57. Jackson Bros - But Still I Do (2:38) 58. Freddie Scott - I Had A Lover (2:41) 59. Avia - Westernize (3:38) 60. Jimmy Dean - Sixteen Tons (2:40) 91. Wee Willie Harris - Little Bitty Girl (2:22) 92. Miller Sisters - Tell Him (2:35) 93. O'jays - Miracle (2:30) 94. Roby Davis - Minor Mad (2:55) 95. Ruth Brown - Walk With Me Lord (2:13) 96. Stand By Me - Stand By Me (3:17) 97. September Jones - I'm Coming Home (2:47) 98. The Tams - Deep Inside Me (2:23) 99. Simon Scott - Tell Him I'm Not Home (2:44) 100. The Levons - We're Just Friends Now (2:25) </textarea>

  • JS 正三角形から正六角形にするには

    JavScript で正三角形から正六角形にするには？ 赤い円と一辺が１００ｐｘの正三角形を描きました。 青い正三角形は、頂点が円の中心にあり、２点が円周上にあります。 この時、ボタンを押したら６色の正六角形を描画します。（添付図参照） それには、どのようなコードになりますか？ 正三角形の色 (反時計回り) blue -> red ->violet ->green -> orange -> lightgrey <style> .wrap3 { margin: 0 auto; position: relative; width: 200px; height: 200px; border: solid 1px red; border-radius: 50%; } .triangle3 { position: absolute; left: 50px; top: 100px; width: 0; height: 0; border-style: solid; border-right: 50px solid transparent; border-left: 50px solid transparent; border-bottom: 87px solid blue; border-top: 0; } </style> <button id="btn3">正六角形にする</button> <div class="wrap3"> <div class="triangle3"></div> </div> <script> function draw() { // ？ }; btn３.onclick = draw; </script>

  • JS セルインデックスから関数を作れますか？

    JavaScript 正方形を縦横とも同じ数で分割した時に、セルインデックスを引数として 列番号、行番号、色名を返す関数 getCellinfo(index, nn) を作れますか？ なお、次の変数名を用いることにします。 let nn : n行n列の正方形 let index : セルインデックス (parameter) let col : 列番号 (先頭 ０) let row : 行番号 (先頭 ０) let bgc : 色名

  • JS スライドトグルのプレイリストにするには？

    JavaScript スライドトグルの音楽プレイリストにするには？ 現在、編集中のデータがテキストエリアにあります。 複数のプレイリストで、 1) 巻(VOLUME)ごとに分類されていません。 2) また、タイトル（巻、VOLUME）が無い状態です。 ＜仕様＞ ・これらを順番に「VOLUME 01」のようなタイトルを付けます。 ・編集後は result要素に出力させます。 ・初めはタイトルだけが表示されている。 ・タイトルをクリックすると内容が表示・非表示でスライドトグルされる。 このようにするには、どんなコードでできますか？ [HTML] <textarea id="genkou" cols=80 rows=60> 01 Billy Preston - Let Me Know (2:04) 02 Frank Evans - Lonely Town (2:35) 03 Patsy Montana - 16 Pounds (2:32) 04 Stevie Wonder - Lois (2:29) 05 The Tymes - With All My Heart (2:12) 06 George Greeley - Ride The High Country (2:27) 07 Linda Lanzetta - President Kennedy Cha Cha (2:10) 08 Craig Douglas - Time (2:23) 09 Jimmie Beaumont - Give Her My Best (2:02) 10 Gunther Neefs - A Hundred Pounds Of Clay (2:47) 11 Jimmy Justice - Up On The Roof (2:34) 12 Enoch Light & The Light Brigade - I Want To Be Happy Cha Cha (2:32) 13 Dean Martin - I Will (2:21) 14 Claire Chevalier - Va (2:55) 15 Little Eva - Stand By Me (2:25) 16 Petula Clark - Partir, Il Nous Faut (2:31) 17 Connie Francis - Una Notte Cosi (2:11) 18 Barritas - Se Io Ti Regalo Un Fiore (2:09) 19 Joey Heatherton - Live And Learn (2:09) 20 Henry Mancini - Patricia (1:57) 01 The American Sisters - Never On Saturday (2:02) 02 Jackie Edwards - Only A Fool Breaks His Own Heart (2:23) 03 Steve Alaimo - I Won't Let You Go (2:14) 04 Maureen Evans - Never In A Million Years (2:16) 05 Brian Hyland - Baby Face (1:54) 06 Christer Sjögren - She's Not You (2:16) 07 Elder Barber - El Vendedor De Melones (2:34) 08 Elvis Presley - Fun In Acapulco (2:30) 09 Ennio Sangiusto - Chariot (2:22) 10 Emperor Rosko - Al Capone (3:34) 11 Eydie Gorme - My Heart (2:49) 12 The Fives Royales - Catch That Teardrop (2:45) 13 Frida Boccara - La Más Bella Del Baile (2:28) 14 Gene Latter - Too Busy Thinking About My Baby (3:15) 15 Conny Froboess - Tanz Noch Einmal Mit Mir (2:22) 16 Gerry Granahan - Unchained Melody (2:05) 17 Helena Lemkovitch - Paradis Paradis - (2:20) 18 Paul Severs - Ange (Angel) (2:36) 19 Jackie Lynton - Don't Take Away Your Love (2:51) 20 James Booker - Gonzo (2:26) 01 The Playmates - While The Record Goes Around (2:11) 02 Al Alberts - Before Tomorrow Is Yesterday (2:28) 03 Jimmy Beaumont -There's No Other Love (2:10) 04 Jimmy Hughes - My Loving Time. (2:03) 05 Jo Leemans - Weet Je Nog Wel Die Avond In De Regen (2:08) 06 Sarah Vaughan - Smooth Operator (2:27) 07 The Professionals - Maigret Theme (2:53) 08 Ray Jameson - José (Rozez) (2:04) 09 Prince Buster & The All Stars - Django Fever (3:09) 10 Richard Chamberlain -You Always Hurt The One You Love (2:05) 11 Claudia Sylva - Quand Tu M'ouvres Les Bras (2:37) 12 Eliza - Broken Hearted Melody 13 Little Peggy March - Te Ne Vai (2:27) 14 Shelley Fabares - Breaking Up Is Hard To Do (2:07) 15 Jill Jackson - All Over Again (2:23) 16 Linda Scott - Catch A Fallin' Star (1:43) 17 Bob Mc Fadden - The Sheik Of Araby (2:23) 18 Alice & Ellen Kessler - Johnny Angel (2:11) 19 Terry Stafford - Kiss Me Quick (2:42) 20 Henri Mancini - Theme (From Cade's Country) (2:05) </textarea> <div> <button id="btn">実行ボタン</button> </div> <div id="result"></div>

  • JS テキストエリアを多色表示させるには？

    JavaScriptでテキストエリアの数字だけ 赤字にすることはできますか？ 「できません」と即答しそうですが、 工夫すれば「できました」になります。（添付図参照） このように、テキストエリアを表示するには どんなコードでできますか？ <div class="container"> <textarea class="textArea" readonly></textarea> </div> <script> //テキストエリアに表示するデータ const data = [ ["== The Body Mass Index (BMI) RESULT =="], [" "], ["DANDY 身長 170cm, 体重 70Kg, BMI: 24.2, Normal"], ["CHUBBY 身長 160cm, 体重 70Kg, BMI: 27.3, OverWeight"], ["FATMAN 身長 150cm, 体重 70Kg, BMI: 31.1, Obese Class I"], ]; </script>

  • MIDI 再生　基本動作の方法？

    実行したいこと： 　　windows 環境下で　ブラウザ内で、与えらえたMIDI音源を再生する 分からないこと： 　　入門方法が見当たらないため、 　　https://html5experts.jp/ryoyakawai/16787/ 　　いきなり、このような難解な解説文しか手に入りません 達成したいこと： 　　２－３小節程度の短い　MIDIコードをブラウザ上で再生するだけ 　　楽器音は、Windows 内臓のピアノ音源など、一般的に使われてい　　るサウンドをそのまま利用 　　ＰＣ外部のＭＩＤＩ楽器との接続は、しません 　　あくまで、ブラウザ上で音符の試聴をする程度の、簡易プログラムを作成したいです 　　 　　 コード作成の経験は、あります。 よろしくお願いいたします。 　　

    • mqm
    • 回答数2
  • JS ベタ打ち原稿を成型して出力するには？

    　JavaScript ベタ打ち原稿を成型して出力するには？ 未編集の洋楽プレイリストがあります。 これを、次の書式どおりに成型することにします。 [成型後の書式] ２桁の連番_歌手名_-_曲名_(分:秒) or (西暦年) [_：半角空白] ＜仕様＞ ・jQuery等のプラグインは不使用のこと ・「連番、歌手名、曲名、演奏時間」が１行ずつのまとまり ・演奏時間の箇所が 西暦年の場合がある ・歌手名、曲名に 次の記号が含まれている場合がある 　アンパサンド、半角括弧、アポストロフィ、バッククォート　（＆ （ ） ’ `） 手順１ テキストエリア「genkou」にベタ打ち原稿を貼り付けます。 手順２ 実行ボタンを押すと、テキストエリア「result」に成型して出力します。 そうするためには、どのような JavaScriptコードになりますか。 [HTML] <textarea id="genkou" cols="100" rows="30"> 01 - Artie Garr (a.k.a Art Garfunkel) - Beat Love (1959) 02 - Mark Dinning - Loving Touch (2:10) 03 - Petty Booka - Bla Bla Bla Cha Cha Cha (2:28) 04 - Sam Fletcher - I'd Think It Over (2:38) 05 - Untouchables - Raisin Sugar Cane (2:11) 06 - Esther Phillips - Just Say Goodbye (2:18) 07 - Eddie Holland - Jamie (2:23) 08 - Della Reese - Tea For Two (2:13) 09 - Danny Winchell - Por Favor (2:10) 10 - Clyde Otis - Jungle Drums (1:56) 11 - Christine Quaite - Your Nose Is Gonna Grow (2:10) 12 - Martin Bet - I Know A Girl (2:01) 13 - Arthur Alexander - Anna (2:52) 14 - Mickey & Sylvia - Love Is Strange (2:54) 15 - Richard Anthony - Cin Cin (Chin Chin) (3:02) 16 - Sarah Vaughan - Broken Hearted Melody (2:55) 17 - Aphrodite's Child - Rain And Tears (1968) 18 - Nico Landers - Stil In De Straten (2:26) 19 - Ginny Arnell - He's My Little Devil (2:10) 20 - Azie Mortimer - Lips (2:22) 21 - Ava Max - Salt (2019) 22 - Gun`s N Roses - Don't Cry (1991) 23 - Sarah Vaughan - Smooth Operator (2:27) 24 - The Weeknd - Save Your Tears (2020) 25 - Martha Reeves & The Vandellas - Nowhere To Run </textarea> <div> <button id="btn">実行ボタン</button> </div> <textarea id="result" cols="100" rows="10" placeholder="成型後" readonly></textarea> </textarea>

  • 毎月末日期限の自動更新可能なカウントダウンタイマー

    Javascriptで、毎月末日を期限とした、毎月自動更新ができるカウントダウンタイマー（日・時間・分・秒）を表示するソースコードを教えていただけないでしょうか。例えば、7月1日にサイトにアクセスすると、7月31日までの残り30日・〇〇時間・△△分・□□秒が表示される、あるいは8月10日にアクセスすると8月31日までの残り20日・●●時間・▲▲分■■秒が表示される、といったイメージです。よろしくお願いします。

  • JS 疑似要素のアイコンをアニメーション

    JS 疑似要素のアイコンをアニメーション JavaScriptで疑似要素のアイコンをアニメーションさせます。 テーブルヘッダーにソート用のアイコンを付けました。 下記のような動作をさせるには、どのようなコードで書きますか？ （添付図は動作例） ＜仕様＞ ・アニメーションさせる項目名にクラス名「icon」を付けておく ・初期状態は、三角形アイコンを薄い色で表示 ・項目名のクリックでアイコンが赤く変わる ・もう一度クリックで青色の逆三角形に変わる ・同じ項目名をクリックするたびにトグル ・別の項目名のクリックで、直前のアイコンは初期状態に戻る ・ソート機能は付けていない。 <style> table { border-collapse: collapse; } th { background-color: #ddd; } th, td { padding: 0 1em; height: 30px; line-height: 30px; font-size:1em; } thead th.icon { position: relative; padding-left: 30px; cursor: pointer; } thead th.icon::before { content: "▲"; display: inline-block; position: absolute; left: 4px; color: #eee; } tbody td:nth-child(n+3){ text-align: right; } </style> <table id="table4" border="1"> <thead> <tr> <th class="icon">No.</th> <th class="icon">NAME</th> <th class="icon">HEIGHT (cm)</th> <th class="icon">WEIGHT (Kg)</th> <th>BMI</th> </tr> </thead> <tbody> <tr><th>1</th><td>CHUBBY</td><td>160</td><td>90</td><td>37.1</td></tr> <tr><th>2</th><td>VICKY</td><td>156</td><td>60</td><td>24.7</td></tr> </tbody> </table>

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

カテゴリ