Home Web Front-end JS Tutorial Use js to display the time the visitor stayed on this page in the browser status bar_javascript skills

Use js to display the time the visitor stayed on this page in the browser status bar_javascript skills

May 16, 2016 pm 05:06 PM
Browser Status Bar

Problem description: Display on the status bar, the time the visitor stayed on this page (for example: you stayed on this page (for example: you stayed on this page for X hours, minutes and X seconds))

This problem is equivalent to designing a timer to show how long the viewer has stayed on the page. To solve this problem, there are two main methods I can think of:

Method 1: Use the system time. . That is, first set a variable to get the login start time startTime, and then use the setTimeout() function to refresh the page continuously. While refreshing, get the current time nowTime, and then subtract the login start time from the current time, which is Dwell time. I won’t write it in detail here. Let’s focus on the second method used below.

Method two: set three variables: second, minute, hour. 1, and use setTimeout to refresh the page every second. When second is greater than or equal to 60, minute starts with 1, and second is reset to zero. Similarly, when minute is greater than or equal to 60, hour starts with 1. This can realize the timing function. .

The code for method two is as follows:

Copy the code The code is as follows:


< ;html xmlns="http://www.w3.org/1999/xhtml">


Untitled Document






Running effect As shown in the picture.
Use js to display the time the visitor stayed on this page in the browser status bar_javascript skills
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

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

How to correctly display the locally installed 'Jingnan Mai Round Body' on the web page? How to correctly display the locally installed 'Jingnan Mai Round Body' on the web page? Apr 05, 2025 pm 10:33 PM

Using locally installed font files in web pages Recently, I downloaded a free font from the internet and successfully installed it into my system. Now...

How to control the top and end of pages in browser printing settings through JavaScript or CSS? How to control the top and end of pages in browser printing settings through JavaScript or CSS? Apr 05, 2025 pm 10:39 PM

How to use JavaScript or CSS to control the top and end of the page in the browser's printing settings. In the browser's printing settings, there is an option to control whether the display is...

Why does negative margins not take effect in some cases? How to solve this problem? Why does negative margins not take effect in some cases? How to solve this problem? Apr 05, 2025 pm 10:18 PM

Why do negative margins not take effect in some cases? During programming, negative margins in CSS (negative...

How to use locally installed font files on web pages? How to use locally installed font files on web pages? Apr 05, 2025 pm 10:57 PM

How to use locally installed font files on web pages Have you encountered this situation in web page development: you have installed a font on your computer...

The text under Flex layout is omitted but the container is opened? How to solve it? The text under Flex layout is omitted but the container is opened? How to solve it? Apr 05, 2025 pm 11:00 PM

The problem of container opening due to excessive omission of text under Flex layout and solutions are used...

Why does a specific div element in the Edge browser not display? How to solve this problem? Why does a specific div element in the Edge browser not display? How to solve this problem? Apr 05, 2025 pm 08:21 PM

How to solve the display problem caused by user agent style sheets? When using the Edge browser, a div element in the project cannot be displayed. After checking, I posted...

How to achieve horizontal scrolling effect of horizontal options by rotating elements in CSS? How to achieve horizontal scrolling effect of horizontal options by rotating elements in CSS? Apr 05, 2025 pm 10:51 PM

How to achieve horizontal scrolling effect of horizontal options in CSS? In modern web design, how to achieve a horizontal tab-like effect and support the mouse...

How to correctly select and set the element style with the first class name 'red' in CSS? How to correctly select and set the element style with the first class name 'red' in CSS? Apr 05, 2025 pm 08:24 PM

How to select and set the element style for the first specific class? In web development, it is often necessary to style elements of specific class names, especially when...

See all articles