3
It is possible to create a lockscreen in JS+HTML+CSS with the same blocking functionality as in Windows? I think about doing this in the web system that I’m doing.
3
It is possible to create a lockscreen in JS+HTML+CSS with the same blocking functionality as in Windows? I think about doing this in the web system that I’m doing.
4
Yes, it is possible. Using the method setTimeout
of Javascript you can program so that the screen lock runs at the given time, and also created the function to "restart" the time if the user is "active" on the site, through the methods onclick
and onmousemove
.
Well, I made an example using Javascript+jQuery, and also one with Javascript pure:
HTML:
<div id="content">
AQUI ESTÁ SEU CONTEÚDO, AGUARDE 5 SEGUNDOS SEM MOVER O MOUSE E A TELA SERÁ TRAVADA.
</div>
<div id="lockscreen">
<div class="lock-msg">Insira sua senha para desbloquear a tela.</div>
<input class="lockscreen-password" type="password"></input>
<input type="submit" class="lockscreen-btn" value="DESBLOQUEAR"></input>
</div>
CSS:
#content {
position:absolute;
top:150px;
left:50px;
}
#lockscreen {
position:fixed;
z-index:999;
cursor:forbidden;
width:100%;
height:100%;
background-color:rgba(0,0,0,0.9);
color:white;
display:none;
}
.lock-msg{
position:relative;
display:table;
margin:auto;
top:300px;
}
.lockscreen-password{
position:relative;
text-align:center;
display:table;
margin:auto;
top:350px;
}
.lockscreen-btn{
position:relative;
display:table;
margin:auto;
top:380px;
}
Javascript + jQuery
locked = false;
function lockScreen() {
/*1000 ms = 1 seg*/
var timeout = 5000
if (locked == true) {
clearTimeout(lockscreen);
}
else {
lockscreen = setTimeout(function(){
$('#lockscreen').show();
locked = true;
clearTimeout(lockscreen);
}, timeout);
}
}
$(document).click(function(){
clearTimeout(lockscreen);
lockScreen();
});
$(document).mousemove(function(){
clearTimeout(lockscreen);
lockScreen();
});
lockScreen();
$('.lockscreen-btn').click(function(){
var lck_senha = $('.lockscreen-password').val();
if (lck_senha == "swordfish") {
locked = false;
$('.lockscreen-password').val("");
$('#lockscreen').hide();
}
});
Pure Javascript:
locked = false;
function lockScreen() {
if (locked == true) {
clearTimeout(lockscreen);
}
else {
lockscreen = setTimeout(function(){
triggerToggle = document.getElementById("lockscreen");
triggerToggle.style.display = 'initial';
locked = true;
clearTimeout(lockscreen);
}, 5000);
}
}
document.onclick = triggerLockByClick;
function triggerLockByClick() {
clearTimeout(lockscreen);
lockScreen();
}
document.onmousemove = triggerLockByMove;
function triggerLockByMove() {
clearTimeout(lockscreen);
lockScreen();
};
document.querySelector('.lockscreen-btn').onclick = unlock;
function unlock() {
lck_senha = document.getElementsByClassName('lockscreen-password')[0].value;
if (lck_senha == "swordfish") {
document.getElementsByClassName('lockscreen-password').value = "";
triggerToggle.style.display = 'none';
locked = false;
}
}
lockScreen();
If you want to see an example: Jsfiddle example
The password is Swordfish
Of course you would have to create some kind of server-side validation so that the user could not edit through the console. I think the simplest would be to log on from the user after the predetermined time.
Browser other questions tagged javascript html css
You are not signed in. Login or sign up in order to post.
I don’t know if this is exactly what you want. I found two source code demos. https://codepen.io/khadkamhn/pen/EVaJLy https://hungred.com/how-to/tutorial-simple-screen-grey-effect-jquery/
– Netinho Santos