ホームページ > 記事 > ウェブフロントエンド > HTMLでカウンターとクロック関数のコードを実装する方法
この記事の内容は、HTML でのカウンターとクロック関数のコードの実装方法についてです。必要な方は参考にしていただければ幸いです。
多くの Web ページではカウンターや時計が表示されますが、この機能を自分で実装するにはどうすればよいでしょうか?
まずカウンターについて話しましょう。カウンターの論理機能は非常に単純です。つまり、秒針は 1 秒ごとに 1 つずつ増え、60 ごとに 1 つ進みます。コードは以下の通りです:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> </head> <body> <div></div> <script> var index = 0; var i=0; /** * 对时间进行预先处理,逢60进一 */ function counter(){ second = index; minute=i; index++; if(second==60){ second=0; i++; index=0; } if(second<10){ second = "0"+second; } if(minute<10){ minute="0"+minute; } return time = minute +":"+second; } /** * 将获得的时间插入到div的区域 */ function show(){ var time = counter(); document.getElementsByTagName("div")[0].innerHTML=time; } /** * 每秒钟获得一次时间,实现计数功能 */ function set(){ setInterval("show()",1000); } show(); set(); </script> </body> </html>
このようにして、簡単なカウンターが完成します。
時計関数のコード:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script> /** * 向Date类中添加获取当前时间的方法 */ Date.prototype.currentTime = function(){ var year = this.getFullYear(); var month = this.getMonth()+1; var day = this.getDate(); var week = this.getDay(); week = "星期"+"日一二三四五六".charAt(week); month = month<10 ? "0"+month : month; day = day < 10 ? "0"+day : day; var hour = this.getHours(); var second = this.getSeconds(); var minute = this.getMinutes(); hour = hour<10 ? "0"+hour : hour; second = second < 10 ? "0"+second : second; minute = minute < 10 ? "0"+minute : minute; return year+"-"+month+"-"+day+" "+week+" "+hour+":"+minute+":"+second; } function showTime(){ var time = new Date().currentTime(); document.getElementById("show").innerHTML = time; } function setTime(){ showTime(); setInterval("showTime()",1000); } window.onload = function(){ setTime(); } </script> </head> <body> <span id="show"></span> </body> </html>
以上で、時計が完成しました。
関連する推奨事項:
jQuery+cssで実装された時計効果(すべてのブラウザと互換性があります)_jquery
以上がHTMLでカウンターとクロック関数のコードを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。