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 マスタースレーブスイッチチャネルの問題の解決策
推薦する
lastInfdexOf 関数の MySQL 実装例
MySQL では lastIndexOf に似た関数を使用する必要がある場合もありますが、すぐに使用...
Windows 7 64 ビットに最新バージョンの MySQL サーバーをインストールする方法のグラフィック チュートリアル
最近、MySQL データベースを勉強していて、設定ファイルを頻繁に変更したため、MySQL データベ...
React Nativeがシミュレータにリンクできない件について
React Native は、現在人気のオープンソース JavaScript ライブラリ React...
Win7 x64 に解凍版の mysql 5.7.18 winx64 をインストールするとサービスが起動できない問題を解決します
今日、mysql の公式サイトから mysql-5.7.18-winx64.zip をダウンロードし...
MySQL Community Server 8.0.11 のインストールと設定方法のグラフィックチュートリアル
最近、MySQL を始めとしてデータベースの知識を勉強し始めました。以下では、皆さんの参考になるよう...
オブジェクト指向の観点から Vue コンポーネントを理解するための簡単な分析
同じ関数や HTML コードが複数回使用される場合は、それらをコンポーネントに抽出することを検討でき...
フォーム検証機能を実装するためのネイティブ js
目次開発の際には、機能を段階的に分析して実装することで、明確な考え方を保つことができます。 1. フ...
VUEはG2チャートを使用した実装を導入します
目次G2チャートについて使用テンプレートで使用される完全なコード (棒グラフ)世界地図を追加するG2...
MySQL カーディナリティ統計の簡単な分析
1. カーディナリティとは何ですか?カーディナリティとは、MySQL テーブルの列内の異なる値の数を...
OracleデータをMySQLデータベースに抽出する実装プロセス
Oracle データベースから MySQL データベースへの移行では、Oracle データベース モ...
SELINUXの動作原理の詳細な説明
1. はじめにSELinux が Linux にもたらす主な価値は、柔軟で構成可能な MAC メカニ...
Docker での環境変数の使用とよくある問題の解決策
序文Docker はコンテナの環境変数を設定できます。設定方法は 2 つあります。イメージを作成する...
aタグ内のテキストを非表示にして画像を表示するには？360モードレンダリングに対応
多くの場合、画像を表示する<a>タグのスタイルに遭遇しますが、タグ内にテキストがあり、そ...
IE6/7 で絶対配置された要素が不可解に消えたりブロックされたりする問題を解決する方法
1. 絶対配置レイヤーの隣接フローティング レイヤーの幅が親レイヤーの幅と等しくなく、フロートがクリ...
vue3.0+でtinymceを使用して複数画像のアップロード機能とファイルアップロード式の編集を実装する方法
関連文書この記事の一部は、https://www.cnblogs.com/zhongchao666/...