Shulou(Shulou.com)06/01 Report--

This article mainly introduces the relevant knowledge of "how to use HTML+JS to achieve monitoring screen cutting function". The editor shows you the operation process through an actual case. The operation method is simple, fast and practical. I hope this article "how to use HTML+JS to achieve monitoring screen cutting function" can help you solve the problem.

Project description

The project is required to do

Monitor the status of web pages

Record the number of departures

Departure time

Record leaving the page

To achieve this switch page function, you need to use an APIvisiblitychange of web.

Visibilitychange-Web API API reference | MDN (mozilla.org)

Document.visibilityState-Web API API reference | MDN (mozilla.org)

Document.addEventListener ("visibilitychange", function () {console.log (document.visibilityState);})

Roughly, you can get the current status by listening to visiblitychange and operate according to the status document.visibilityState.

Create html

Create a standard html page

Monitor whether to leave the first tab of the page this is the first tab document.addEventListener ('visibilitychange', () = > {let state = document.visibilityState if (state = = "hidden") {document.title = "I know you switched the tab-- tab1"} else {document.title = "hee hee" You're back again.)

Monitor whether to cut the screen

According to MDN's statement to state, visible can also trigger partial visibility, so it is impossible to monitor split-screen monitoring.

So you need to monitor whether another status is foucus, that is, whether it is the focus of the current page.

_ window.onblur = () = > {document.title = "I can't believe you cut the screen?-- tab1"} _ window.onfocus = () = > {document.title = "well, you're back-- tab1"}

Record time

Place a flag bit to see if it triggers to cut the screen or switch tabs, and save the timestamp at this time

When the next time it is triggered again, the screen cutting time is displayed.

Because it appears many times, it is encapsulated into a function.

Let isCut = false let lastTime; function recordTime () {isCut = true lastTime = Date.now ()} function showTimeDiff () {if (isCut) {let timeDiff = (Date.now ()-lastTime) / 1000; / / alert (`you cut the screen ${timeDiff} `) console.log (timeDiff) IsCut = false}}

Number of departures

Whether you cut the screen or leave the new tab, it needs to be timed and will not be interrupted by refresh.

From this I think of sessionStorage

Function countTimes () {let store = window.sessionStorage.getItem ('leave-times') if (store = null) {window.sessionStorage.setItem (' leave-times', 0) return} store + +; window.sessionStorage.setItem ('leave-times', store);}

This is the end of the content about "how to use HTML+JS to achieve monitoring and screen cutting function". Thank you for your reading. If you want to know more about the industry, you can follow the industry information channel. The editor will update different knowledge points for you every day.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.