JavaScript

CSS, JS 奥行がある描画のテクニック CSS, JavaScript スキルアップのための問題を作りました。 [問題] CSSで、地球と月に見立てた図形を表示させます。 JavaScriptで、赤色の月の軌跡、真円を描画します。 スライダーを動かすと月の軌跡を変えられるようにします。 その際、月の位置は追随します。 角度により、赤い奇跡の一部が地球の裏側になる場合があります。 ＜仕様＞ ・jQuery等のプラグインは用いない ・画像、Canvasを用いないこと ・必ず月は赤色の奇跡上にあること ・コンテナは青色で サイズは縦横とも 400px ・地球は緑色で サイズは直径 130px ・奇跡は赤色で 直径は 270px ・月は黄色で 直径は 26px HTMLソースは以下のとおり <div><!-- レンジスライダー --> 角度：<input type="range" id="slider" min="0" max="90" step="1" value="0"> <span>0</span> </div> <div class="container"> <div id="earth"></div> <div id="moon"></div> </div> CSS, JavaScriptのコードができたら回答してください。 腕試しをしたい方、ポイ活の方、 スキルアップを望む方の回答をお待ちしています。

JavaScript 表から倍率の自動計算 JavaScript スキルアップのための問題を作りました。 ＜仕様＞ ・jQuery等のプラグインは用いない ・表から「地球」の直径を取得する ・惑星それぞれの直径を取得して倍率を算出する ・「メモ」欄のSPAN要素に結果を出力する HTMLソースは以下のとおり <table id="table1"> <thead> <tr> <th>惑星の名</th> <th>直径 (km)</th> <th>メ　モ</th> </tr> <thead> <tbody> <tr> <td>地球</td> <td>6,371 </td> <td>大きさ基準 1 とする</td> </tr> <tr> <td>木星</td> <td>69,911</td> <td>地球の<span></span>倍の大きさ</td> </tr> <tr> <td>土星</td> <td>58,232</td> <td>地球の<span></span>倍の大きさ</td> </tr> <tr> <td>天王星</td> <td>25,362</td> <td>地球の<span></span>倍の大きさ</td> </tr> <tr> <td>海王星</td> <td>24,622</td> <td>地球の<span></span>倍の大きさ</td> </tr> </tbody> </table> JavaScriptのコードができたら回答してください。 腕試しをしたい方、ポイ活の方、 スキルアップを望む方の回答をお待ちしています。

javascriptでwhileを使って、数字をいくつか入力して、最大値を表示するプログラムの作り方を教えてください。

CSS, JavaScript　列３のスライドアニメーション スキルアップのための問題を作りました。 ＜仕様＞ ・チェックを入れたら「列３」が表から出て来る ・チェックを外したら「列３」が表の中へ隠れる ・画像、jQuery等のプラグインは用いない ・「列３」の表示・非表示はスライドアニメーション ・スライドアニメーションはCSS, JavaScriptのいずれでもOK！ ・LABEL要素は使用しません ・CLASS名、ID名を付けるのは任意です HTMLソースは以下のとおり <input type="checkbox">列３を見る <div> <table> <thead> <tr> <th>列1</th> <th>列2</th> <th>列3</th> </tr> </thead> <tbody> <tr> <td>データ1-1</td> <td>データ1-2</td> <td>データ1-3</td> </tr> <tr> <td>データ2-1</td> <td>データ2-2</td> <td>データ2-3</td> </tr> </tbody> </table> </div> 腕試しをしたい方、 スキルアップを望む方の回答をお待ちしています。

LABELをもとにチェックボックスを作れますか？ CSSとJavaScriptのスキルアップのための問題を作りました。 ＜仕様＞ ・与えられたLABEL要素をもとにチェックボックスを作る ・チェックを入れたらコンソールログに「on」と出力 ・チェックを外したらコンソールログに「off」と出力 ・画像、リンクは用いないこと ・jQuery等のプラグインは用いないこと ・HTMLソースは次のとおり 　<label class="mylabel">チェックボックス</label> できたらコードを教えてください。 スキルアップを望む方からの回答をお待ちしております。

JavaScript forループを用いずに列の表示制御 スキルアップのための問題を作りました。 チェックボックスと表があります。 次の仕様に基づいた処理を JavaScriptでできますか？ できるだけ簡潔なコードの回答をお待ちします。 ＜仕様＞ ・初めはすべての列を表示にしておく ・チェックアウトしたら、その列を非表示にする ・チェックインしたら、再び表示させる ・jQuery等のプラグインは用いないこと ・「forループ」は用いないこと　(ここがポイント) ＜HTML＞ <form> チェックアウトで列を非表示： <label><input name="check" type="checkbox">列１</label> <label><input name="check" type="checkbox">列２</label> <label><input name="check" type="checkbox">列３</label> <label><input name="check" type="checkbox">列４</label> <label><input name="check" type="checkbox">列５</label> </form> <table> <thead> <tr> <th></th> <th>列 1</th> <th>列 2</th> <th>列 3</th> <th>列 4</th> <th>列 5</th> </tr> </thead> <tbody> <tr> <th>行 1</th> <td>cell1-1</td> <td>cell1-2</td> <td>cell1-3</td> <td>cell1-4</td> <td>cell1-5</td> </tr> <tr> <th>行 2</th> <td>cell2-1</td> <td>cell2-2</td> <td>cell2-3</td> <td>cell2-4</td> <td>cell2-5</td> </tr> <tr> <th>行 3</th> <td>cell3-1</td> <td>cell3-2</td> <td>cell3-3</td> <td>cell3-4</td> <td>cell3-5</td> </tr> <tr> <th>行 4</th> <td>cell4-1</td> <td>cell4-2</td> <td>cell4-3</td> <td>cell4-4</td> <td>cell4-5</td> </tr> <tr> <th>行 5</th> <td>cell5-1</td> <td>cell5-2</td> <td>cell5-3</td> <td>cell5-4</td> <td>cell5-5</td> </tr> </tbody> </table>

JavaScript forループを用いずに列の表示制御 スキルアップのための問題を作りました。 チェックボックスと表があります。 次の仕様に基づいた処理を JavaScriptでできますか？ ＜仕様＞ ・初めはすべての列を表示にしておく ・チェックアウトしたら、その列を非表示にする ・チェックインしたら、再び表示させる ・jQuery等のプラグインは用いないこと ・「forループ」は用いないこと　(ここがポイント) ＜HTML＞ <form> チェックアウトで列を非表示： <label><input name="check" type="checkbox">列１</label> <label><input name="check" type="checkbox">列２</label> <label><input name="check" type="checkbox">列３</label> <label><input name="check" type="checkbox">列４</label> <label><input name="check" type="checkbox">列５</label> </form> <table> <thead> <tr> <th></th> <th>列 1</th> <th>列 2</th> <th>列 3</th> <th>列 4</th> <th>列 5</th> </tr> </thead> <tbody> <tr> <th>行 1</th> <td>cell1-1</td> <td>cell1-2</td> <td>cell1-3</td> <td>cell1-4</td> <td>cell1-5</td> </tr> <tr> <th>行 2</th> <td>cell2-1</td> <td>cell2-2</td> <td>cell2-3</td> <td>cell2-4</td> <td>cell2-5</td> </tr> <tr> <th>行 3</th> <td>cell3-1</td> <td>cell3-2</td> <td>cell3-3</td> <td>cell3-4</td> <td>cell3-5</td> </tr> <tr> <th>行 4</th> <td>cell4-1</td> <td>cell4-2</td> <td>cell4-3</td> <td>cell4-4</td> <td>cell4-5</td> </tr> <tr> <th>行 5</th> <td>cell5-1</td> <td>cell5-2</td> <td>cell5-3</td> <td>cell5-4</td> <td>cell5-5</td> </tr> </tbody> </table>

JS, CSS「みつどもえ」のマークを作れますか？ スキルアップのための問題を作りました。 CSSとJavaScriptで三つ巴（みつどもえ）のマークを作ります。 巴のマークをオタマジャクシの頭と尻尾に見立てた場合、 それぞれをどのように作りますか？ ＜仕様＞ 1. 大円の直径を100px、小円１つの直径はその46％の長さ。 2. CSSとJavaScriptのコードだけで作成する。 3. Canvas、画像、jQuery等のプラグインは用いないこと。 ＜HTML＞ <div class="wrapper"> <div class="container"></div> </div>

JavaScript 引き戸のアニメーション JavaScriptの問題を作ってみました。 ここに10枚のの引き戸があります。 「指定の引き戸だけ」をクリックしたら、その他は片付けられます。 「すべて表示」をクリックしたら、すべての引き戸が元の位置に戻ります。 次の仕様を満たすには、どのようなコードになりますか？ ＜仕様＞ ・引き戸の色は、指定の引き戸は「Tan」、他は「Bisque」 ・１枚の引き戸サイズは、横が70px、縦が100px ・ラジオボタンで引き戸の表示制御をする ・表示・非表示は、すべてスライド・アニメーションさせる ・「指定の引き戸だけ」の時は、それだけが隙間なく並べられる ・１・４・７・１０の引き戸は片付けません。

JavaScript 次に示すような多重連想配列（階層型オブジェクト）があります。 ここから書式に基づいてコメントを別の配列に格納するには どのようなコードを書けばよいですか？ [書式] commentArray[key][subKey] = "コメント"; [格納例] commentArray['05'][3] = "Tommy Walters"; commentArray['12'][9] = "Trio Esperança"; ------------------------------------------------ var commentArray = []; //コメント格納用配列 var nestedObject = { '05': { 1: 0, 2: 6, 3: 2, // Tommy Walters 4: 22, 5: 15, 6: 13, 7: 17, 8: 3, 9: 7, 10: 23, //Kenny Rogers 11: 24, 12: 10, //Jose Afonso 13: 14, 14: 20, 15: 4, 16: 11, // The Beatles 17: 1, 18: 9, 19: 29, //Styx 20: 21 }, '12': { 1: 5, 2: 14, 3: 26, 4: 2, //Steppenwolf 5: 29, 6: 21, 7: 10, 8: 24, 9: 12, //Trio Esperança 10: 28, 11: 23, 12: 22, 13: 0, 14: 1, 15: 7, 16: 16, 17: 18, 18: 19, 19: 20, 20: 27 // Alain Barrière } };

<script>$(function(){$('img.lazy').lazyload({threshold:800});});</script> javascriptのlazyloadを導入するため、以下のような記述でオプションにthresholdを適用すると添付画像のようなエラーが表示されます。なぜだかわからず、大変恐れ入りますがどなたか有識者の方教えていただけませんでしょうか。 ちなみにオプションをつけない、またはthresholdでないオプションであればエラーが出ず問題なく実行されます。 よろしくお願いいたします。

try { var inputPDF = this; // 現在開いているPDFを参照 var numPages = inputPDF.numPages; for (var i = 0; i < numPages; i++) { var newDoc = app.newDoc(); // 新しいPDFを作成 newDoc.insertPages({ nPage: 0, cPath: inputPDF.path, nStart: i, nEnd: i }); // ファイル名にページ番号を付けて保存 newDoc.saveAs(inputPDF.path.replace(".pdf", "_page_" + (i + 1) + ".pdf")); newDoc.closeDoc(); // newDoc.close() -> newDoc.closeDoc() に修正 } } catch (e) { console.println("エラーが発生しました: " + e); } 上記は、AdobeAcrobatpro上で使用しているJavascriptです。 チャットgptに考えてもらい、実践すると、数ページあるpdfを1ページずつのpdfに分割されます。ただ、pdfの1ページ目が空白ページになります。 空白なし、綺麗に分割できないでしょうか？

Amazonのサイトのように、レスポンシブ対応でPCサイズであれば「カルーセル」、スマホサイズであれば「横スクロール」にするプラグインを探しておりますが、中々見つかりません。 どなたか使用したことある、もしくは知っていらっしゃるという方、ぜひとも教えていただきたく存じます。 なにとぞよろしくお願いいたします。

display:noneの動作をゆっくり実行して、スーッと消えていくようにしたいです。 以下のコードで試しましたが、パッと消えてしまいます。 ファーストビューの1/10よりも大きく動かすと消えるようにしたつもりです。 【HTML】 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" type="text/css" href="./css/reset.css"> <link rel="stylesheet" type="text/css" href="./css/slow_hide.css"> </head> <body> <div class="test1"> <p class="locate">■</p> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script> <script src="./js/slow_hide.js"></script> </body> </html> 【CSS】 .test1{ height: 500px; width:600px; background-color: yellow; position: relative; } .locate{ position: absolute; top:200px; left:220px; } .parts_hide{ display:none; transition: display 10.0s; } 【JS】 $(function () { $(window).on("scroll", function () { const fvHeight = window.innerHeight; if (fvHeight / 10 < $(this).scrollTop()) { $(".locate").addClass("parts_hide"); } else { $(".locate").removeClass("parts_hide"); } }); }); display:none; はゆっくり動作できないのでしょうか？

孫iframeから親，祖親のjava scriptを実行したい（背景を変えたい） URL: http://motinora.mydns.jp/test/ 構成は以下の如くです． index.html (main)-iframe01:ID header iframe02:ID base ----- iframe03:ID header2 iframe04:ID base2 ここで，孫に当たるiframe04のインプットボタンで，祖親（親，兄弟（iframe03））ウインドウの背景を変えるべく，記事を見ながら試したのですが上手く動きません．以下はiframe04.htmです．各々のhtml内のスクリプトは当然ですが動いています．よい方法をご教示ください． （OS　Win11 pro,　インターネット オプションション ローカルイントラネット　スクリプト許可になっています．　） <!DOCTYPE html> <html lang="ja"> <head> <meta charset="sjift_jis" content="text/html"> <title>iframe04</title> <script type="text/javascript"><!-- function fig(file,text){ var html01 = ''; html01 += '<img src="'+file+'" >'; html01 += '<br clear="all"><span style="color:silver;">' + text + '</span></font>'; document.getElementById('fig').innerHTML = html01; document.body.background='./zback.gif'; } function ret01(){ var html02 = ''; html02 += '<img src="./red.jpg" altt="fig" ><br clear="all"/>'; document.getElementById('fig').innerHTML = html02; document.body.background =''; parent.document.body.background=''; } function mo04a(){parent.document.body.background='./zback.gif';} function mo04b(){header2.document.body.background='./zback.gif';} function mo04c(){base.document.body.background='./zback.gif';} function ret04(){ } function call(){window.opener.myFunc();} function change(){window.parent.document.querySelector("iframe[name='base']").document.querySelector("body").background= "zback.gif";} //--></script> </head> <body> <span style="color:#ff8286">iframe04_ifr04.htm Id:base2</span> <br> <input type="button" value="clic_fig01" style="width:68px;" onclick="fig('white.jpg','White')" > <input type="button" value="Ret" style="border:1px solid #505050;" alt="click" onmouseover="ret01()" > <input type="button" value="on4a" onmouseover="mo04a()"onmouseout="ret04()"> <input type="button" value="on4b" onmouseover="mo04b()"onmouseout="ret04()"> <input type="button" value="on4c" onmouseover="window.opener.mo02()";> <br> <input type="button" value="change" onclick="change()";> <br> <div id="fig"> <img src="./red.jpg" border="0" alt="fig"> <br clear="all" > </div> </body> </html>

closestとは、最も近い要素を取得するメソッドのようなので、クロース・ステートメント？　要素はelementですよね。 ご存じの方、いらっしゃいませんか？

処理 処理 処理 という状態で、強制的に停止させ、それ以降に処理が流れないような関数を作りたいです。 処理 exit(true) ; 処理 処理 などと書き込むことで、どこでも止められるようにしたいです。 JavaScriptにはexit命令はないそうで、try～catch文だと私の書き方がマズいのか抜けて処理を継続しようとします。 よろしくお願いしいます。

Javascriptを使って、HTMLファイルの一部を表示させようとしています（ローカルで動かしています）。 <body> <input type="file" id="fileInput"> <pre id="output"></pre><!-- ここに取得した内容を表示する --> <script> document.getElementById('fileInput').addEventListener('change', function(event) { const file = event.target.files[0]; // ユーザーが選択したファイルを取得 const reader = new FileReader(); // FileReaderオブジェクトを作成 reader.onload = function(event) { document.getElementById('output').textContent = event.target.result; // ファイルの内容を表示 }; reader.readAsText(file); // ファイルをテキストとして読み込む }); </script> </body> event.target.result に読み込んだHTML文がそのまま入ります。 このファイルから、getElementsByTagName('li')などを使って、特定のHTML文のみを取り出し、ページに表示させようとしています。 documentのメソッドが使えないかなと思って、 let doc = new document; console.log(doc.getElementsByTagName('li')[0]); と書いてみましたが反応なしでした。 DOMは便利なので他のページや読み込んだHTMLファイルに対しても使いたいのですが……。 よろしくおねがいします。

JavaScriptにblurイベントというのがあります。 このblurとは何の略なのでしょうか？

jsについて質問です。 ①初回のみローディング画像（gif）を表示して、２度目以降は表示しない ②ローディング画像が消えるときはふわっとフェードアウトする ということをやりたいです。 ①のみだけならできたのですが、フェードアウトをいれると、ローディング画像が一瞬で消えてしまったり、ずっとローディング画像が表示されたままだったり、うまくいきませんでした。 参考にしたサイトがclassの追加だったので、フェードアウトはcssでkeyframe変更すればいいのかと思ったのですが、jsを修正すべきでしょうか？ ●html <div class="splash"> <div class="splash-animation"> <img src="image/load.gif"> </div> </div> ●css .splash-animation { position: fixed; top: 0; left: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background-color: #ffffff; z-index: 1000; } .splash.is-active { opacity: 0; visibility: hidden; } .splash-animation.is-active { opacity: 1; visibility: visible; } ●js $(function () { var webStorage = function () { if (sessionStorage.getItem('access')) { $(".splash").addClass('is-active'); } else { sessionStorage.setItem('access', 'true'); $(".splash-animation").addClass('is-active'); setTimeout(function () { $(".splash").addClass('is-active'); $(".splash-animation").removeClass('is-active'); }, 3000); } } webStorage(); });