JSが絵柄デジタル時計を実現
|
この記事の例では、画像デジタル時計を実現するためのJSの具体的なコードを参考までに共有しています。具体的な内容は次のとおりです。 まず、これは私たちが用意した写真です
<!DOCTYPE html>
<html lang="ja">
<ヘッド>
<メタ文字セット="UTF-8">
<title>ドキュメント</title>
<スタイル>
</スタイル>
</head>
<本文>
<div>
<img src="img/0.png" alt="">
<img src="img/0.png" alt="">
<img src="img/10.png" alt="">
<img src="img/0.png" alt="">
<img src="img/0.png" alt="">
<img src="img/10.png" alt="">
<img src="img/0.png" alt="">
<img src="img/0.png" alt="">
</div>
<script type="text/javascript">
//関数関数get(){
//ページ画像を取得する
var img = document.getElementsByTagName('img');
//時間を取得する var date=new Date();
var hour=date.getHours();
var minute=date.getMinutes();
var secind=date.getSeconds();
//0を入力してください
時間<10の場合{
時間='0'+時間;
}そうでなければ(分<0){
分='0'+分;
}それ以外の場合（2番目）{
秒数='0'+秒数;
}
// 文字列連結 img[0].src='img/'+parseInt(hour/10)+'.png';
画像[1].src='img/'+hour%10+'.png';
img[3].src='img/'+parseInt(minute/10)+'.png';
img[4].src='img/'+minute%10+'.png';
画像[6].src='img/'+parseInt(secind/10)+'.png';
画像[7].src='img/'+secind%10+'.png';
}
得る（）;
間隔を設定します(取得、1000);
// 1 秒ごとに更新するために呼び出します</script>
</本文>
</html>最終的な実装
以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: Nginx proxy_pass の / スラッシュによって引き起こされた殺人事件の詳細な説明
>>: MySQL マスタースレーブスイッチチャネルの問題の解決策
推薦する
データディレクトリとmy-default.iniなしでMYSQL5.7.24をインストールし、サービスが起動しない場合に最適なソリューション
MySQL公式サイトのダウンロードアドレス: https://dev.mysql.com/downl...
Angular Cookie の読み取りおよび書き込み操作コード
Angular Cookie の読み取りおよび書き込み操作のコードは次のようになります。 var a...
MySQL トリガーの原理と使用例の分析
この記事では、例を使用して、MySQL トリガーの原理と使用方法を説明します。ご参考までに、詳細は以...
MySQL 5.5 で範囲パーティションを追加および削除する例
導入RANGE パーティション分割は、指定された連続した間隔範囲に基づいています。RANGE の初期...
ethers.js を使用して Solidity スマート コントラクトをデプロイする方法
Ethereum 上で DApps を開発したことがある場合は、フロントエンド JavaScript...
MIME エンコーディングの概要 (オンライン情報と実際の経験から統合)
1. MIME: 多目的インターネットメール拡張インペリアル カレッジ オブ コンピュータ オンラ...
HTML で自動ページジャンプを実現する 5 つの方法
前回の記事では、HTML ページが 3 秒後に自動的にジャンプする一般的な 3 つの方法を紹介しまし...
Vue 仮想 Dom から実際の Dom への変換
別のツリー構造があるJavascriptオブジェクトでは、このツリーが本物であると伝えるだけでよいD...
JS で if 判定をスムーズに行う方法
目次序文コードの実装アイデア 1アイデア2要約する参照ドキュメント序文プロジェクト内の小さな要件ポイ...
MySQL の時間タイプとモードの詳細
目次1. MySQL の時刻型2. タイムゾーンを確認する3. 不正な時間値4. 厳密モード5. 事...
CentOS7 で yum ソースをインストールし、コマンド rz と sz をアップロードおよびダウンロードする方法 (画像付き)
** CentOS7 で yum ソースをインストールし、rz および sz コマンドをアップロー...
MySQL を使用して Excel でデータ生成を完了する方法
Excel は、データ分析に最もよく使用されるツールです。この記事では、MySQL と Excel ...
MySQL イベント変更イベント (ALTER EVENT)、イベントの無効化 (DISABLE)、イベントの有効化 (ENABLE)、イベント名の変更、およびデータベース イベントの移行操作の詳細な説明
この記事では、例を使用して、MySQL イベントの変更 (ALTER EVENT)、イベントの無効化...
Jenkins Docker 静的エージェント ノードのビルド プロセス
静的ノードはマシン上に固定されており、いくつかの固定コマンドを通じて起動されます。動的ノードには複数...
WeChat公式アカウントでReactプロジェクトを実行する方法
目次1. a タグを使用して PDF をプレビューまたはダウンロードします。書き方は、携帯電話でクリ...