So I'm making a website and in one of the section I want a simple layout as you can see here:
https://www.dropbox.com/s/mje86d9006xuceq/Capture.PNG?dl=0
I'm pretty sure I need to use javascript to vary the responses "today is (day)" and "10am til when". The responses are as follows:
Monday - Friday
10am til when
Saturday
9am til bike
Sunday
Maybe, maybe not
Can anyone write a simple script that would accomplish this, or point me in the right direction to do this?
I was told the following script would work, but I can't get it to even display on a web page... what am I doing wrong?
var d = new Date();
var n = d.getDay()
if(n == 6) {
document.getElementById("lol").innerHTML = "9am til bike";
} else if(!n) {
document.getElementById("lol").innerHTML = "Maybe, maybe not";
} else {
document.getElementById("lol").innerHTML = "10 am til when";
}
<html>
<body>
<p id="lol"></p>
</body>
</html>
Related
I am very new to this and have worked some things out but this one has got me. I am trying to embed a code into a WIX site (HTML then Javascript) so text appears that is dependant on the day (ddd) and hour. It is for a local radio station, so for example if it is Monday at 14:00 to 16:00 it's the local news, so the box would say "Live Now - Local News".
I have tried all the codes I can find on here but nothing works. Is anyone able to help me please?
Thank you in advance
This is the code I have so far that doesn't work
<script>
var hour = getHours()
var day = getDay()
document.onload=function timechange() {
if day==1 && hour>17 && hour<18
</script>
<body>
<h1>Phatsoundz Radio Presents : </h1>
<script>
A simple example that will display the Live Now - Local News block if it is Tuesday and the hour is between 1200 & 1800 (6pm):
<html>
<body>
<h1>Phatsoundz Radio Presents : </h1>
<div id="liveNowLocalNews" style="display:none">Live Now - Local News</div>
</body>
<script>
var today = new Date();
var hour = today.getHours();
var day = today.getDay();
if ((day === 2) && (hour > 12) && (hour < 18)) {
document.getElementById('liveNowLocalNews').style.display = "block";
}
</script>
</html>
I wanted to make a bookmark that uses today's date in the URL; in other words, when the bookmark is launched, the end of the URL would vary each day. So today's would end in .../2017/1/31 and tomorrow's would end in .../2017/2/1.
I thought it might be easiest to just make a barebones HTML page that includes an inline JavaScript to get current year, month, and date and append it to the main URL (which never changes). Does this make sense? Is there an easier way to accomplish this?
I'm okay with HTML elements, but kind of clueless about JavaScript; I literally copied a snippet from another stackoverflow answer that sounded decent and put it into my head tags as you can see below, and tried to adapt my URL into the ahref link:
<HTML>
<head>
<script>var d=new Date();</script>
</head>
<body>
<a href="http://wol.org?t="+d.getTime()>Continue</a>
</body>
</HTML>
The following will run without need for clicking any buttons:
<HTML>
<head>
<script>
Date.prototype.yyyymmdd = function() { //returns YYYY/MM/DD
var mm = this.getMonth() + 1; // getMonth() is zero-based
var dd = this.getDate();
return [this.getFullYear(),
(mm>9 ? '' : '0') + mm,
(dd>9 ? '' : '0') + dd
].join('/');
};
var date = new Date();
window.location.href = "your.url.com/" + date.yyyymmdd();
</script>
</head>
<body>
</body>
</HTML>
Date function from this answer: https://stackoverflow.com/a/3067896/3803371
Note I usually don't condone modification of native prototypes, but I'm feeling lazy today.
You cannot use javascript expression outside script tag. So you cannot call d.getTime like this. Instead of you can do this:
<a id="c" href="">Continue</a>
<script>
(function() { // wait for window load
var d=new Date();
var a = document.getElementById("c");
a.href = "http://wol.org?t="+d.getTime();
})();
</script>
There's a couple problems with your code. First, you're mixing HTML and JavaScript. JavaScript can only go between the <script> tags. Also, the script needs to go below your link you want to modify.
If you want to get the date in the form year/month/day you'll have to do some modification to the date string you get back from your Date object. What I do below is basically get the date string and split it by / into an array. I know the first index is the month, second is the day, and third gives me the year. I store each of those into a variable to use and rearrange later.
I then had to locate the <a> element using getElementById() and then I changed the href value using my date variables.
var dateString = new Date().toLocaleDateString();
var dateArray = dateString.split('/');
var month = dateArray[0];
var day = dateArray[1];
var year = dateArray[2];
var dateOrder = year + "/" + month + "/" + day;
console.log(dateOrder);
var a = document.getElementById('link');
a.href += dateOrder;
<a id="link" href="http://wol.org?t=">Continue</a>
<script>
// Javascript from above goes here
</script>
I recently discovered this (countdown.js) beautiful script. But it is not documented. So I have huge difficulty in trying to understand its algorithm.
My Goal
I am trying to set a counter just like the one used by amazon for delivery time left.
So it should countdown until midday and reset itself at midday for the next midday. And obviously it also changes the text showed just like amazon.
EXAMPLE
June 15, 8.00 AM; the timer should be like this:
Want it tomorrow, June 16? Order within 4 hrs 0 mins and choose
One-Day Shipping at checkout.
June 15, 1.00 PM; the timer should be like this:
Want it on June 17? Order within 23 hrs 0 mins and choose One-Day
Shipping at checkout.
I hope I'm clear enough. Thank you in advance.
Here is an example that I took from a site but it ends at midnight:
<html>
<head>
</head>
<body>
<h4 id="midnight-countdown"></h4>
<script src="https://smalldo.gs/js/countdown.min.js"></script>
<script>
var clock1 = document.getElementById("midnight-countdown"),
tdy = new Date();
clock1.innerHTML = countdown(new Date(tdy.getFullYear(), tdy.getMonth(), tdy.getDate() + 1)).toString();
setInterval(function() {
clock1.innerHTML = countdown(new Date(tdy.getFullYear(), tdy.getMonth(), tdy.getDate() + 1)).toString();
}, 1000);
</script>
</body>
</html>
Please include your full time! Not just the date. Syntax here:
var timespan = countdown(start|callback, end|callback, units, max, digits);
In your code:
<h4 id="midnight-countdown"></h4>
</blockquote>
<p>Here is how to do a custom live countdown on your page using pure javascript (no jQuery needed).</p>
<script src="https://smalldo.gs/js/countdown.min.js"></script>
<script>
var clock1 = document.getElementById("midnight-countdown")
, tdy = new Date();
clock1.innerHTML = countdown(new Date(tdy.getFullYear(), tdy.getMonth(), tdy.getDate() + 1, tdy.getHours(), tdy.getMinutes()) ).toString();
setInterval(function(){
clock1.innerHTML = countdown(new Date(tdy.getFullYear(), tdy.getMonth(), tdy.getDate() + 1, tdy.getHours(), tdy.getMinutes()) ).toString();
}, 1000);
</script>
I want to display a quote depending on what day it is. Example: Quote of the day is Tuesday March 10 : "Quote here". I have the alert displaying the date, day and time but I want it to display on the page in the h2 header. So after it loads the alert I want the quote, depending on which day it is, to be written on the page.
Thank you.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Class 6 array assignment starter file</title>
<script>
var venomArray = new Array();
venomArray[0] = " Ability is nothing without opportunity - Napoleon Bonaparte";
venomArray[1] = " Nothing happens unless first we dream - Carl Sandburg";
venomArray[2] = "quote3";
var today = new Date();
//var text = document.getElementById('expression').firstChild.nodeValue = venomArray[i];
// if I uncomment this, It displays the index 1 for tuesday. How do I get it to write to the page? Would I use firstChildnodeValue?
alert("The quote of the day for: "+today+ venomArray[today.getDay()-1]);
</script>
</head>
<body>
<section>
<h2 style = "color:red" id='expression'> Quote of the Day : </h2>
<h3> All of the Quotes are listed below:</h3>
<p>
Nothing happens unless first we dream - Carl Sandburg<br>
Believe you can and you're halfway there - Theodore Roosevelt<br>
A place for everything, everything in its place - Benjamin Franklin<br>
Don't let the fear of striking out hold you back - Babe Ruth<br>
We can't help everyone, but everyone can help someone - Ronald Reagan<br>
With self-discipline most anything is possible - Theodore Roosevelt
</p>
</section>
</body>
</html>
You need to set the innerHTML property of the element
document.getElementById("expression").innerHTML = ' Quote of the Day : ' +
today+venomArray[today.getDay()-1];
Check this.. This may help your question
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Class 6 array assignment starter file</title>
</head>
<body>
<section>
<h2 style = "color:red" id='expression'> Quote of the Day : <span id="quote"></span> </h2>
<h3> All of the Quotes are listed below:</h3>
<p>
Nothing happens unless first we dream - Carl Sandburg<br>
Believe you can and you're halfway there - Theodore Roosevelt<br>
A place for everything, everything in its place - Benjamin Franklin<br>
Don't let the fear of striking out hold you back - Babe Ruth<br>
We can't help everyone, but everyone can help someone - Ronald Reagan<br>
With self-discipline most anything is possible - Theodore Roosevelt
</p>
</section>
<script type="text/javascript">
var venomArray = new Array();
venomArray[0] = " Ability is nothing without opportunity - Napoleon Bonaparte";
venomArray[1] = " Nothing happens unless first we dream - Carl Sandburg";
venomArray[2] = "quote2";
venomArray[3] = "quote3";
venomArray[4] = "quote4";
var t = new Date();
//alert(t.getDay());
//var text = document.getElementById('expression').firstChild.nodeValue = venomArray[i];
// if I uncomment this, It displays the index 1 for tuesday. How do I get it to write to the page? Would I use firstChildnodeValue?
// alert("The quote of the day for: "+today+ venomArray[today.getDay()-1]);
document.getElementById("quote").innerHTML = venomArray[t.getDay()-1];
</script>
</body>
</html>
You can use innerHtml property of an element to update the content, something like:
document.getElementById('expression').innerHTML = "Quote";
This is an implementation in pure JavaScript. You usually use some kind of templating now a days to display variable text in a web page.
Use This :-
<script>
var venomArray = new Array();
venomArray[0] = " Ability is nothing without opportunity - Napoleon Bonaparte";
venomArray[1] = " Nothing happens unless first we dream - Carl Sandburg";
venomArray[2] = "quote3";
var today = new Date();
//var text = document.getElementById('expression').firstChild.nodeValue = venomArray[i];
// if I uncomment this, It displays the index 1 for tuesday. How do I get it to write to the page? Would I use firstChildnodeValue?
//alert("The quote of the day for: "+today+ venomArray[today.getDay()-1]);
/*Add this Code*/
var display_date = "today"+ venomArray[today.getDay()-1];
$('h2').html(display_date );
</script>
I've got a javascript widget on my page that outputs times for Sunrise and Sunset. The following code is what gets output (assume that these times change every day). I have no control over the output from the widget.
<div id="sun_container">
<div class="details">
Sunrise: <strong>7:00AM</strong> |
Sunset: <strong>4:30PM</strong>
</div>
</div>
Elsewhere on my page I have an image tag that looks like this:
<div id="sun_button">
<img src="images/day.png">
</div>
I want to parse out the sunrise time and the sunset time and compare these against the current server time (which I can output via PHP if necessary).
If the current server time is not between the sunrise and sunset times, then I want to change the image src to "images/night.png".
Any ideas on how I could do this?
EDIT: I'm now outputting the server time in the page <head> using:
var server_time = "<?=date("H:i:s", time())?>";
which outputs something like this:
var server_time = "17:07:41";
You can do it very easily with the DateJS JavaScript library:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript" src="http://www.datejs.com/build/date.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var sunrise = Date.parse($(".details strong:eq(0)").text());
var sunset = Date.parse($(".details strong:eq(1)").text());
if(Date.parse("" + server_time).between(sunrise, sunset)) {
$("img").attr("src","images/day.png")
}
else {
$("img").attr("src","images/night.png")
}
});
</script>
Try it here!
I think you're looking for this post: What is the best way to parse a time into a Date object from user input in Javascript?
Same premise, it's javascript, but this seems to be the best solution.
EDIT
Also, see #Ender's solution on how to retrieve the data.
Well, you can get the sunrise/sunset times by doing something like the following:
var sunrise = $('#sun_container .details strong:eq(0)').text();
var sunset = $('#sun_container .details strong:eq(1)').text();
From there probably write the server time into a JS var, do your comparison, and then:
if (isNight) {
$('#sun_button img').attr('src', 'images/night.png');
}
That should get you started.
Assuming you can generate a container like this with 24 hour time:
<div id="server_time">18:00</div>
<script>
$(function() {
// Assume server_time is 24hr
var server = new Date(Date.parse("2000-01-01 " + $('#server_time').text()));
var sunrise = $('#sun_container .details strong:eq(0)').first().text();
var sunset = $('#sun_container .details strong:eq(1)').last().text();
// strip off AM/PM
sunrise = sunrise.substring(0, sunrise.length-2);
sunset = sunset.substring(0, sunset.length-2);
// Parse to standard dates
sunrise = new Date(Date.parse("2000-01-01 " + sunrise)) ;
sunset = new Date(Date.parse("2000-01-01 " + sunset));
// Add tweleve hours to compensate for PM
sunset.setHours(sunset.getHours() + 12);
if (server < sunrise || server > sunset)
$('#sun_button > img').attr('src', 'images/night');
});
</script>