<script src="https://code.jquery.com/jquery-3.1.0.js"></script><script src="https://cdn.jsdelivr.net/momentjs/2.14.1/moment-with-locales.min.js"></script>
<div id="gal">
<img src="http://i.imgur.com/OuI6GA9.png" />
<div id="sun" class="sun"></div>
</div>
<p id="day"></p>
<div id="gal" class="two">
<img src="http://i.imgur.com/OuI6GA9.png" />
<div id="sun2" class="sun"></div>
</div>
<p id="month"></p>
#gal {
width:500px;
height:500px;
border:1px solid;
position:relative;
}
#gal img {
position:absolute;
top:230px;
left:230px;
}
.sun {
border-radius:50%;
background:orange;
height:60px;
width:60px;
display:inline-block;
position:absolute;
top:220px;
left:50px;
}
#gal.two {
height:200px;
}
#gal.two img {
top:80px;
}
#gal.two .sun {
position:absolute;
top:70px;
}
function toRadians(degrees) {
return degrees / 180 * Math.PI
}
function getJulianFromUnix(time) {
return ((time / 1000) / 86400.0) + 2440587.5
}
function sunCoordinates(time) {
let D = getJulianFromUnix(time) - 2451545
let g = 357.529 + 0.98560028 * D
let L = 280.459 + 0.98564736 * D
let lambda = L + 1.915 * Math.sin(toRadians(g)) + 0.020 * Math.sin(toRadians(2 * g))
let e = 23.439 - 0.00000036 * D
let y = Math.cos(toRadians(e)) * Math.sin(toRadians(lambda))
let x = Math.cos(toRadians(lambda))
let rightAscension = Math.atan2(y, x)
let declination = Math.asin(
Math.sin(toRadians(e)) * Math.sin(toRadians(lambda))
)
let gmst = 18.697374558 + 24.06570982441908 * D
let hourAngle = (gmst / 24 * Math.PI * 2) - rightAscension
return {
hourAngle: hourAngle,
declination: declination,
time: new Date(time).toLocaleString()
}
}
//jour-nuit
function a312(time) {
const coord = sunCoordinates(time.utcOffset(0).format('x'));
const r = 180;
const a = coord.hourAngle;
let x = 230 + r * Math.cos(a)
let y = 230 + r * Math.sin(a)
$("#sun").css({
left: x+"px",
top: y+"px"
});
}
//jour-nuit
function a312_2(time) {
const coord = sunCoordinates(time.utcOffset(0).format('x'));
const r = 180;
const a = coord.declination;
let x = 230 + r * Math.cos(a-Math.PI)
let y = 70 + r * Math.sin(a-Math.PI)
$("#sun2").css({
left: x+"px",
top: y+"px"
});
}
var a312_day = 0;
var a312_month = 0;
setInterval(function() {
a312_day -= .1;
a312_month -= 10;
let date = moment(new Date()).add(a312_day, 'hours');
let date2 = moment(new Date()).add(a312_month, 'day');
a312(date);
a312_2(date2);
$("#day").text(date);
$("#month").text(date2);
}, 100);
Output
300px
This bin was created anonymously and its free preview time has expired (learn why). — Get a free unrestricted account
Dismiss xKeyboard Shortcuts
Shortcut | Action |
---|---|
ctrl + [num] | Toggle nth panel |
ctrl + 0 | Close focused panel |
ctrl + enter | Re-render output. If console visible: run JS in console |
Ctrl + l | Clear the console |
ctrl + / | Toggle comment on selected lines |
ctrl + ] | Indents selected lines |
ctrl + [ | Unindents selected lines |
tab | Code complete & Emmet expand |
ctrl + shift + L | Beautify code in active panel |
ctrl + s | Save & lock current Bin from further changes |
ctrl + shift + s | Open the share options |
ctrl + y | Archive Bin |
Complete list of JS Bin shortcuts |
JS Bin URLs
URL | Action |
---|---|
/ | Show the full rendered output. This content will update in real time as it's updated from the /edit url. |
/edit | Edit the current bin |
/watch | Follow a Code Casting session |
/embed | Create an embeddable version of the bin |
/latest | Load the very latest bin (/latest goes in place of the revision) |
/[username]/last | View the last edited bin for this user |
/[username]/last/edit | Edit the last edited bin for this user |
/[username]/last/watch | Follow the Code Casting session for the latest bin for this user |
/quiet | Remove analytics and edit button from rendered output |
.js | Load only the JavaScript for a bin |
.css | Load only the CSS for a bin |
Except for username prefixed urls, the url may start with http://jsbin.com/abc and the url fragments can be added to the url to view it differently. |