.
Код: Выделить всё
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body{
background-color: rgb(255, 255, 255);
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
text-align: center;
}
.card{
display: flex;
justify-content: center;
align-items: center;
height: 100%;
padding: 100px;
}
h2{
margin: 0 50px;
font-size: 50px;
}
button{
background-color: #ff9100;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
border-radius: 25px;
}
button:hover{
background-color: rgb(206, 206, 206);
color: #ff9100;
border-color: #000 ;
}
Live Users in Mall
Live Users in Mall
-
0
+
// Establish the communication channel - this can be (nearly) any name
// but the same name is needed for the listeners.
let oChan=new BroadcastChannel( 'tabs' );
let h2=document.querySelector('div.card h2');
// simple function to send a payload of your design
const sendmessage=function( data ){
let payload={ 'data':data };
oChan.postMessage( payload );
};
// fetch the data from localStorage or set as zero
let data=localStorage.getItem('key');
if( data == null )data=0;
else data=Number( data );
h2.innerHTML=data;
// assign an event listener for both buttons
document.querySelectorAll('button[data-action]').forEach( bttn=>{
bttn.addEventListener('click',function(e){
switch( this.dataset.action ){
case 'increment':data++;break;
case 'decrement':data--;break;
}
//update storage
localStorage.setItem('key',data);
// send the message to the "other" page
sendmessage( data );
// update local display
h2.innerHTML=data;
});
})
Код: Выделить всё
Show Live Data
Users Present in Mall
0
// establish listener on same channel
let oChan=new BroadcastChannel( 'tabs' );
oChan.addEventListener('message',(e)=>{
// process the messages as they arrive
document.querySelector('h2').innerHTML=e.data.data
});
Подробнее здесь: https://stackoverflow.com/questions/669 ... ike-chrome
Мобильная версия