Как я могу создать безопасную кнопку на основе таймера?

вот что я имею в виду:Как я могу создать безопасную кнопку на основе таймера?

Я написал простой таймер, отсчитывающий от 5 минут. В конце 5 минут, я хотел бы показать кнопку для моего пользователя, чтобы нажать. Вы можете увидеть мой код в конце этого сообщения.

Я не хочу, чтобы пользователь мог нажать кнопку, пока не закончится таймер. Я не хочу, чтобы пользователь мог войти в консоль JS и вызвать «document.getElementById (« кнопка »). Style.display = 'block';" и иметь доступ к кнопке.

Каким образом я могу это сделать, желательно полностью на стороне клиента? Есть ли способ сделать это полностью на стороне клиента?

My backend - Ruby on Rails - если есть простое решение с использованием RoR, мне тоже будет интересно. Но, честно говоря, я хотел бы узнать, есть ли у этого полностью клиентский способ сделать это!

<html> 
 
<script> 
 
function startTimer(duration, display) { 
 
    var start = Date.now(), 
 
     diff, 
 
     minutes, 
 
     seconds; 
 

 
    function timer(timerIntervalId) { 
 
    diff = duration - (((Date.now() - start)/1000) | 0); 
 

 
    minutes = (diff/60) | 0; 
 
    seconds = (diff % 60) | 0; 
 

 
    minutes = minutes < 10 ? "0" + minutes : minutes; 
 
    seconds = seconds < 10 ? "0" + seconds : seconds; 
 

 
    display.textContent = minutes + ":" + seconds; 
 

 
    if (minutes == "00" && seconds == "00" && timerIntervalId != undefined) { 
 
     clearInterval(timerIntervalId); 
 
     document.getElementById("button").style.display = 'block'; 
 
    } 
 

 
    if (diff <= 0) { 
 
     start = Date.now() + 1000; 
 
    } 
 
    }; 
 

 
    timer(); 
 
    var timerIntervalId = setInterval(function() { timer(timerIntervalId) }, 1000); 
 
} 
 

 
window.onload = function() { 
 
    var timerLength = 60 * .15, 
 
    display = document.querySelector('#time'); 
 
    startTimer(timerLength, display); 
 
}; 
 

 
</script> 
 
<body> 
 
    <div>Registration closes in <span id="time"></span> minutes!</div> 
 
    <div id = "button" style = "display: none;">BUTTON</div> 
 
</body> 
 
</html>

источник

2015-07-17 Ringo Blancke

'предпочтительно полностью на клиенте side' Для этого потребуется некоторое серверная проверка во всех случаях –

Если вы не хотите, чтобы пользователь мог показывать кнопку с консоли, не включайте кнопку и вводите ее после. Вам, по крайней мере, нужно было бы переместить весь этот код из глобального пространства имен и поместить его в закрытие. Основываясь на том, что вы хотите, я сомневаюсь, что вы можете получить 100% того, чего хотите, без взаимодействия с сервером – charlietfl

Там нет полностью решение на стороне клиента. Поскольку, если вы реализуете это полностью с помощью клиентской стороны, пользователь может каким-то образом изменить таймер (как вы сказали, кнопку show).

Чтобы быть уверенным, что через 5 минут вам нужно будет связаться с сервером, но его можно реализовать с помощью ajax.

При запуске таймера вы можете вызвать какое-либо действие на сервере и запустить таймер на стороне сервера, используя переменную sessions, когда через 5 минут вы выполняете ajax-вызов на другое действие, проверьте, прошло ли 5 минут (таким образом вы получаете 5 минут , и пользователь не может изменить его на клиенте).

Если прошло 5 минут, вы возвращаете html пользователю, внутри html вы возвращаете кнопку, которую хотите отобразить, поэтому пользователь не может проверять html и устанавливать его видимым, потому что сервер возвращает кнопку через 5 минут, а затем пользователь можете щелкнуть по нему.

источник

2015-07-17 16:43:56 Nermin

Ненавижу сказать, что это бутон, но в javascript нет такой безопасности. Пользователь с небольшим количеством знаний сможет делать все, что захочет. Но попытка дать предложения

if (minutes == "00" && seconds == "00" && timerIntervalId != undefined) { 
     clearInterval(timerIntervalId); 
     ///document.getElementById("button").style.display = 'block'; 
     $("<div>").attr('id', 'button').appendTo($("#placeholder")).text("button") 
} 

<body> 
    <div>Registration closes in <span id="time"></span> minutes!</div> 
    <div id="placeholder"> 

    </div> 

</body> 
</html>

таким образом кнопку оленья кожа существовать до тех пор, пока его создания в конце таймера

https://jsfiddle.net/u3bae0uj/

источник

2015-07-17 16:46:31 QBM5

Как я могу создать безопасную кнопку на основе таймера?

ответ

Смежные вопросы