Home > Web Front-end > JS Tutorial > JS method to implement browser status bar display time

JS method to implement browser status bar display time

PHPz
Release: 2018-09-28 16:34:56
forward
2053 people have browsed it

This article mainly introduces the JS method to implement the time display in the browser status bar, involving JavaScript related skills for time and status bar operations. It has certain reference value. Friends who need it can refer to it. The details are as follows:

When I used to make my personal homepage, I always liked to make my webpage very personalized. I used ticker text on the Internet, displayed greetings in the status bar, or added time display in the status bar. This code implements the status The column displays the materials at the current time. Firefox does not detect it, but the effect is perfect under IE.

A screenshot of the running effect is as follows:

The online demo address is as follows:

http://demo.jb51.net/ js/2015/js-status-bar-show-time-demo/

The specific code is as follows:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>状态栏时间显示</TITLE>
</HEAD>
<script language="JavaScript">
var timerID = null;
var timerRunning = false;
function stopclock (){
  if(timerRunning)
    clearTimeout(timerID);
  timerRunning = false;
}
function showtime () {
  var now = new Date();
  var hours = now.getHours();
  var minutes = now.getMinutes();
  var seconds = now.getSeconds()
  var timeValue = " " + ((hours >12) ? hours -12 :hours)
  timeValue += ((minutes < 10) ? ":0" : ":") + minutes
  timeValue += ((seconds < 10) ? ":0" : ":") + seconds
  timeValue += (hours >= 12) ? " 下午" : " 上午"
  window.status = timeValue;
  timerID = setTimeout("showtime()",1000);
  timerRunning = true;
}
function startclock () {
  stopclock();
  showtime();
}
</script>
<body bgcolor="#336699" topmargin="0" leftmargin="0" onLoad="startclock()">请看左下角!状态栏有时间显示!</BODY>
</HTML>
Copy after login

The above is the entire content of this chapter. For more related tutorials, please Visit JavaScript Video Tutorial!

Related labels:
source:jb51.net
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template