JavaScript – Trying to be a front-end engineer by Chihiro Sakyo

【JavaScript】モーダルウィンドウ出現

ボタンを押すとふわっと出現するモーダルウィンドウを実装したい。ボタンを押すと、showクラスを追記するJS。このクラスを追加したり消したりするのよく使ってる気がする。今回はopacity:0➡︎opacity:1で出 […]

スクロールイベントを調べてて、スクロール位置を取得して表示したいやつ。（めっちゃ単純なやつ）jQueryのコードを先に見てて、JavaScriptで書いてみたやつ。 box内をスクロールすると、スクロールした位置を取得し […]

弊社で絶対と言っていいほど使われている、スクロールしたら下からにょろっと出てくるフローティングバナーについて。弊社のほとんどのサイトがWPなのですが、テーマは弊社のテンプレート使用。それにはもうバリバリjQueryで書 […]

小さい（小さすぎる）めも。 ◆jQuery .text()テキストを取得する。テキストの追加・変更。下記の例では、pタグのテキストを「変更前」から「変更後」へ変更する。 ◆JavaScript .textContentJ […]

先日、業務でスライダーを作らなければならない場面で、弊社はよくこのbxSliderを使用してスライダーを作ってると教えてもらったのでメモ。【bxSlider】https://bxslider.com/ 今回はCDN使用し […]

業務でプルダウンメニュー実装した流れで自分でも作ってみようと思ったんだけど、ちょっとコードが長く難しかったので、わかりやすい奴を引っ張ってきてわかることから慣れていこう作戦。んで、最近思うことが、jquery勉強したこ […]

【DOMツリー階層関係からの要素指定方法】 ①例：ulの子要素liを取得したい場合ul.childNodes(ulの全ての子ノードを取得)ul.children(ulの中の全ての子要素ノードだけを取得)ul.firstC […]

ドットインストールでDOM編に入ってみた。以前にドットインストールでおみくじやストップウォッチを作成していた際に、わからない。。となっていた部分がやっているじゃないか。ここすっ飛ばして作成していたという事実を初めて知った […]

ストップウォッチの続き。前回カウントアップの実装までしたので、停止/リセットの実装をする。クリックイベントの追加。 ①stopボタンをクリックした際に、setTimeoutのキャンセルをしたい。clearTimeoutに […]

ストップウォッチ制作復習続き。カウントアップをブラウザに表示させるまでの処理。ここも意外と長いのです。関数countUp()処理を抜き出します。カウントアップの処理はミリ秒で取得されていたから、分/秒/ミリ秒で表示させ […]