본문 바로가기

javascript

세계각지의 밤과 낮을 한눈에 볼수 있는 Day & Night 지도

<!--1. <BODY></BODY> 부분에 아래의 스크립트를 복사해 넣으세요-->


<body style="width:100%;overflow-x:hidden;overflow-y:scroll">

<script>

// 세계지도
var globalmapimage="globalmap.gif"

// 왼쪽위치
var globalmapleftposition=100

// 위쪽 위치
var globalmaptopposition=100

// 드롭다운메뉴의 왼쪽위치
var chooseutctimeleftposition=120

// 드롭다운메뉴의 왼쪽위치
var chooseutctimetopposition=120
</script>

<script>
<!--
var globalmapwidth, globalmapheigth
var nightzonewidth,nightzoneheight

var clipnighttop
var clipnightbottom
var clipnightright=0
var clipnightleft=0
var clipnightpoints

var differencehours
var differencepixels
var now=new Date()
var utchours=now.getUTCHours()
var monthimage=now.getMonth()

if (monthimage==0) {monthimage="january"}
else if (monthimage==1) {monthimage="february"}
else if (monthimage==2) {monthimage="march"}
else if (monthimage==3) {monthimage="april"}
else if (monthimage==4) {monthimage="may"}
else if (monthimage==5) {monthimage="june"}
else if (monthimage==6) {monthimage="july"}
else if (monthimage==7) {monthimage="august"}
else if (monthimage==8) {monthimage="september"}
else if (monthimage==9) {monthimage="october"}
else if (monthimage==10) {monthimage="november"}
else if (monthimage==11) {monthimage="december"}

var preloadmonthimage=new Image()
preloadmonthimage.src=monthimage

var preloadglobalmap=new Image()
preloadglobalmap.src=globalmapimage

function initiatedaynight() {
        choose.newhour.options[choose.newhour.selectedIndex].text=utchours
    choose.newhour.options[choose.newhour.selectedIndex].value=utchours
        choose.newmonth.options[choose.newmonth.selectedIndex].text=monthimage
    choose.newmonth.options[choose.newmonth.selectedIndex].value=monthimage
        
        globalmap.innerHTML="<img src='"+globalmapimage+"'>"
        globalmapwidth=document.all.globalmap.offsetWidth
        globalmapheight=document.all.globalmap.offsetHeight
        
        document.all.globalmap.style.posLeft=globalmapleftposition
        document.all.globalmap.style.posTop=globalmaptopposition
        document.all.chooseutctime.style.posLeft=chooseutctimeleftposition
        document.all.chooseutctime.style.posTop=chooseutctimetopposition
        
        document.all.nightzoneleft.style.posTop=globalmaptopposition
        document.all.nightzoneright.style.posTop=globalmaptopposition
        
        document.all.nightzoneleft.style.posLeft=globalmapleftposition
        document.all.nightzoneright.style.posLeft=globalmapleftposition
        
        nightzonewidth=globalmapwidth
        nightzoneheight=globalmapheight

        clipnighttop=0
        clipnightbottom=globalmapheight
        
        document.all.globalmap.style.visibility="visible"
        document.all.chooseutctime.style.visibility="visible"
        
        nightzoneright.innerHTML="<img src='"+monthimage+".gif' width='"+nightzonewidth+"' height='"+nightzoneheight+"'>"
        nightzoneleft.innerHTML="<img src='"+monthimage+".gif' width='"+nightzonewidth+"' height='"+nightzoneheight+"'>"
        setnightstripes()
}

function initiatenewtime() {
        utchours=choose.newhour.options[choose.newhour.selectedIndex].value
        monthimage=choose.newmonth.options[choose.newmonth.selectedIndex].value
        initiatedaynight()
}


function setnightstripes() {
        differencepixels=globalmapwidth/24*utchours
        document.all.nightzoneleft.style.posLeft-=differencepixels
        clipnightleft=document.all.globalmap.style.posLeft-document.all.nightzoneleft.style.posLeft
        clipnightright=globalmapwidth
        clipnightpoints="rect("+clipnighttop+" "+clipnightright+" "+clipnightbottom+" "+clipnightleft+")"
        document.all.nightzoneleft.style.clip=clipnightpoints
        document.all.nightzoneleft.style.visibility="visible"
        
        document.all.nightzoneright.style.posLeft=document.all.nightzoneleft.style.posLeft+globalmapwidth
        clipnightleft=0
                clipnightright=globalmapwidth-(document.all.nightzoneright.style.posLeft-document.all.globalmap.style.posLeft)
        clipnightpoints="rect("+clipnighttop+" "+clipnightright+" "+clipnightbottom+" "+clipnightleft+")"
        document.all.nightzoneright.style.clip=clipnightpoints
        document.all.nightzoneright.style.visibility="visible"
}

if (document.all) {
document.write('<div id="globalmap" style="position:absolute;visibility:hidden"></div>')
document.write('<div id="nightzoneleft" style="position:absolute;visibility:hidden;filter:alpha(opacity=30)"></div>')
document.write('<div id="nightzoneright" style="position:absolute;visibility:hidden;filter:alpha(opacity=30)"></div>')
document.write('<div id="chooseutctime" style="position:absolute;visibility:hidden;">')
document.write('<form name="choose">')
document.write('<font size=1 color=black face=굴림>GMT 선택</font><br>')
document.write('<select name="newhour" style="font-size:9pt" onChange="initiatenewtime()">')
document.write('<option value="hour">시간</option>')
document.write('<option value="0">0</option>')
document.write('<option value="1">1</option>')
document.write('<option value="2">2</option>')
document.write('<option value="3">3</option>')
document.write('<option value="4">4</option>')
document.write('<option value="5">5</option>')
document.write('<option value="6">6</option>')
document.write('<option value="7">7</option>')
document.write('<option value="8">8</option>')
document.write('<option value="9">9</option>')
document.write('<option value="10">10</option>')
document.write('<option value="11">11</option>')
document.write('<option value="12">12</option>')
document.write('<option value="13">13</option>')
document.write('<option value="14">14</option>')
document.write('<option value="15">15</option>')
document.write('<option value="16">16</option>')
document.write('<option value="17">17</option>')
document.write('<option value="18">18</option>')
document.write('<option value="19">19</option>')
document.write('<option value="20">20</option>')
document.write('<option value="21">21</option>')
document.write('<option value="22">22</option>')
document.write('<option value="23">23</option>')
document.write('</select><br>')
document.write('<font size=1 color=black face=굴림>월 선택</font><br>')
document.write('<select name="newmonth" style="font-size:9pt" onChange="initiatenewtime()">')
document.write('<option value="choose month">월 선택</option>')
document.write('<option value="january">january</option>')
document.write('<option value="february">february</option>')
document.write('<option value="march">march </option>')
document.write('<option value="april">april</option>')
document.write('<option value="may">may</option>')
document.write('<option value="june">june</option>')
document.write('<option value="july">july</option>')
document.write('<option value="august">august</option>')
document.write('<option value="september">september</option>')
document.write('<option value="october">october</option>')
document.write('<option value="november">november</option>')
document.write('<option value="december">december</option>')
document.write('</select>')
document.write('</form>')
document.write('</div>')

window.onload=initiatedaynight
}

//-->
</script>

<DIV ID="text" style="position:absolute;left:10px;top:480px" >