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>
Related
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>
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>
I Need to have a code for the timer that doesn't reset the countdown timer even you refresh the page.
I saw sample code at keith wood plug in, but don't know how to implement this in my html file.
here's the link :
http://keith-wood.name/countdown.html
I hope somebody could help me! thanks! :)
I just need Hour, Minutes and Seconds to show. And after the Time given, there is a prompt box that will show "Time is up! " . This one is for the online exam we are developing. Thank you so Much! :)
If you know that the user will have local cache enabled and able to store data, you could save 2 values to localStorage, 1 for the currentTime and 1 for the targetTime. Then you compare the 2 in an interval and if currentTime > targetTime, display your message.
Also bind to the onbeforeunload event and save the new currentTime back into localStorage. This will give you the persisted countdown you are seeking.
Here is an example of how you can do this:
var interval;
let minutes = 1;
let currentTime = localStorage.getItem('currentTime');
let targetTime = localStorage.getItem('targetTime');
if (targetTime == null && currentTime == null) {
currentTime = new Date();
targetTime = new Date(currentTime.getTime() + (minutes * 60000));
localStorage.setItem('currentTime', currentTime);
localStorage.setItem('targetTime', targetTime);
}
else{
currentTime = new Date(currentTime);
targetTime = new Date(targetTime);
}
if(!checkComplete()){
interval = setInterval(checkComplete, 1000);
}
function checkComplete() {
if (currentTime > targetTime) {
clearInterval(interval);
alert("Time is up");
} else {
currentTime = new Date();
document.write(
"\n <font color=\"white\"> Seconds Remaining:" + ((targetTime - currentTime) / 1000) + "</font>");
}
}
document.onbeforeunload = function(){
localStorage.setItem('currentTime', currentTime);
}
Note that I would've made a snippet however stackoverflow and other online IDE's are complaining about security breaches. Note that this is perfectly valid and does not breach any security. Save it as a .js and run.
To start the "countdown" again, invoke localStorage.clear().
Include the jQuery library in the head section of your page.
Download and include the jQuery Countdown CSS and JavaScript in the head section of your page.
Alternately, you can use the minimised version jquery.countdown.min.js (13.5K vs 31.4K, 4.4K when zipped).
Connect the countdown functionality to your divs.
So, your final code will be:
<html>
<head>
<title>jQuery Countdown</title>
<style type="text/css">#import "jquery.countdown.css";</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript" src="jquery.countdown.js"></script>
<script type="text/javascript">
$(function () {
var year = new Date();
year = new Date(year.getFullYear(), 11 - 1, 20);
$('#dvCountDown').countdown({until: year, format: 'HMS'});
$('#year').text(austDay.getFullYear());
});
</script>
</head>
<body>
<h1>jQuery Countdown Basics</h1>
<p>Counting down to 20 November <span id="year">2012</span>.</p>
<div id="dvCountDown"></div>
</body>
</html>
Hope this helps!
If you want to use that script then you'll have to count by date and not a custom countdown value in order for it not to get reset on page refresh: http://jsfiddle.net/qWERa/1/
//Custom countdown value starting on page load
$('#CountdownbyValue').countdown({until: '+0h +0m +8s', format: 'HMS',onExpiry: liftOff,});
//Countdown by Date
$('#CountdownbyDate').countdown({until: new Date(2012, 11-1, 17, 10, 10, 10), format: 'HMS',onExpiry: liftOff,});
//Time is up dialog!
function liftOff() {
alert('Time is up!');
}
Full Code:
<html>
<head>
<title>Demo</title>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.8.2.js'></script>
<script type='text/javascript' src='http://keith-wood.name/js/jquery.countdown.js'></script>
<link rel="stylesheet" type="text/css" href="http://keith-wood.name/css/jquery.countdown.css">
<script type='text/javascript'>
$(window).load(function(){
//Starts from time of page load
$('#CountdownbyValue').countdown({until: '+0h +0m +8s', format: 'HMS',onExpiry: liftOff,});
//Counts by Date
$('#CountdownbyDate').countdown({until: new Date(2012, 11-1, 17, 10, 10, 10), format: 'HMS',onExpiry: liftOff,});
//Time is up!
function liftOff() {
alert('Time is up!');
}
});
</script>
</head>
<body>
<div id="CountdownbyValue"></div>
<div id="CountdownbyDate"></div>
</body>
</html>
Your can also try:
window.onbeforeunload = function() {
return "Are you sure you want to quit this exam?";
}
I suggest you take a look at this Countdown timer with cookies