Я пытаюсь показать время начала и окончания на странице онлайн-экзамена. Я показал начальное время моей экзаменационной страницы, и теперь я пытаюсь отобразить время окончания , увеличивая время в 1 минуту каждый раз, когда я открываю страницу с помощью AngularJs только так, как показано ниже:
Вопрос 1 из 5
Время начала 6:39:23
Время окончания 18:40:22
Здесь Код:
<!DOCTYPE html>
<html>
<head>
<meta charset="UFT-8">
<link rel="stylesheet" href="menu.css">
<link rel="stylesheet" href="layout.css">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js"></script>
<script>
var pos = 0, test, test_status, question, choice, choices, chA, chB, chC, correct = 0;
var questions = [
[ "Which of the following a is not a keyword in Java ?", "class", "interface", "extends", "C" ],
[ "Which of the following is an interface ?", "Thread", "Date", "Calender", "A" ],
[ "Which company released Java Version 8 ?", "Sun", "Oracle", "Adobe", "A" ],
[ "What is the length of Java datatype int ?", "32 bit", "16 bit", "None", "C" ],
[ "What is the default value of Java datatype boolean?","true","false","0","A"]
];
function _(x){
return document.getElementById(x);
}
function renderQuestion(){
test = _("test");
if(pos >= questions.length){
var showscore=Math.round(correct/questions.length*100);
var minuteleft = parseInt((totalsecoriginal-totalsec) / 60, 10);
var sec = (totalsecoriginal-totalsec) - (minuteleft * 60);
document.getElementById("online_start").src = "animatedthankyou.gif";
document.getElementById("showtime")
test.innerHTML = "<h3>You got "+correct+" correct of "+questions.length+" questions</h3>";
test.innerHTML += "<h3> Your Grade : "+showscore +"% </h3>";
test.innerHTML += "<h4>Exam Finished in Time :" + minuteleft + " Minutes :" + sec + " Seconds</h4>";
test.innerHTML += "<button onclick='EndExam()'>End the Exam</button>";
_("test_status").innerHTML = "<h3>Test Completed</h3>";
pos = 0;
correct = 0;
clearTimeout(tim);
document.getElementById("starttime").style.display += 'none';
document.getElementById("showtime").style.display += 'none';
document.getElementById("endtime").style.display += 'none';
return false;
}
_("test_status").innerHTML = "<h3>Question "+(pos+1)+" of "+questions.length+"</h3>";
question = questions[pos][0];
chA = questions[pos][1];
chB = questions[pos][2];
chC = questions[pos][3];
test.innerHTML = "<h3>"+question+"</h3>";
test.innerHTML += "<input type='radio' name='choices' value='A'> "+chA+"<br>";
test.innerHTML += "<input type='radio' name='choices' value='B'> "+chB+"<br>";
test.innerHTML += "<input type='radio' name='choices' value='C'> "+chC+"<br><br>";
test.innerHTML += "<button onclick='checkAnswer()'>Next</button><br><br>";
}
function checkAnswer(){
choices = document.getElementsByName("choices");
choice=-1;
for(var i=0; i<choices.length; i++){
if(choices[i].checked){
choice = choices[i].value;
}
}
if(choice == questions[pos][4]){
correct++;
}
pos++;
renderQuestion();
}
window.addEventListener("load", renderQuestion, false);
function EndExam(){
location.href="Loginpage.htm";
}
var tim;
var showscore=Math.round(correct/questions.length*100);
var totalsec = 60;
var totalsecoriginal = totalsec;
var f = new Date();
function starttime() {
showtime();
}
function showtime() {
//console.log('showtime');
// first check if exam finished
if (pos >= questions.length)
{
clearTimeout(tim);
return;
}
totalsec--;
var min = parseInt(totalsec / 60, 10);
var sec = totalsec - (min * 60);
if (parseInt(sec) > 0) {
document.getElementById("showtime").innerHTML = "Your Left Time is :" + min + " Minutes :" + sec + " Seconds";
tim = setTimeout("showtime()", 1000);
}
else {
if (parseInt(sec) == 0) {
document.getElementById("showtime").innerHTML = "Your Left Time is :" + min + " Minutes :" + sec + " Seconds";
if (parseInt(min) == 0) {
clearTimeout(tim);
alert("Time Up");
window.location.href = "Loginpage.htm";
}
else {
document.getElementById("showtime").innerHTML = "Your Left Time is :" + min + " Minutes :" + sec + " Seconds";
tim = setTimeout("showtime()", 1000);
}
}
}
}
var app = angular.module('MyApp',[])
app.controller('MyController',function($scope,$window,$interval,$timeout,$filter){
var date=new Date();
$scope.hhmmss = $filter('date')(new Date(), 'hh:mm:ss a');
//CountDown TImer uisng Angular JS
var tim;
$scope.totalsec = 60;
var countdowntime= function(){
$scope.totalsec--;
$scope.min = parseInt($scope.totalsec / 60, 10);
$scope.sec = $scope.totalsec - ($scope.min * 60);
if($scope.sec >0){
tim = $timeout(countdowntime, 1000);
}else if($scope.sec ==0){
$timeout.cancel(tim);
$window.alert("Time Up");
}
};
countdowntime();
});
</script>
</head>
<body onload="starttime()" >
<div id="Holder">
<div id="Header"></div>
<div id="NavBar">
<nav>
<ul>
<li><a href="Loginpage.htm"> Login</a></li>
<li><a href="Registrationpage.htm">Registration</a></li>
</ul>
</div>
<div id="Content">
<div id="PageHeading">
<h1><marquee direction="right" behavior="alternate">All the Best</marquee></h1>
</div>
<div id="ContentLeft">
<h2></h2><br>
<img id="online_start">
<br>
<h6>Online Examination System(OES) is a Multiple Choice Questions(MCQ) based
examination system that provides an easy to use environment for both
Test Conducters and Students appearing for Examination.</h6>
</div>
<div id="ContentRight">
<section class="loginform_cf">
<div ng-app="MyApp" ng-controller="MyController" ng-init="StartTimer()">
<table>
<tr>
<td id="test_status" style="text-align:left" ></td>
<td id="starttime" style="text-align:right"></td>
<td>Exam Starts :<span ng-bind = "hhmmss"></span></td>
<td id="endtime" style="text-align:right"></td>
</tr>
<tr>
<td id="test" colspan="2"></td>
</tr>
</table>
----------- Angular Js Starting -------------------
<br>
Your Left Time is :{{min}} Minutes:{{sec}} Seconds<br>
</div>
----------- Angular Js Ending -------------------
<br>
<div id="showtime" ></div>
</section>
</div>
</div>
<div id="Footer">Developed by - K.P.RAJU</div>
</div>
<script src="moment.js"></script>
</body>
</html>
Может ли кто-нибудь помочь отображать время окончания?
Ты пробовал
var endTime= new Date();
endTime.setMinutes(endTime.getMinutes() + 1);
Он также позаботится о часах, в случае 59 минут
Кредиты на: Как добавить 20 минут к текущей дате?
Объем кода для меня слишком сложный, но я написал вам быстрый пример того, как я буду представлять время начала с подсчетом таймера. Я включил кнопку остановки, чтобы сказать, когда остановиться, но вы можете остановить ее, как вам нравится:
https://plnkr.co/edit/ZBZDwC1qkh8S13vH0gSe?p=preview
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope, $timeout) {
$scope.currentTime = new Date();
$scope.startTime = angular.copy($scope.currentTime);
var timer;
$scope.stopCounter = function() {
$timeout.cancel(timer);
};
var updateCounter = function() {
$scope.currentTime.setSeconds($scope.currentTime.getSeconds() + 1)
// Set the value to 60000 because you requested a minute apart
timer = $timeout(updateCounter, 60000);
};
updateCounter();
});
Html
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<script data-require="[email protected]" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.6/angular.min.js" data-semver="1.4.6"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<p>Start time : {{startTime | date : 'medium'}} </p>
<p>Current time : {{currentTime | date : 'medium'}}</p>
<p><button ng-click="stopCounter()">Stop</button></p>
</body>
</html>