I need to update my Header (h1) according to the current time. For example at 7:45am to 8:00am 'Current Event' should change to 'Event1', at 8:00am to 8:15am it should change to 'Event2' and so on.
<html>
<head>
<title>ShriTeq 2015</title>
</head>
<body>
<center>
<img src = "image.png" width = "25%" height = "auto"/>
<h1 id = "ce" style="font-weight:lighter; font-family: 'Raleway', sans-serif; font-size:70px;">Current Event</h1>
</center>
</body>
</html>
Something like that ?
// All events :
// Event 1 start 2015-10-09 at 00:00:00 to 06:00:00, Event 2 from 06:00:01 to 12:00:00. If out of dates, Default message is shown.
var eventTimes = [
{
name: "Event 1",
from: new Date('2015-10-09T00:00:00').getTime(),
to: new Date('2015-10-09T06:00:00').getTime()
},
{
name: "Event 2",
from: new Date('2015-10-09T06:00:01').getTime(),
to: new Date('2015-10-09T12:00:00').getTime()
}
]
function updateEventName() {
var now = new Date().getTime();
var name = "Default message";
for (var i = 0; i < eventTimes.length; i++) {
if (now >= eventTimes[i].from && now <= eventTimes[i].to) {
name = eventTimes[i].name;
break;
}
}
document.getElementById("ce").innerHTML = name;
}
// Execute the function every second
setInterval(updateEventName, 1000);
updateEventName();
<!--<html>
<head>
<title>ShriTeq 2015</title>
</head>
<body> -->
<center>
<img alt = 'Missing Img' src = "image.png" width = "25%" height = "auto"/>
<h1 id = "ce" style="font-weight:lighter; font-family: 'Raleway', sans-serif; font-size:70px;">Current Event</h1>
</center>
<!--
</body>
</html>
-->
Try;
function headerChange(){
var d = new Date();
var m = d.getMinutes();
var h = d.getHours();
if(h == 7 && m>=45){
$("#ce").html("Event1");
}else if(h == 8 && m<=15){
$("#ce").html("Event2");
}
}
headerChange();
setTimeout(headerChange, 1000);
Hope this helps
Related
I have poured over this code and I feel pretty positive about it. That being said, something is obviously missing, as the program itself comes up with an empty clock when run in the browser. I know that the brackets and parentheses all have a matching set, and I am fairly confident in my functions. The chrome developer tools were unhelpful. Anyone with a good eye for Javascript able to see what is missing here?
"use strict";
var $ = function(id) {
return document.getElementById(id);
};
var displayCurrentTime = function() {
var today = new Date();
var hour = today.getHours();
var min = today.getMinutes();
var sec today.getSeconds();
var ap = "AM";
if (hour > 12) {
h = h - 12;
ap = "PM";
} else {
switch (hour) {
case 12:
ap = "PM";
break;
case 0:
ap = "AM";
break;
}
}
$("hours").firstChild.nodeValue = padSingleDigit(hours);
$("minutes").firstChild.nodeValue = padSingleDigit(min);
$("seconds").firstChild.nodeValue = padSingleDigit(sec);
$("ap").firstChild.nodeValue = padSingleDigit(ap);
};
var padSingleDigit = function(num) {
if (num < 10) {
return "0" + num;
} else {
return num;
}
};
window.onload = function() {
displayCurrentTime();
setInterval(displayCurrentTime, 1000);
};
<html>
<head>
<meta charset="UTF-8">
<title>Clock</title>
<link rel="stylesheet" href="clock.css">
<script src="clock.js"></script>
</head>
<body>
<main>
<h1>Digital clock</h1>
<fieldset>
<legend>Clock</legend>
<span id="hours"> </span>:
<span id="minutes"> </span>:
<span id="seconds"> </span>
<span id="ampm"> </span>
</fieldset>
</main>
</body>
</html>
You simply have a lot of (3) typos ...
"use strict";
var $ = function(id) {
return document.getElementById(id);
};
var displayCurrentTime = function() {
var today = new Date();
var hour = today.getHours();
var min = today.getMinutes();
var sec = today.getSeconds();
var ap = "AM";
if (hour > 12) {
hour = hour - 12;
ap = "PM";
} else {
switch (hour) {
case 12:
ap = "PM";
break;
case 0:
ap = "AM";
break;
}
}
$("hours").firstChild.nodeValue = padSingleDigit(hour);
$("minutes").firstChild.nodeValue = padSingleDigit(min);
$("seconds").firstChild.nodeValue = padSingleDigit(sec);
$("ampm").firstChild.nodeValue = padSingleDigit(ap);
};
var padSingleDigit = function(num) {
if (num < 10) {
return "0" + num;
} else {
return num;
}
};
window.onload = function() {
displayCurrentTime();
setInterval(displayCurrentTime, 1000);
};
<main>
<h1>Digital clock</h1>
<fieldset>
<legend>Clock</legend>
<span id="hours"> </span>:
<span id="minutes"> </span>:
<span id="seconds"> </span>
<span id="ampm"> </span>
</fieldset>
</main>
*there are other (non-functional) problems in this code, but since it is not the Q, I'd not change them to keep this answer on point.
Somehow I can't create external javascript files. If I import them from other examples, they work fine but if it is files I create and import them, they don't work. They are working fine if I inclued them into the html but if I reference them they don't work. I don't know what I am doing wrong.
Here's my html:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Documento sem tÃtulo</title>
</head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.ui.draggable.js" type="text/javascript"></script>
<!-- Core files -->
<script src="jquery.alerts.js" type="text/javascript"></script>
<body>
<script type="text/javascript" src="horario.js"></script>
<div id="entrada">
<input id="time" class="inputs" type="text" maxlength="2"></input>
<input id="time2" class="inputs" type="text" maxlength="2"></input>
<button class="inputs" id="confirm_button" class="inputs1" onKeyPress="localStore()" onClick="localStore()">entrada</button>
</div>
<div id="result"></div>
<div id="millsentr"></div>
<div id="millssai"></div>
<div id="mills"></div>
<div id="totHoras"></div>
</body>
</html>
And here's the javascript file:
$(".inputs").keyup(function () {
if (this.value.length == this.maxLength) {
$(this).next('.inputs').focus();
}
});
$(".inputs1").keyup(function () {
if (this.value.length == this.maxLength) {
$(this).next('.inputs').focus();
}
});
$(document).ready( function() {
$("#confirm_button").click( function() {
jConfirm('Can you confirm this? ', 'Confirmation Dialog', function(r) {
var entradasaida = 0;
entradasaida = localStorage.getItem("entradasaida");
if(r == true){
if(entradasaida == 0){
var time = $('#time').val();
var time2 = $('#time2').val();
var datetime = new Date();
var year = datetime.getFullYear();
var month = datetime.getMonth()+1;
if(month < 10){
month = "0"+month
}
var day = datetime.getDay()+1;
if(day < 10){
day = "0"+day
}
var date = new Date(year+"-"+month+"-"+day+" "+time+":"+time2);
var mills = date.getTime();
localStorage.setItem("horas", time);
localStorage.setItem("mins", time2);
localStorage.setItem("entradasaida",1);
localStorage.setItem("millsEnt",mills);
$('#confirm_button').text("Saida");
$('#time, #time2').val("");
$('#millsentr').text(mills);
} else{
var horasEnt = localStorage.getItem("horas");
var minsEnt = localStorage.getItem("mins");
var entrada = localStorage.getItem("millsEnt");
localStorage.setItem("entradasaida",0);
$('#confirm_button').text("Entrada");
var time = $('#time').val();
var time2 = $('#time2').val();
var datetime = new Date();
var year = datetime.getFullYear();
var month = datetime.getMonth()+1;
if(month < 10){
month = "0"+month
}
var day = datetime.getDay()+1;
if(day < 10){
day = "0"+day
}
var date1 = new Date(year+"-"+month+"-"+day+" "+time+":"+time2);
var millssai = date1.getTime();
$('#millssai').text(millssai);
var totMills = (millssai - entrada)
var horas = time - horasEnt;
var mins = time2 - minsEnt;
if(mins < 0){
mins = mins*(-1);
horas = horas-1;
}
var totHoras = horas+":"+mins
$('#totHoras').text(totHoras);
$('#mills').text(totMills);
$('#time, #time2').val("");
}
} else{r == false}
});
});
});
In this, the horario.js is the file I created and is not working, the other script files I used from examples are working ok.
I have a setInterval in my HTML/Javascript document.
Now, as far as I am aware, the setInterval part is typed out exactly as it is in another document of mine, and it works perfectly there. But in this the interval is not repeating every 1 second. It runs it once, then stops. Are there any blatant errors that I am missing?
<html>
<head>
<title>Time</title>
</head>
<body>
<p id="line-one" />
<p id="line-two" />
<p id="line-three" />
<p id="line-four" />
<p id="seconds" />
<SCRIPT type='text/JavaScript'language='JavaScript'>
var now = new Date();
var hour = now.getHours();
var minute = now.getMinutes();
var second = now.getSeconds();
var nIntervId;
function counter()
{
if (typeof(nIntervId) != "undefined") {
clearInterval(nIntervId);
}
nIntervId = setInterval(changeASCII, 1000);
}
function changeASCII()
{
document.getElementById("seconds").innerHTML = second;
switch(second) {
case 00:
document.getElementById("line-one").innerHTML = " ___...___ ";
document.getElementById("line-two").innerHTML = "|...|.|...|";
document.getElementById("line-three").innerHTML = "|.|.|.|.|.|";
document.getElementById("line-four").innerHTML = "|___|.|___|";
break;
case 01:
document.getElementById("line-one").innerHTML = " ___ ___";
document.getElementById("line-two").innerHTML = "| | |_ |";
document.getElementById("line-three").innerHTML = "| | | _| |_";
document.getElementById("line-four").innerHTML = "|___| |_____|";
break;
default:
document.getElementById("line-one").innerHTML = "Nothing";
document.getElementById("line-two").innerHTML = "To";
document.getElementById("line-three").innerHTML = "See";
document.getElementById("line-four").innerHTML = "Here";
break;
}
}
window.onload = counter();
</SCRIPT>
</body>
</html>
Everything is fine, although, You do not update real value of second hence You get it from date, which also is not updated.
Check this out in fiddle;
http://jsfiddle.net/H8C4W/
function changeASCII()
{
now=new Date();
second=now.getSeconds();
...
The problem is that when I put the correct hour and the incorrect minutes it always returns me: "bad" and "very nice". I don't know what is going wrong so could you help me please.
I have the following html and JS:
<!DOCTYPE html>
<html>
<body>
<script language="Javascript">
var d = new Date();
var h = d.getHours();
var h1 = document.forms["INICI"].starthour.value;
var m = d.getMinutes();
var m1 = document.forms["INICI"].startminut.value;
function myHour() {
if ( h==h1 ) {
document.write("nice"+"<br>");
} else {
document.write("bad"+"<br>");
}
}
function myMinut() {
if ( m1==m ){
document.write("very nice"+"<br>");
} else {
document.write("very bad"+"<br>")
}
}
</script>
<form name="INICI">
start hour: <input name="starhour"/> <br />
<br>
start minut: <input name="startminut"/> <br />
<input id="insert1"
onclick="myHour(); myMinut();"
type="submit"
value="Click" />
</form>
</body>
</html>
(I'm new here.... sorry if I did this post very bad)
I had improved your code. here is a working version of it.
<!DOCTYPE html>
<html>
<body>
<form name="INICI">
start hour:
<input name="starthour" />
<br />
<br>
start minut:
<input name="startminut" />
<br />
<input id="insert1" onclick="EvaluateResults()" type="submit" value="Click" />
</form>
<script language="Javascript">
function EvaluateResults() {
var d = new Date();
var h = d.getHours();
var h1 = document.forms["INICI"].starthour.value;
var m = d.getMinutes();
var m1 = document.forms["INICI"].startminut.value;
console.log(h + ' ' + h1);
if (h == h1) {
document.write("nice" + "<br>");
}
else {
document.write("bad" + "<br>");
}
if (m1 == m) {
document.write("very nice" + "<br>");
}
else {
document.write("very bad" + "<br>")
}
}
</script>
</body>
</html>
What went wrong with your code is that you are taking the time when the JavaScript file loaded and executed and not when the button is pressed. What i did to solve your problem is I just created a method and transferred the code that acquires the time.
You are setting your variables when the page loads so they will always be the same.
If you put them inside the functions this could be solved
var d = new Date();
var h = d.getHours();
var m = d.getMinutes();
function myHour()
{
var h1 = document.forms["INICI"].starthour.value;
if (h==h1){
document.write("nice"+"<br>");
}
else{
document.write("bad"+"<br>");
}
}
function myMinut()
{
var m1 = document.forms["INICI"].startminut.value;
if (m1==m){
document.write("very nice"+"<br>");
}
else{
document.write("very bad"+"<br>")
}
}
You have a typo:
<input name="starhour"/>
Needed
<input name="starthour"/>
Also put your script tag to the end of the body
This is my code:
<html>
<head>
<title>Perl WEB</title>
<script type="text/javascript" src="/Perl1/codemirror.js"></script>
<link rel="stylesheet" href="/Perl1/codemirror.css"/>
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="http://code.guru99.com/perl/perl.js"></script>
<style>
.CodeMirror {
border: 1px solid #eee;
}
.CodeMirror-scroll {
height: auto;
overflow-y: hidden;
overflow-x: auto;
}
</style>
<script>
$(document).ready(function(){
$("form").submit(function(){
alert("Submitted");
});
});
</script>
<script type="text/javascript">
function execute() {
p5pkg.CORE.print = function(List__) {
var i;
for (i = 0; i < List__.length; i++) {
document.getElementById('print-result').value += p5str(List__[i])
}
return true;
};
p5pkg.CORE.warn = function(List__) {
var i;
List__.push("\n");
for (i = 0; i < List__.length; i++) {
document.getElementById('log-result').value += p5str(List__[i]);
}
return true;
};
p5pkg["main"]["v_^O"] = "browser";
p5pkg["main"]["Hash_INC"]["Perlito5/strict.pm"] = "Perlito5/strict.pm";
p5pkg["main"]["Hash_INC"]["Perlito5/warnings.pm"] = "Perlito5/warnings.pm";
var source = document.getElementById('source').value;
alert(source);
var pos = 0;
var ast;
var match;
document.getElementById('log-result').value = "";
// document.getElementById('js-result').value = "";
document.getElementById('print-result').value = "";
try {
// compile
document.getElementById('log-result').value += "Compiling.\n";
var start = new Date().getTime();
var js_source = p5pkg["Perlito5"].compile_p5_to_js([source]);
var end = new Date().getTime();
var time = end - start;
document.getElementById('log-result').value += "Compilation time: " + time + "ms\n";
// document.getElementById('js-result').value += js_source + ";\n";
// run
start = new Date().getTime();
eval(js_source);
end = new Date().getTime();
time = end - start;
document.getElementById('log-result').value += "Running time: " + time + "ms\n";
p5pkg.CORE.print(["\nDone.\n"]);
}
catch(err) {
document.getElementById('log-result').value += "Error:\n";
document.getElementById('log-result').value += err + "\n";
document.getElementById('log-result').value += "Compilation aborted.\n";
}
}
</script>
</head>
<body>
<form>
<textarea id="source" cols="70" rows="10">
say 'h';
</textarea>
<div class="hint">This code is editable. Click Run to execute.</div>
<input type="button" value="Run" onclick="execute()"/></br>
Output:</br>
<textarea id="print-result" disabled="true" rows="10" cols="70"></textarea></br>
Log:</br>
<textarea id="log-result" disabled="true" cols="70"></textarea>
<script>
var editor = CodeMirror.fromTextArea(document.getElementById("source"), {
lineNumbers: true,
indentUnit: 4,
indentWithTabs: true,
enterMode: "keep",
tabMode: "shift"
});
</script>
</form>
</body>
</html>
problem : so I have alert the value of text area by:
var source = document.getElementById('source').value;
alert(source);
but the value of text area is alert is load at the time of page load.and I want to alert current value of textarea.
I have also tried this:
$("form").submit(function())
but that also not useful.
How can I do this?
you can use
$("#source").val();
Try to use
$("#source").val() to get value of textarea
Thanks
I suppose your problem might be occuring because of the Editor you are using.
http://codemirror.net/doc/manual.html
You should be able to retrieve the value with:
editor.getValue()