wellfedbison/gilroyhacks.com
wellfedbison/gilroyhacks.com
2
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Added Dynamic Timer

Browse Source
This commit is contained in:
James Dinh 2022-06-13 20:53:17 -07:00
parent 84348ae258
commit ce0e2bf9bc
3 changed files with 34 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
css/general.css
View File

@ -164,8 +164,8 @@ nav li a:focus::after{
animation-timing-function: linear; animation-timing-function: linear;
} }
#timer-text { #timer {
color: gray; color: rgb(184, 184, 184);
animation: blinking 2s infinite; animation: blinking 2s infinite;
} }
@ -174,7 +174,7 @@ nav li a:focus::after{
opacity: 1; opacity: 1;
} }
50% { 50% {
opacity: 0.5; opacity: 0.7;
} }
100% { 100% {
opacity: 1; opacity: 1;

3
index.html
View File

@ -62,7 +62,7 @@
<li><a onclick="uncheck('check')" href="#team">Team</a></li> <li><a onclick="uncheck('check')" href="#team">Team</a></li>
</ul> </ul>
<div id="banner"> <div id="banner">
<p id="banner-text">Next event:<br>Opening Ceremony, <span id="timer-text">2mo</span></p> <p id="banner-text">Next event:<br>Opening Ceremony, <span id="timer"></span></p>
</div> </div>
</div> </div>
</nav> </nav>
@ -678,6 +678,7 @@
<!-- JavaScript Refs --> <!-- JavaScript Refs -->
<script src="js/scroll_nav.js"></script> <script src="js/scroll_nav.js"></script>
<script src="js/scroll_element.js"></script> <script src="js/scroll_element.js"></script>
<script src="js/timer.js"></script>
<script src="js/data_checkbox.js"></script> <script src="js/data_checkbox.js"></script>
<script src="js/map.js"></script> <script src="js/map.js"></script>
</body> </body>

29
js/timer.js Normal file
View File

@ -0,0 +1,29 @@
// SRC: W3Schools https://www.w3schools.com/howto/howto_js_countdown.asp
// Set the date we're counting down to
var countDownDate = new Date("Aug 12, 2022 16:00:00").getTime();
// Update the count down every 1 second
var x = setInterval(function() {
// Get today's date and time
var now = new Date().getTime();
// Find the distance between now and the count down date
var distance = countDownDate - now;
// Time calculations for days, hours, minutes and seconds
var days = Math.floor(distance / (1000 * 60 * 60 * 24));
var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((distance % (1000 * 60)) / 1000);
// Display the result in the element with id="demo"
document.getElementById("timer").innerHTML = days + "d " + hours + "h";
// + minutes + "m " + seconds + "s ";
// If the count down is finished, write some text
if (distance < 0) {
clearInterval(x);
document.getElementById("timer").innerHTML = "NOW";
}
}, 1000);