Skip to content

Instantly share code, notes, and snippets.

@Numel2020

Numel2020/index.html

Created May 29, 2020 14:34
Show Gist options
  • Save Numel2020/0fc74e10dedbf6c81e72fec4d8b50cfa to your computer and use it in GitHub Desktop.
Save Numel2020/0fc74e10dedbf6c81e72fec4d8b50cfa to your computer and use it in GitHub Desktop.
Download ZIP
time index
Raw
index.html
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<link rel="stylesheet" href="./test.css">
<title>Hello, world!</title>
</head>
<body>
<div class="container py-4 themed-container">
<div class="row">
<div class="col">
<h1>Hello, world!</h1>
</div>
</div>
<div class="row">
<div class="col">
<select id="regions">
<option value="Europe/London">London</option>
<option value="Asia/Singapore">Singapore</option>
<option value="America/Los_Angeles">Los Angeles</option>
<option value="Australia/Melbourne" selected>Melbourne</option>
</select>
</div>
<div class="col">
<h5></h5>
</div>
<div id="time" class="col themed-grid-col">
<h4></h4>
</div>
</div>
<div class="container py-4">
<div class="row">
<div class="col">
<h3>Luxon</h3>
<select id=luxreg>
<option value="Europe/London">London</option>
<option value="Asia/Singapore">Singapore</option>
<option value="America/Los_Angeles">Los Angeles</option>
<option value="Australia/Melbourne" selected>Melbourne</option>
</select>
<div class="col py-4">
<button type="button" class="btn btn-success">addTime</button>
<button type="button" class="btn btn-danger">subtractTime</button>
</div>
</div>
<div class="col">
<div class="box"></div>
</div>
<div class="col themed-grid-col">
<h3 class="luxon">0</h3>
<h3 class="america">0</h3>
<h5 class="offset">0</h5>
</div>
</div>
<div class="row travel py-4">
<div class="circle"></div>
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/build/global/luxon.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.6/gsap.min.js"></script>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
<script src="./index.js"></script>
</body>
</html>
Raw
index.js
var DateTime = luxon.DateTime;
var now = DateTime.local().setLocale('en-GB');
let time = {
hour: 'numeric',
minute: 'numeric',
hour12: true,
}
timeMatrix = {
'am': {
'12': 0,
'1': 0.04,
'2': 0.09,
'3': 0.13,
'4': 0.18,
'5': 0.22,
'6': 0.27,
'7': 0.31,
'8': 0.36,
'9': 0.40,
'10': 0.45,
'11': 0.49,
},
'pm': {
'0': 0.54,
'1': 0.58,
'2': 0.63,
'3': 0.67,
'4': 0.72,
'5': 0.76,
'6': 0.81,
'7': 0.85,
'8': 0.9,
'9': 0.94,
'10': 0.99,
'11': 1,
}
}
////////////////////LUXON?????????
var tl = gsap.timeline({paused: true});
let luxonTime = document.querySelector('.luxon');
let americaTime = document.querySelector('.america');
let selectLuxon = document.querySelector('#luxreg');
let offset = document.querySelector('.offset')
let success = document.querySelector('.btn-success')
let travel = document.querySelector('.travel').getBoundingClientRect();
luxonTime.textContent = now.toLocaleString(time);
let changeReg = selectLuxon.options[selectLuxon.options.selectedIndex].value;
let america = DateTime.fromObject({zone: changeReg})
americaTime.textContent = america.toLocaleString(time);
///////////////////SELECT///////////////////
selectLuxon.addEventListener('change', (e)=>{
changeReg = e.target.value;
let america = DateTime.fromObject({zone: changeReg})
americaTime.textContent = america.toLocaleString(time);
let dayPeriod = americaTime.textContent.slice(-2);
let dayHour = americaTime.textContent.substring(0, americaTime.textContent.indexOf(':'));
console.log(america.toLocaleString(time))
console.log(dayPeriod)
console.log(dayHour)
transfer(dayPeriod,dayHour)
})
///////////////EXERIMENTAL?????/
function transfer(period,hour) {
let count = timeMatrix[period][hour]
console.log(timeMatrix[period][hour])
gsap.to( tl, 1, {progress: count})
}
tl.to('.circle',{duration: 5, x: travel.width, ease: 'none'})
//// time calculation
let box = document.querySelector('.box');
var timer = setInterval(() => {
let currentTime = DateTime.local().setLocale('en-GB')
let futureTime = DateTime.local(2020, 5, 21, 17, 36)
cool(currentTime,futureTime);
console.log('run')
}, 1000);
/////////////////////////TIME SETTER FUNCTION/////////////////////////////////
function cool (oldTime, newTime) {
let same = oldTime.hasSame(newTime, 'second')
// both do the same thing
// this only occurs if exact conditions are meet
if (same === true ) {
console.log('im alive so stop')
gsap.to(box, {rotation: 27, x: 100, duration: 0.9, onComplete: stopTimer, onCompleteParams: [timer] });
}
if (oldTime.ts > newTime.ts) {
gsap.to(box, {rotation: 27, x: 100, duration: 0.9, onComplete: stopTimer, onCompleteParams: [timer]});
}
}
function stopTimer (prop) {clearInterval(prop)}
function hello () {clearInterval(timer)}
////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////
var d1 = DateTime.fromISO('2017-04-30');
var d2 = DateTime.fromISO('2017-04-01');
d1.hasSame(d2, 'millisecond'); // equivalent to `+d1 === +d2`
d1.hasSame(d2, 'minute'); // both DateTimes are in the same minute (and hour, day, month, etc)
d1.hasSame(d2, 'year'); // et
d2 < d1 //=> true
d2.startOf('year') < d1.startOf('year') //=> false
d2.startOf('month') < d1.startOf('month') //=> false
d2.startOf('day') < d1.startOf('day') //=> true
/* Local time refers to the timezone your computer is in.
* UTC is synonymous with Greenwich Mean Time (GMT) in practice.
*
*/
/* You can create date with new Date().
There are four possible syntaxes:
With a date string
With arguments
With timestamp
With no arguments
Never create a date with the date string method.
It’s best to create dates with the arguments method.
Remember (and accept) that month is zero-indexed in JavaScript. */
const months = [
'January',
'February',
'March',
'April',
'May',
'June',
'July',
'August',
'September',
'October',
'November',
'December'
]
const days = [
'Sun',
'Mon',
'Tue',
'Wed',
'Thu',
'Fri',
'Sat'
]
let h4 = document.querySelector('h4');
h4.style.color = 'red';
let string = document.querySelector('h5');
const select = document.getElementById('regions');
let zone = select.options[select.options.selectedIndex].value
const date = new Date();
//const dateUTC = new Date(2020, 4, 20, 2, 27, 0);
const ohno = date.getTimezoneOffset();
// const month = months[d.getMonth()];
// const day = days[d.getDay()];
// const year = d.getFullYear();
// const date = d.getDate();
// const hour = d.getHours();
// const min = d.getMinutes();
// const sec = d.getSeconds();
let options = {
time: {
hour: 'numeric',
minute: 'numeric',
second: 'numeric',
dayPeriod: "short",
hour12: true,
timeZone: zone
},
date: {
weekday: 'long',
year: 'numeric',
month: 'numeric',
day: 'numeric',
timeZone: zone,
timeZoneName: 'short',
dayPeriod: "short",
}
}
h4.textContent = master(date,options.time);
select.addEventListener('change', (e)=>{
options.date.timeZone = e.target.value;
options.time.timeZone = e.target.value;
h4.textContent = master(date,options.time);
})
//h4.textContent = master(date,options.time);
function master (date,options) {
return new Intl.DateTimeFormat(['en-GB','en'], options).format(date);
}
Raw
test.css
.bd-example {
padding: 2.5rem;
margin-right: 0;
margin-left: 0;
border-width: .2rem;
}
.blue {
background-color: bisque;
}
.themed-grid-col {
padding-top: 15px;
padding-bottom: 15px;
background-color: rgba(86, 61, 124, .15);
border: 1px solid rgba(86, 61, 124, .2);
}
.themed-container {
padding: 15px;
margin-bottom: 30px;
background-color: rgba(0, 123, 255, .15);
border: 1px solid rgba(0, 123, 255, .2);
}
.box {
background-color: #006600;
height: 20px;
width: 20px;
border-radius: 10px;
cursor: pointer;
display: inline-block;
}
.circle {
background-color: purple;
height: 20px;
width: 20px;
border-radius: 10px;
cursor: pointer;
display: inline-block;
}
.america {
color: blue;
}
h5 {
color: peru;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment