この記事では、ネイティブ JS で実装されたデジタル時計エフェクトを紹介します。エフェクトは次のとおりです。 上記の数字は、次の 10 枚の画像を使用して生成されています。 実装コードは以下のとおりです。コピーして貼り付けてご利用ください。 <!DOCTYPE html> <html> <ヘッド> <meta http-equiv="コンテンツタイプ" コンテンツ="text/html; charset=utf-8" /> <title>デジタルテーブルの特殊効果を実現するネイティブ JS</title> <スタイル> 体 { 背景: 青; 色: 白; フォントサイズ: 30px; } #div1 { 幅: 220ピクセル; 高さ: 36px; 位置: 固定; 左: 50%; 上位: 50%; 変換: translate(-50%, -50%); 境界線: 1px #FFF 実線; } #div1 画像 { 幅: 25px; 高さ: 36px; 位置: 相対的; } </スタイル> <スクリプト> window.onload = 関数(){ //すべての画像を取得します var aImg = document.getElementsByTagName('img'); //ローカル時間オブジェクトを取得します。var oDate = new Date(); //時間 + 分 + 秒 var prevStr = toZero(oDate.getHours()) + toZero(oDate.getMinutes()) + oDate の秒数をゼロにします。 //次回のために文字列変数を宣言します var nextStr = ''; // 同時に変化する秒数は複数桁になる可能性があるので、それを格納する配列を作成します。var arr = []; var タイマー = null; // i 番目の img 画像の src アドレスは、img の下の現在の時刻の i 番目の桁に対応する画像名です //104604=> charAt(i) を介してそれぞれ 1 から 6 までの文字を取得します。つまり、1、0、4、6、0、4 です (var i = 0; i < aImg.length; i++) の場合 { aImg[i].src = 'images/' + prevStr.charAt(i) + '.png'; }; // toChange メソッドを 1 秒ごとに実行するようにタイマーを設定します。setInterval(toChange, 1000); //次回取得関数toChange() { //ローカル時間オブジェクトを取得します。var oDate = new Date(); //時間 + 分 + 秒 nextStr = toZero(oDate.getHours()) + toZero(oDate.getMinutes()) + oDate の秒数をゼロにします。 //前回の時間と次回の時間を比較します toCom(prevStr, nextStr); //次の 1 秒を現在の時刻に割り当て、変更を続けます。prevStr = nextStr; }; //前回の時間と次回の時間を比較する function toCom(str1, str2) { // 比較する前に、前の値をクリアして再割り当てします。arr = []; //最初の各桁を走査します for (var i = 0; i < str1.length; i++) { // 1 つの文字が次の文字と異なる場合 if (str1.charAt(i) != str2.charAt(i)) { //配列にプッシュします arr.push(i); } } //画像反転を実行します startMove(); }; //画像反転関数 function startMove() { //画像の高さを36px、2番目の縮小を-4pxに設定 var iSpeed = -4; //タイマーを設定する timer = setInterval(function () { //配列内の最後の時刻と次の時刻が変更された文字列をループします for (var i = 0; i < arr.length; i++) { //配列内の異なる文字に対応する名前の画像の高さが0に等しい場合 (aImg[arr[i]].offsetHeight == 0)の場合{ //変化速度を4pxずつ増加するように設定する iスピード = 4; //異なる文字の名前に対応する画像の位置は、img 内の次の時刻の i 番目の桁に対応する画像名に等しくなります //i は 2 つの時刻変更が配置されている桁を表し、arr[i] は特定の番号を取得します aImg[arr[i]].src = 'images/' + nextStr.charAt(arr[i]) + '.png'; } //配列内の異なる文字の名前に対応する画像の高さは、そのコンテンツの高さから毎回4pxを引いた値に等しくなります。 //style.heightとoffsetHeightの高さに注意してください。aImg[arr[i]].style.height = aImg[arr[i]].offsetHeight + iSpeed + 'px'; //配列内の異なる文字の名前に対応する画像の上部の値は、そのコンテンツの高さの半分から 18px を引いた値に等しい //画像が変わるたびに中央に表示されるようにするには、aImg[arr[i]].style.top = aImg[arr[i]].offsetHeight / 2 - 18 + 'px'; //画像の高さが最大の高さ36pxに達したときif (aImg[arr[i]].offsetHeight == 36) { //タイマーをクリアする clearInterval(timer); } } }, 10); }; // ローカル時刻を取得します。1 の位が 10 未満で、10 の位が 0 の場合、そのようなことはありません。カプセル化された関数 toZero(num) { (数値<10)の場合{ '0' + 数値を返します。 } それ以外 { '' + num を返します。 } } }; </スクリプト> </head> <本文> <div id="div1"> <img src="images/0.png" /> <img src="images/0.png" />: <img src="images/0.png" /> <img src="images/0.png" />: <img src="images/0.png" /> <img src="images/0.png" /> </div> </本文> </html> 以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
>>: DockerコンテナにPythonアプリケーションをデプロイするプロセスの分析
長い間何もしていなかった人は、努力をすると一生懸命働いていると思うようになります。 1. 問題Nav...
ビンログBinLog は、データベース テーブル構造の変更 (テーブルの作成、変更など) とテーブル...
マイクリMyCLI は、自動補完と構文の強調表示を備えた MySQL、MariaDB、および Per...
目次プロジェクトの背景始めるvue-cliでプロジェクトを作成するモバイル適応についてnormali...
MySql でリモート接続を許可する方法この目標を達成するには、2つのことを行う必要がある。ユーザー...
ディレクトリ構造 。 │ .env │ docker-compose.yml │ └─mysql ├...
目次1.スリープ機能2.タイムアウトを設定する3. 約束4. 非同期待機5. 1秒後に出力1、2秒後...
I. はじめにまず、MySQL のバージョンについて説明します。 mysql> バージョンを選...
序文インターネット上にはデータベースの最適化に関する情報や方法が数多くありますが、その多くは品質にば...
この記事には、細かい点は一切なく、カラーマッチングのテクニックをシェアするだけです。とてもシンプルで...
この記事では、Windows 8 での MySQL5.6 のインストールと設定のチュートリアルを記録...
1. JDKをインストールする1.1 現在の仮想マシン環境にJDKがあるかどうかを確認する rpm ...
1. マスター'x@xxxx:x'への接続エラー- 再試行時間: 60 再試行回数:...
目次1. JSの特徴1.1 マルチパラダイム1.2 説明1.3 シングルスレッド1.4 ノンブロッキ...
Vue コンポーネントをカプセル化する場合でも、機能コンポーネントをクロスファンクショナルに使用しま...