このカウントダウンに残り時間の数字の画像を表示させようとしています。ばっちり成功。これらの数字を画像に配置できるようにしようとしています。ついにやり遂げました。今、数字の表示を停止し、変更まで残り 1 日として画像に投影しようとしています。失敗した!また、カウントダウンが終了日に達したときに画像を変更したいと考えています (この場合はハッピーハロウィーンの画像)。失敗した!もう一つは、カウントダウンは翌日にまたイメージを変える必要があるということです。これが私の現在の状況です。イメージが変わるまでには至っていません。
function getImg(num) { var 数字 = String(num).split("")、 テキスト = ""; for (var i = 0; i'; } テキストを返します。 countdowntimer('2023 年 10 月 31 日 10:1 am', 'カウントダウン'); countdowntimer('02 20 2024 'newcountdown'); 関数 countdowntimer(dt, id) var end="新しい日付(dt);" _秒="1000;" _分="_秒" * 60; _hour="_分" _day="_hour" 24; タイマー; showremaining() now="new" date(); distance="終了" - 現在; if (距離 < 0) クリアインターバル(タイマー); document.getelementbyid(id).innerhtml="getImg(days)" ; 戻る; days="Math.floor(距離" _day); hours="Math.floor((距離" % _day) _hour); minutes="Math.floor((距離" _hour) _分); 秒="Math.floor((距離" _分) _秒); ' getimg(時間) '時間' getimg(分) '分 getimg(秒) '秒'; タイマー="setInterval(showRemaining," 1000); }< pre> body 背景色: 黒; 色: 黄色; p テキスト整列: 中央; フォントサイズ: 40px; h1.u-center フォントファミリー: セリフ; 表示ブロック; 2em; マージントップ: 0.10em; マージン-ボトム: 0.67em; テキスト装飾: 下線; フォントの太さ: 太字; #254441; フォント スタイル: イタリック体。 時間 幅: 75%; 境界線のスタイル: 挿入; 境界線の幅: 2px; 境界線の色: #ff5f04; 。親 位置: 相対的; トップ: 0; 左: .レスポンシブ 最大幅: 200ピクセル; 25%; 高さ: 自動; .response1 400ピクセル; 40%; 。容器 100%; .imageone 変換: 変換(74%, 00%); .imagetwo 絶対; 50%; 50%。 変換(-40%, -50%); 13%; .image2 150ピクセル; .image3 div.カウントダウン >画像カウントダウン< h1>
ハードコードされた ID の代わりにクラスとデータ属性を使用できます。