<div class="dsp">
<p id="display"></p>
<p>
<button id="start-stop">Start Timer</button>
</p>
<p>
Reset timer to <input type="number" id="timer-length" placeholder="30" /> minutes.
<button id="reset-length">Reset</button>
</p>
</div>
<div id="resngth">Сброс</div>
<script>
let mnts = 20; //Минуты
var start = document.getElementById("start-stop");
var dis = document.getElementById("display");
var reset = document.getElementById("reset-length");
var newTimerLength = mnts*60*1000;
var finishTime;
var savedTime;
var timerLength = mnts*60*1000;
var timeoutID;
var timerStartButtonLabel = "Start Timer";
var timerPauseButtonLabel = "Pause Timer";
if(localStorage.getItem('timerFinishTime')){
UpdateTimer();
start.innerHTML = timerPauseButtonLabel;
}else{
//UpdateTimerDis(timerLength);
if(localStorage.getItem('timeFirst')){
$('.uc-end-block').addClass('show--block');
$('.uc-start-block').addClass('hide-start-block').removeClass('show--block');
$('.uc-timer1, .uc-timer2').addClass('hide-start-block');
//t_lazyload_update();
};
};
if(localStorage.getItem('timerSavedTime')){
var savedTime = localStorage.getItem('timerSavedTime') * 1;
UpdateTimerDis(savedTime);
}
reset.onclick = function () {
localStorage.removeItem('timeFirst');
newTimerLength = document.getElementById("timer-length").value * 60 * 1000;
if(!newTimerLength){ newTimerLength = mnts*60*1000; }
timerLength = newTimerLength;
ClearTimer();
start.innerHTML = timerStartButtonLabel;
}
start.onclick = function () {
if(localStorage.getItem('timerIsRunning')){
// PauseTimer();
}else{
StartTimer();
}
}
function ClearTimer() {
if (timeoutID != undefined) window.clearTimeout(timeoutID);
localStorage.removeItem('timerFinishTime');
localStorage.removeItem('timerSavedTime');
localStorage.removeItem('timerIsRunning');
UpdateTimerDis(timerLength);
}
function UpdateTimer() {
finishTime = localStorage.getItem('timerFinishTime');
var timeLeft = (finishTime - new Date());
if(timeLeft > 0){
timeoutID = window.setTimeout(UpdateTimer, 1000);
$('.uc-start-block').addClass('show--block');
//t_lazyload_update();
}else{
$('.uc-end-block').addClass('show--block');
$('.uc-start-block').addClass('hide-start-block').removeClass('show--block');
$('.uc-timer1, .uc-timer2').addClass('hide-start-block');
//t_lazyload_update();
timeLeft = 0;
if (timeoutID != undefined) window.clearTimeout(timeoutID);
localStorage.removeItem('timerIsRunning');
localStorage.removeItem('timerFinishTime');
localStorage.removeItem('timerSavedTime');
}
UpdateTimerDis(timeLeft);
}
function UpdateTimerDis(millis) {
dis.innerHTML = "Time Left: " + millisToMinutesAndSeconds(millis);
}
// function PauseTimer() {
// if (timeoutID != undefined) window.clearTimeout(timeoutID);
// finishTime = localStorage.getItem('timerFinishTime');
// var timeLeft = (finishTime - new Date());
// start.innerHTML = timerStartButtonLabel;
// localStorage.setItem('timerSavedTime', timeLeft);
// localStorage.removeItem('timerIsRunning');
// localStorage.removeItem('timerFinishTime')
// }
function StartTimer() {
start.innerHTML = timerPauseButtonLabel;
if(localStorage.getItem('timerSavedTime')){
savedTime = localStorage.getItem('timerSavedTime') * 1;
localStorage.removeItem('timerSavedTime');
}else{
savedTime = timerLength;
}
localStorage.setItem('timerIsRunning', true);
localStorage.setItem('timerFinishTime', ((new Date()).getTime() + savedTime));
if (timeoutID != undefined) window.clearTimeout(timeoutID);
UpdateTimer();
}
function millisToMinutesAndSeconds(millis) {
var hours = Math.floor(millis / 3600000);
var minutes = (Math.floor(millis / 60000))-(hours*60);
if(minutes > 59){
minutes = 0;
}
var seconds = ((millis % 60000) / 1000).toFixed(0);
if(seconds > 59){
seconds = 0;
}
$('.timer_minute .tn-atom').text( (minutes < 10 ? '0' : '') + minutes );
$('.timer_seconds .tn-atom').text( (seconds < 10 ? '0' : '') + seconds );
return hours + ":" + (minutes < 10 ? '0' : '') + minutes + ":" + (seconds < 10 ? '0' : '') + seconds;
}
$(document).ready(function(){
let timeFirst = true;
if(localStorage.getItem('timeFirst')) timeFirst = false;
let block_show = null;
let block_show2 = null;
function scrollTracking(){
if(block_show==null && block_show2==null && timeFirst ){
let wt = $(window).scrollTop();
let wh = $(window).height();
let et = $('.uc-timer1 .timer_minute').offset().top;
let eh = $('.uc-timer1 .timer_minute').outerHeight();
let et2 = $('.uc-timer2 .timer_minute').offset().top;
let eh2 = $('.uc-timer2 .timer_minute').outerHeight();
if (wt + wh >= et && wt + wh - eh * 2 <= et + (wh - eh)){
if (block_show == null || block_show == false) {
$('#start-stop')[0].click();
timeFirst = false;
localStorage.setItem('timeFirst', 1);
};
block_show = true;
};
if (wt + wh >= et2 && wt + wh - eh2 * 2 <= et2 + (wh - eh2)){
if (block_show2 == null || block_show2 == false) {
$('#start-stop')[0].click();
timeFirst = false;
localStorage.setItem('timeFirst', 1);
};
block_show2 = true;
};
};
};
$(window).scroll(function(){
scrollTracking();
});
scrollTracking();
});
$(document).on('click', '#resngth', function(){
//$('#resngth').click(function(){
localStorage.removeItem('timeFirst');
});
</script>
<style>
/*.timer_minute,*/
/*.timer_seconds{*/
/* opacity: 0.1;*/
/*} */
/*.timer_minute.fullopacity,*/
/*.timer_seconds.fullopacity{*/
/* opacity: 1;*/
/*} */
</style>
<style>
.uc-end-block, .uc-start-block , .hide-start-block{
display:none;
}
.show--block{
display:block;
}
.dsp{
display: none;
}
#resngth {
width: 150px;
height: 60px;
margin: 30px;
background-color: #e2e2e2;
display: flex;
align-items: center;
justify-content: center;
border-radius: 4px;
box-shadow: 0 0 4px 0px #5b5b5b;
}
</style>
Блок виден "до"
The lives of two mob hitmen, a boxer, a gangster’s wife, and a pair of diner bandits intertwine in four tales of violence and redemption.
Блок виден "после"
The lives of two mob hitmen, a boxer, a gangster’s wife, and a pair of diner bandits intertwine in four tales of violence and redemption.
Reset timer to minutes.