I am making a code that will give two different types of clocks depending on the radio button selected. When the clock appears, the text saying "Reload the page to go back to clock settings. However, when the 12 hour clock radio button is selected, the text is repeated every second. Is there any way to fix this? And please do not use J Query, I do not know it.
function clock_12() {
document.write("<div align='center' style = 'background:#420080; color:limegreen'>"+"Reload the page to go back to the clock settings."+"</div>");
var clocktime = new Date();
var hours = clocktime.getHours();
var mins = clocktime.getMinutes();
var secs = clocktime.getSeconds();
var ampm = (hours >= 12) ? "P.M." : "A.M.";
if (hours >= 13) {
hours -= 12;
}
if (hours < 1) {
hours = 12;
}
if (mins < 10) {
mins = "0" +mins;
}
if (secs < 10) {
secs = "0" +secs;
}
document.write("<div id = 'the_clock' align = 'center' style = 'background:#420080; color:limegreen'></div>");
var div_clock = document.getElementById("the_clock");
div_clock.innerHTML = hours + ":" +mins+ ":" +secs+ " " +ampm;
setTimeout("clock_12()", 1000);
}
function clock_24() {
var clocktime = new Date();
var hours = clocktime.getHours();
var mins = clocktime.getMinutes();
var secs = clocktime.getSeconds();
var back = "Reload the page to go back to the clock settings.";
document.writeln("<div align='center' style = 'background:#420080; color:limegreen'>"+back+"</div>");
if (mins < 10) {
mins = "0" +mins;
}
if (secs < 10) {
secs = "0" +secs;
}
document.write("<div id = 'clock' align = 'center' style = 'background:#420080; color:limegreen'</div>");
var div_clock = document.getElementById("clock");
div_clock.innerHTML = hours + ":" +mins+ ":" +secs;
setTimeout("clock_24()", 1000);
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>12 and 24 Hour Clocks</title>
</head>
<body style="background:limegreen">
<table style="width:50%" align = "center">
<tr>
<td><script type = "text/javascript" src = "clock.js"></script></td>
</tr>
<tr>
<br /><br /><td style = "background:#420080; color:limegreen"><label for="clock12">12 Hour Clock</label><input type = "radio" onclick = "clock_12()" id = "clock12" value = "clock12"></td>
<br /><br /><td style = "background:#420080; color:limegreen"><label for="clock24">24 Hour Clock</label><input type = "radio" onclick = "clock_24()" id = "clock24" value = "clock24"></td>
</tr>
</table>
</body>
</html>
You have the line
document.write("<div id = 'clock' align = 'center' style = 'background:#420080; color:limegreen'</div>");
Inside your clock_24 function, which gets called every second because of this: setTimeout("clock_24()", 1000);. The same for clock_12. So, remove those lines from your functions. Put it outside, like at the beginning of the file clock.js. Check http://www.w3schools.com/jsref/met_win_settimeout.asp
EDIT: sorry, it is more than one line. You have do put all of your document.write outside of your functions.
EDIT: roshen_amin correctly commented that the html needs to be written on click. So the complete solution is to make a function that does the document.write, and then calls clock_24()/clock_12(). On click, call that function instead of clock_24()/clock_12(). Like that, the html appears when you click, but only the rest of the function is called every second
Related
This question already has an answer here:
JavaScript countdown timer with on key press to reset the timer
(1 answer)
Closed 11 months ago.
I have a simple HTML stopwatch logic where I can start and stop the clock with the button click. By clicking on the start button, one can start the timer (shows current time) and update every second. One can stop it by clicking stop button. But if one clicks on start button twice, there is nothing I can do to stop the timer. Below is my code:
var hour = document.getElementById("hoursOut");
var minute = document.getElementById("minsOut");
var second = document.getElementById("secsOut");
var btnStart = document.getElementById("btnStart");
var btnStop = document.getElementById("btnStop");
var waitTimer;
function displayTime() {
var currentTime = new Date();
var currentHour = currentTime.getHours();
var currentMinute = currentTime.getMinutes();
var currentSeconds = currentTime.getSeconds();
hour.innerHTML = twoDigit(currentHour) + ":";
minute.innerHTML = twoDigit(currentMinute) + ":";
second.innerHTML = twoDigit(currentSeconds);
}
function twoDigit(digit) {
if (digit < 10) {
digit = "0" + digit;
}
return digit;
}
function startClock() {
waitTimer = setInterval(displayTime, 1000);
}
function stopClock() {
clearInterval(waitTimer);
}
btnStart.onclick = startClock;
btnStop.onclick = stopClock;
<h1>JavaScript Clock</h1>
<div id="calendarBox">
<!-- OUTPUT TIME VALUES -->
<p class="timeDisplay">
<span id="hoursOut">00:</span>
<span id="minsOut">00:</span>
<span id="secsOut">00</span>
</p>
<!-- BUTTON SET -->
<input id="btnStart" type="button" value="START" />
<input id="btnStop" type="button" value="STOP" />
</div>
I have checked some answers in stackoverflow but most solutions uses a for-loop from 0 to 1000 until it finds the interval id and stop all of them using loop. I am confident there should be an elegant solution than that.
// some stackoverflow suggested answer
for (var i = 1; i < 99999; i++)
window.clearInterval(i);
A possible solution is to prevent the problem before it happens. You can place a check on the running timer (Is there a way to check if a var is using setInterval()?).
In this case you could just have a global timer variable var timer = false the with add a check to the start function. Then the stop function will set the timer variable back to false.
function startClock() {
if(!timer){
timer = true
waitTimer = setInterval(displayTime, 1000);
}
else return
}
function stopClock() {
clearInterval(waitTimer);
timer = false
}
when you double click you start a new setInterval(). So you now have two set intervals running. Only problem is you can't access the first one cause you named the second one the same name. Check if waitTimer exists and if it does stop it. see code:
UPDATE: actually you don't even need an if statement. just call stopClock() before you set waitTimer -- code snippet adjusted
var hour = document.getElementById("hoursOut");
var minute = document.getElementById("minsOut");
var second = document.getElementById("secsOut");
var btnStart = document.getElementById("btnStart");
var btnStop = document.getElementById("btnStop");
var waitTimer;
function displayTime() {
var currentTime = new Date();
var currentHour = currentTime.getHours();
var currentMinute = currentTime.getMinutes();
var currentSeconds = currentTime.getSeconds();
hour.innerHTML = twoDigit(currentHour) + ":";
minute.innerHTML = twoDigit(currentMinute) + ":";
second.innerHTML = twoDigit(currentSeconds);
}
function twoDigit(digit) {
if (digit < 10) {
digit = "0" + digit;
}
return digit;
}
function startClock() {
stopClock();
waitTimer = setInterval(displayTime, 1000);
}
function stopClock() {
clearInterval(waitTimer);
}
btnStart.onclick = startClock;
btnStop.onclick = stopClock;
<h1>JavaScript Clock</h1>
<div id="calendarBox">
<!-- OUTPUT TIME VALUES -->
<p class="timeDisplay">
<span id="hoursOut">00:</span>
<span id="minsOut">00:</span>
<span id="secsOut">00</span>
</p>
<!-- BUTTON SET -->
<input id="btnStart" type="button" value="START" />
<input id="btnStop" type="button" value="STOP" />
</div>
I have code for calculating time difference and it works well. I need to change the method (actually I added one more method in certain condition). The method that I added in a condition when the textbox has value Istirahat, and then I need to change the method to the time difference that I made minus one hour.
I think it will be confusing to see my explanation without the code.
Here's the code:
$(document).ready(function() {
var $time1 = $("#start");
var $time2 = $("#end");
var $diff = $("#jam_total");
function updateHours() {
var dtStart = new Date("7/20/2015 " + $time1.val());
var dtEnd = new Date("7/20/2015 " + $time2.val());
var stats1 = $("#status_check").val();
if(stats1!='ISTIRAHAT') {
var diff = ((dtEnd - dtStart)) / 1000;
} else if(stats1!='TANPA ISTIRAHAT') {
var diff = ((((dtEnd - dtStart)) / 1000) - 1);
}
var totalTime = 0;
if (diff > 60*60*12) {
totalTime = formatDate(60*60*12);
} else {
totalTime = formatDate(diff);
}
$diff.val(totalTime);
}
function formatDate(diff) {
var hours = parseInt(diff / 3600) % 24;
var minutes = parseInt(diff / 60) % 60;
var seconds = diff % 60;
return (hours < 10 ? "0" + hours : hours) + ":" + (minutes < 10 ? "0" + minutes : minutes);
}
$("#option2").on("change", function() {
if($time1.val() && $time2.val()) {
updateHours();
}
});
});
<input type="time" id="start" name="logintime"/>
<input type="time" id="end"name="logouttime" />
<br /><br />
<select name="option2" id="option2" onchange="Choose1(this)" style="float:left">
<option value="-">-</option>
<option value="istirahat">istirahat</option>
<option value="tanpa istirahat">tanpa istirahat</option>
</select>
<input type="text" name="status_check" size="8" readonly="readonly" id="status_check" style="text-transform:uppercase" />
<br /><br />
Total: <input type="text" id="jam_total" type="text" name="jam_total" size="18" readonly="readonly">
<br /><br />
<script>
function Choose1(data) {
document.getElementById("status_check").value = data.value;
}
</script>
Try to check the jQuery function at the code like this:
else if (stats1 != 'TANPA ISTIRAHAT') {
var diff = ((((dtEnd - dtStart)) / 1000) - 1);
}
var diff = (((dtEnd - dtStart)) / 1000) - 1) is what I mean, that code won't work perfectly like I want. What I want is like this:
Please check the code inside if var diff = ((dtEnd - dtStart)) / 1000; I want the result of this code to be minus one hour.
First of all there is one thing wrong, you need to set stats1 to UpperCase, otherwise you can't compare correct. Second thing is you are calculating time over seconds, you should minus 60*60 (3600 to minus 1 hours).
function updateHours(){
var dtStart = new Date("7/20/2015 " + $time1.val());
var dtEnd = new Date("7/20/2015 " + $time2.val());
var stats1 = $("#status_check").val().toUpperCase();
// if you don't add toUpperCase, istirahat won't be equal to ISTIRAHAT so everytime..
// first if block will be executed
if(stats1!='ISTIRAHAT'){
var diff = ((dtEnd - dtStart)) / 1000;
}
else if(stats1!='TANPA ISTIRAHAT'){
var diff = ((((dtEnd - dtStart)) / 1000) - 3600); // and you should minus 3600
}
var totalTime = 0;
if (diff > 60*60*12) {
totalTime = formatDate(60*60*12);
;
} else {
totalTime = formatDate(diff);
}
$diff.val(totalTime);
}
Here is the working fiddle
Hope helps,
I'm trying to add a javascript timer for products, if the item have a promotion then show the timer and start the count down.. so what i'm doing is im sending the end date from code behind to the javascript function and the function creates the timer based on the end date. I've been trying for long time the script is working, the issue is i'm not able to loop inside the nested repeater to get the correct countdown control id and index.
hope you guys can help me with this issue.
thanks
HTML Code:
<asp:Repeater runat="server" ID="Repeater1" OnItemDataBound="rptdep_ItemDataBound" OnItemCommand="rptdep_Details_Command">
<ItemTemplate>
<asp:LinkButton class="navbar-brand" runat="server" ID="LinkButton1" Style="text-decoration: none; margin-right: -25px; border: none; font-size: medium" CommandArgument='<%#Eval("department_code") %>' CommandName="more">
<asp:Repeater runat="server" ID="rptdeppromo" OnItemDataBound="rptdeppromo_ItemDataBound" OnItemCommand="Item_depPromo_Command">
<ItemTemplate>
<div runat="server" id="countdown" class="cntdwn"></div>
</ItemTemplate>
</asp:Repeater>
</ItemTemplate>
</asp:Repeater>
Timer JS code:
function producttimer(compntname, enddate1, col) {
$(document).ready(function () {
var $countdown = $('#rptdep_rptdeppromo_' + compntname + '_countdown_' + col);
// set the date we're counting down to
var target_date = new Date(enddate1);
// variables for time units
var days, hours, minutes, seconds;
// update the tag with id "countdown" every 1 second
setInterval(function () {
target_date.getTime();
// find the amount of "seconds" between now and target
var current_date = new Date().getTime();
// check for match
if (current_date === target_date) {
}
var seconds_left = (target_date - current_date) / 1000;
// do some time calculations
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);
// format countdown string + set tag value
$countdown.text(days + "days, " + hours + "hrs, " + minutes + "min, " + seconds + "s");
}, 1000);
}); //EOF DOCUMENT.READY
}
C# parent repeater code:
protected void rptdep_ItemDataBound(object sender, RepeaterItemEventArgs e)
{
if (e.Item.ItemType == ListItemType.Item || e.Item.ItemType == ListItemType.AlternatingItem)
{
Repeater innerRepeater2 = (Repeater)e.Item.FindControl("rptdeppromo");
DataRowView drv = (DataRowView)(e.Item.DataItem);
}
}
}
C# nested repeater code:
protected void rptdeppromo_ItemDataBound(object sender, RepeaterItemEventArgs e)
{
if (e.Item.ItemType == ListItemType.Item || e.Item.ItemType == ListItemType.AlternatingItem)
{
DataRowView drv = (DataRowView)(e.Item.DataItem);
DateTime EndDate = Convert.ToDateTime(Convert.ToDateTime(drv.Row["publishtdt"]).ToString("dd MMM yyyy"));
int countw = 0;
int count = 0;
if (total < 30)
{
count += 1;
foreach (RepeaterItem item in rptdep.Items)
{
countw += 1;
}
ScriptManager.RegisterStartupScript(this.Page, this.GetType(), "counter" + countw, "producttimer('" + countw + "','" + EndDate + "', '" + e.Item.ItemIndex + "');", true);
}
else
{
}
}
}
here is a different approach:
1- in your repeater, display all Promotions End date in label, and give them the same class "cntdwn"
2- your JS , when the page is ready it will look all items in your page with the same class and loop inside them:
var elements = document.getElementsByClassName("cntdwn");
for (var i = 0, len = elements.length; i < len; i++)
{
var PromoID = elements[i].Id;
Var EndDate = document.getElementById(PromoID).textContent;
}
3- Now you have the Lable ID , and The end Date , use your countdown logic to display the countdown in the text area of that ID.
Good luck ...
the upvoted answer worked for me, but i needed to tweak it a bit. I thought some code may help the next person who looks here.
using the plugin jquery.countup.js (any counter should work):
<div id="div<%# ((RepeaterItem)Container).ItemIndex + 1%>" class="countdown">
<%# Eval("EntryDate") %>
</div>
<script type="text/javascript">
$(function () {
var elements = document.getElementsByClassName('countdown');
var len = elements.length;
for (var i = 0; i < len; ++i) {
var timerID = elements[i].id;
var startDate = elements[i].innerText;
startCounter(startDate, timerID);
};
});
function startCounter(entryDate, timerID) {
var entDate = new Date(entryDate);
var year = (entDate).getFullYear();
var month = (entDate).getMonth() + 1;
var day = (entDate).getDate();
var hour = (entDate).getHours();
var min = (entDate).getMinutes();
var sec = (entDate).getSeconds();
$("#" + timerID).empty();
$("#" + timerID).countup({
start: new Date(year, month, day, hour, min, sec) //year, month, day, hour, min, sec
});
};
I have created a notice board. I want to show the notices in Red color for the first 48 hours. After 48 hour the color of the Notices will be changed. Now what should i change or add in my code?
HTML body for the notice board -
<div class="col-md-4">
<div class="widget-item" style="padding-top:0px;margin-top:0px;">
<div class="widget-main-title">
<h4 class="widget-title">Notice Board</h4>
</div> <!-- /.widget-main-title -->
<marquee id="dvNotice" FACE="courier" BEHAVIOR="SCROLL" height="247px" onmouseout="this.setAttribute('scrollamount', 2, 0);" onmouseover="this.setAttribute('scrollamount', 0, 0);" scrollamount="2" direction="up" style="text-align: left;">
<%--<div class="widget-inner" id="dvNotice">
</div> --%><!-- /.widget-inner -->
</marquee>
<!-- /.request-information -->
</div> <!-- /.widget-item -->
</div>
JQuery/JavaScript -
$(document).ready(function () {
PageMethods.loadNotice('', loadNoticeSuccess);
});
function loadNoticeSuccess(result) {
$("#dvNotice").html('');
var html = "";
for (var i = 0; i < result.length; i++) {
var month_value = result[i].PublishedDate.getMonth();
var day_value = result[i].PublishedDate.getDate();
html += "<div class=\"event-small-list clearfix\">";
html += "<div class=\"calendar-small\"><span class=\"s-month\">" + months[month_value] + "</span><span class=\"s-date\">" + day_value + "</span></div>";
//html += "<div class=\"event-small-details\"><h5 class=\"event-small-title\">" + result[i].Title + "</h5><p class=\"event-small-meta small-text\">" + result[i].Description + "</p></div></div>";
html += "<div class=\"event-small-details\"><h5 class=\"event-small-title\">" + result[i].Title + "</h5><p class=\"event-small-meta small-text\"></p></div></div>";
}
html += "<div class=\"event-small-list clearfix\" style=\"text-align:right;padding:0;\">More</div>";
$("#dvNotice").append(html);
}
C# Code Behind for loading the notice board -
[WebMethod]
public static List<Notice> loadNotice(string value)
{
IList<Notice> notice = NoticeManager.GetTopPublishedNotice();
if (notice == null)
{
notice = new List<Notice>();
}
return notice.ToList();
}
I assume you are using some CMS to add these notices. One option is to check difference between notice/content creation time and now on page load. This can be done easily through javascript get Time function.
If you don't have such value then simply add it to you CMS, to store metadata of creation date and time. Most CMS I have encountered have such possibilities.
Hope this theory will help.
Can you please try this code after appending the html to the div dvNotice ,
setTimeout(function () {
$('#dvNotice').css('color','yellow');
}, 172800000);
I'm leveraging the function from this answer to calculate the difference of two dates, based on the assumption that 48 hours == 2 days
var _MS_PER_DAY = 1000 * 60 * 60 * 24;
// a and b are javascript Date objects
function dateDiffInDays(a, b) {
// Discard the time and time-zone information.
var utc1 = Date.UTC(a.getFullYear(), a.getMonth(), a.getDate());
var utc2 = Date.UTC(b.getFullYear(), b.getMonth(), b.getDate());
return Math.floor((utc2 - utc1) / _MS_PER_DAY);
}
// tweaked OP code
function loadNoticeSuccess(result) {
$("#dvNotice").html('');
var html = "";
for (var i = 0; i < result.length; i++) {
var isPast48Hours = dateDiffInDays(new Date(), result[i].PublishedDate) > 2;
if (isPast48Hours) { /*setup html for default color*/ }
else { /*setup html for red color */ }
// rest of code, using the html you setup above for the variable color
}
}
What's missing here is a real-time verification (and reaction, switching the colors) of the age of the entry: if the page is loaded 47 hours and 59 minutes after the published date, the entry will be red and stay red.
I am working on a page that pulls data from DB. PHP time() is captured and saved to the DB alongside user contents.
I want to be about to subtract the capturedTime from the current time using JavaScript and display how long the post has been made in hr : min : s and should be live.
HTML:
<div class = 'responses'>
<p class = 'capturedTime' style='display: none;'>123456789</p>
</div>
jQuery:
$(document).on('click', '.responses', function () {
$this = $( this );
timeC = $this.prev('.capturedTime').text();
timeNow = $.now()
timeLapsed = ( timeNow - timeC )/1000;
seconds = timeLapsed/60;
mins = seconds/60;
hrs = mins/24;
if ( timeLapsed !== NaN ){
alert(seconds + '------' + mins + '---' + hrs);
}
});
I suggest you to change your code this way:
Fiddle
<body>
<div class='responses'>
<p class='capturedTime' data="1401270715145"></p>
</div>
</body>
var $times, timer;
$times = $('.capturedTime');
timer = setInterval(function () {
var i, len, cache, value, now, minutes, seconds;
for (i = 0, len = $times.length; i < len; i = i + 1) {
cache = $times.eq(i);
now = new Date().getTime();
value = new Date(now - parseInt(cache.attr("data")));
minutes = value.getMinutes();
seconds = value.getSeconds();
cache.html("m:" + minutes + " ss:" + seconds);
}
}, 1000);
try this :
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://timeago.yarp.com/jquery.timeago.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
var lastUpdate = new Date($(".capturedTime").html()*1000)
alert($.timeago(lastUpdate));
});
</script>
or visit this page