PR

文字点滅のデューティ比を可変するプログラムを紹介【JavaScript】

フロントエンド

文字の表示:非表示を1:4の割合にしたいです…

こうした悩みを解決します。本記事はココナラ受注案件です。

姫野秀徳

組み込みエンジニアとしてメーカー勤務10年。
第二種電工事士、基本情報技術者、Code.org認定教師。
microbitを用いた電子工作&プログラミング教室を開校。
組み込み開発の実際を発信するyoutube活動も行う。

無料で学べる組み込み開発オンラインスクールはじめました!
https://kumicla.tatepro.com

姫野秀徳をフォローする

サンプルプログラム

はじめに本記事で制作するプログラムのサンプルを示します。

テキストを1.5秒表示、0.5秒非表示(=デューティ比0.75)で切り替えるプログラムです。

デューティ比とは

デューティ比(Dと表現する)は、1周期中のオン時間の割合を表す電気の業界でよく使われる単語です。

たとえば、表示=1秒、非表示=4秒だと、D = 1 / (1+4) = 0.2と表します。

私もともと組込みエンジニアでC言語だけでなく電気回路も扱ってたので、デューティと言われると分かるのですが、純粋なIT系だと何て言うんでしょう?同じ?

まあいいです、それはそれとして、

今回JavaScriptでON=3秒、OFF=1秒の周期で文字を点滅させたいという依頼を受けました。

デューティ比を変更する

周期を決めるのにsetInterval関数、ON/OFF切り替えタイミングを決めるのにsetTimeout関数を用いてデューティ比を決めます。

setIntervalは(処理, 実行間隔)の2つの要素を引数として定義される関数で、setInterval関数の呼び出しから実行間隔(ミリ秒単位)毎に処理を行います。

この処理は単一のものに限らず、別に定義した関数を割り当てることもできます。

また、setTimeoutは(処理、実行タイミング)の2つの要素を引数として定義される関数で、setTimeout関数の呼び出しから実行タイミング(ミリ秒時間)経過後に1度だけ処理を実行します。

この処理も単一のものに限らず、別に定義した関数を割り当てることもできます

setInterval()もsetTimeout()も似てますね。定期実行か単発実行かの違いだけです。

それで、プログラムの組み方について、

例えば1秒周期でON(またはOFF)を繰り返し、ON→OFF(またはOFF→ON)の切り替えを0.7秒毎に繰り返すなら、

・setInterval(ON関数, 1000)
・setTimeout(OFF関数, 1000*0.7)

となります。

そして考え方として大事なのが、setTimeout()を呼び出すタイミングで、setInterval()の中にsetTimeout()を入れることでそれぞれの始点がほぼ同じになりますね。

まとめ

・デューティ比(Dと表現する)は、1周期中の点灯時間の割合を表す電気の業界でよく使われる単語です
・周期を決めるのにsetInterval関数、ON/OFF切り替えタイミングを決めるのにsetTimeout関数を用いてデューティ比を決めます

立科プログラミングはウェブページの新規作成、機能追加、修正などの依頼を受け付けております。
まずはお気軽にご連絡いただければと思います!よろしくお願いいたします

この内容が良いと思ったら、いいね💖を押して教えてください!

組みクラ – 組み込み開発を学び、未来を創るエンジニアへ
無料で学べる!組み込み開発の基礎から応用までをマスターできるオンラインスクール「組みクラ」

組み込みエンジニアは、あらゆる産業の基盤を支える重要な職業です。
私たちタテプロは、次世代の組み込みエンジニアを育成し、業界の競争力を高めるために活動しています。
あなたも、無料で学べる「組みクラ」で、組み込み開発のスキルをしっかり身につけ、キャリアを加速させましょう!
今すぐ学び始めて、将来の自分をステップアップさせる第一歩を踏み出しませんか?

\立プロとLINEで友だちになりませんか/
立プロと友だちになる
フロントエンド
シェアしていただけると嬉しいです!
タイトルとURLをコピーしました