CountDown Timer Using Javascript

Question

I m working on online examination i just wnat to start timer at exam start and want to end as exam finish i hv endtime on my cotroller and i m passing that endtime on view i want to start timer between system time and end time

Controller

public ActionResult TestStarted(int TestId,DateTime End_Time)
        {
            ViewBag.ct = 0;
            ViewBag.TestId = TestId;

            EAssessmentNew.BAL.StudentBal studBal = new EAssessmentNew.BAL.StudentBal();
            EAssessmentNew.Dal.Student_Answer_Master _studAnsdal = new       EAssessmentNew.Dal.Student_Answer_Master();


            ViewBag.EndTime = End_Time;
        }

View

<script type="text/javascript">





    var days, hours, minutes, seconds;


    var countdown = document.getElementById("lblCtime");


setInterval(function () {


    var current_date = new Date().getTime();
    var seconds_left = ( @ViewBag.EndTime - current_date) / 1000;


    days = parseInt(seconds_left / 86400);
    seconds_left = seconds_left % 86400;

    hours = parseInt(seconds_left / 3600);
    seconds_left = seconds_left % 3600;

    minutes = parseInt(seconds_left / 60);
    seconds = parseInt(seconds_left % 60);


    countdown.innerHTML = days + "d, " + hours + "h, "
    + minutes + "m, " + seconds + "s";  

}, 1000);
</script>

Suppose i have EndTime 1:00 PM and System Time 12:00 PM how can i start timer betwwen these two times as i want to convert my EndTime 1:00 PM into milliseconds as current date in my script returns me time in milliseconds.

i m working on online examination and i just want to start timer as per the exams duration suppose my start time of exam is 12:00 PM and End Time is 1:00 PM i just want to start timer of 1 hour between these two times — user3921468
– user3921468, Commented Aug 14, 2014 at 6:02
when ever user click on give exam button you need to store that into the table and get the time and reduce it with the current time. — cracker
– cracker, Commented Aug 14, 2014 at 6:10

cracker · Accepted Answer · 2014-08-14 09:09:13Z

2

What you need to do is whenever the user click on the Give Exam add the time to the Duration of exam that you are going to give him (i.e Exam Start Time 1PM and you are giving user to 1 Hour of Time to Complete the Exam then you need to pass the date with the time 1PM + 1 HOUR More so it will count from that datetime to finish the exam) and pass this as End date with this function

<script>
    var end = new Date('08/14/2014 12:00 PM');

        var _second = 1000;
        var _minute = _second * 60;
        var _hour = _minute * 60;
        var _day = _hour * 24;
        var timer;

        function showRemaining() {
            var now = new Date();
            var distance = end - now;
            if (distance < 0) {

                clearInterval(timer);
                document.getElementById('countdown').innerHTML = 'EXPIRED!';

                return;
            }
            var days = Math.floor(distance / _day);
            var hours = Math.floor((distance % _day) / _hour);
            var minutes = Math.floor((distance % _hour) / _minute);
            var seconds = Math.floor((distance % _minute) / _second);

            document.getElementById('countdown').innerHTML = days + 'days ';
            document.getElementById('countdown').innerHTML += hours + 'hrs ';
            document.getElementById('countdown').innerHTML += minutes + 'mins ';
            document.getElementById('countdown').innerHTML += seconds + 'secs';
        }

        timer = setInterval(showRemaining, 1000);
</script>

The end date will automatically count based on the server datetime and you need not to worry about the local time.

DEMO1

DEMO2

edited Aug 14, 2014 at 9:09

answered Aug 14, 2014 at 6:16

cracker

4,9043 gold badges26 silver badges41 bronze badges

Sign up to request clarification or add additional context in comments.

14 Comments

user3921468 Over a year ago

do i need to include any javascript for this

cracker Over a year ago

yes jquey.js file or any jquery file that is latest (i.e, jquery.min.js or any version of this but i suggest you to use jquery.js)

user3921468 Over a year ago

var end = new Date('14-08-2014 1:00:00 PM') this is my format and your script is giving me error when i use this format

user3921468 Over a year ago

and i need to pass end time from database as i want clock on each and every page as m loading one question on one page at a time so each and every time new page is called i need to pass end time from database

cracker Over a year ago

plz check the updated demo and you can pass the end date from backend, you need to replace 14-08-2014 1:00:00 PM from demo to your date and then try it in all the page but use separate script for each pages

|

Collectives™ on Stack Overflow

CountDown Timer Using Javascript

1 Answer 1

DEMO2

14 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

14 Comments

Your Answer

Sign up or log in

Post as a guest

Related