½ÃÀÛÆäÀÌÁö·Î Áñ°Üã±âÃß°¡
·Î±×ÀÎ
ȸ¿ø°¡ÀÔ l Ã⼮üũ l ¸¶ÀÌÆäÀÌÁö l CGIMALL
happycgi
ÀÚ·á½Ç »çÀÌÆ®µî·Ï ·©Å·100 ÇÁ·Î±×·¥¸®ºä °ü¸®ÀÚÃßõÀÚ·á Ãʺ¸°¡À̵å
Ä¿¹Â´ÏƼ
Àüü ÆîÃ帱â
Äü¸Þ´º¸µÅ© jquery , CSS , PHP , Javascript , ¹«·áÆùÆ® , ASP
»ó¼¼°Ë»ö
Ȩ > JAVASCRIPT > javascript ¼Ò½ºÃ¢°í > ½Ã°£,³¯Â¥ > ÀÚ¹Ù·Î ¸¸µç 3D½Ã°è »ó¼¼Á¤º¸
»çÀÌÆ®µî·Ï
Ŭ¶ó¿ìµåű×
javascript
PHP
HTML
ASP
mysql
CSS
Mobile
image
jquery
slide
¸Þ´º
�޴�
2023
ÇöÀçÁ¢¼ÓÀÚ ¸í »õ·Î°íħ
ÀÚ¹Ù·Î ¸¸µç 3D½Ã°è
¼Ò½ºÅë°èÁ¤º¸ ¿À·ù½Å°í ¹× ¹®ÀÇ
ÇØÇÇÆÀ
³×ƼÁð
Æ®À§ÅÍ·Î º¸³»±â ÆäÀ̽ººÏÀ¸·Î º¸³»±â
¼Ò½ººÐ·ù ½Ã°£,³¯Â¥
´Ù¿î·Îµå Ƚ¼ö 1025 ȸ
°£´Ü¼³¸í ÀÚ¹Ù½ºÅ©¸³Æ®·Î ¸¸µç 3D½Ã°èÀÔ´Ï´Ù. ¸¶¿ì½º·Ñ¿À¹ö½Ã ¹æÇâÀÌ ¹Ù²î¸ç ¿òÁ÷ÀÓµµ »¡¶óÁö°Å³ª ´À·ÁÁö°Ô ÇÒ¼öÀÖ½À´Ï´Ù.
Æò°¡Çϱâ ÈǸ¢ÇÔ ¸Å¿ìÁÁÀ½ ÁÁÀ½ ±¦ÂúÀ½ º¸Åë º°·Î
ȨÆäÀÌÁö¹Ù·Î°¡±â ¼Ò½º´Ù¿î·Îµå µ¥¸ð ¹Ì¸®º¸±â ½ºÅ©·¦Çϱâ

¾Æ·¡ ÆĶõ»öÀÇ ½ºÅ¸ÀϺκÐÀÇ ÀÚ¹Ù¸¦ ¼öÁ¤ÇϽøé Æ÷Áö¼Ç ¹× ½Ã°èÀÇ À§Ä¡°¡ ¹Ù²ò´Ï´Ù.

¿¹) <style type="text/css">
    body {
        position:absolute;
        overflow:hidden;
        margin:0px;
        padding:0px;
        background:#222;
        left:0;
        top:0;
        width:100%;
        height:100%;
    }
    img {
        position:absolute;
        left:-1000px;
    }
</style>
     
>> ¿¹) <style type="text/css">
    body {
        position:absolute;
        overflow:hidden;
        margin:0px;
        padding:0px;
        background:#f3f3f3;
        left:6;    ¿ÞÂʸ¶Áø°ª
        top:6;    »ó´Ü¸¶Áø°ª
        width:100%;
        height:100%;
    }
    img {
        position:absolute;
        left:-1000px;
    }
</style>
     

¾Æ·¡´Â ÀÚ¹Ù½ºÅ©¸³Æ® ¿ø¹®ÀÔ´Ï´Ù.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <title<ÇØÇÇCGI</title>
<style type="text/css">
    body {
        position:absolute;
        overflow:hidden;
        margin:0px;
        padding:0px;
        background:#222;
        left:0;
        top:0;
        width:100%;
        height:100%;
    }
    img {
        position:absolute;
        left:-1000px;
    }
</style>

<script type="text/javascript">
<!--
window.onerror = new Function("return true");
var O=[];
var px=0;
var py=0;
var rx=0;
var ry=0;
var TM=[];
var Tm=[];
var A = 1000;
var crx;
var srx;
var cry;
var sry;

var digits = [
"#####  #  ###########   ##########################     ",
"#   #  #      #    ##   ##    #        ##   ##   #     ",
"#   #  #      #    ##   ##    #        ##   ##   #  #  ",
"#   #  #  ##### ###################    ###########     ",
"#   #  #  #        #    #    ##   #    ##   #    #  #  ",
"#   #  #  #        #    #    ##   #    ##   #    #     ",
"#####  #  ##########    ###########    ###########     "
];


function CObj(a,z){
    // create led element
    this.o=document.createElement("img");
    this.o.src=document.getElementById("plot").src;
    document.getElementById("clock3D").appendChild(this.o);
    this.a=a;
    this.z=z;
    this.plot=true;
    // leds lighting
    this.alpha=function(opacity){
        with(this){
            if(opacity>0){
                if(!plot){
                    plot=true;
                    o.src=document.getElementById("plot").src;
                }
            } else {
                if(plot){
                    plot=false;
                    o.src=document.getElementById("plotR").src;
                }
            }
        }
    }
    // main 3D function
    this.anim=function() {
        with (this) {
            // z axis rotation
            x=Math.sin(A+a)*100;
            y=Math.cos(A+a)*100;
            // simple 3D
            x1=y*crx-z*srx;
            zz=y*srx+z*crx;
            y1=x*cry-zz*sry;
            zz=x*sry+zz*cry;
            // 2D projection
            r=396/(396+zz);
            x=Math.round(150-x1/r);
            y=Math.round(100-y1/r);
            w=Math.round(2+Math.max(4,zz*.12));
            // leds lighting
            alpha(zz);
            // html positioning
            with(o.style){
                left=x+"px";
                top=y+"px";
                width=height=w+"px";
                zIndex=Math.round(1000+zz);
            }
        }
    }
}

function mainloop() {
    // rotations
    A-=Math.PI/40;
    rx+=px;
    ry+=py;
    crx=Math.cos(rx);
    srx=Math.sin(rx);
    cry=Math.cos(ry+Math.PI/2);
    sry=Math.sin(ry+Math.PI/2);
    // return to the horizontale
    rx*=.98;
    ry*=.98;
    px*=.98;
    py*=.98;
    // refresh time
    k=0;
    for(var i=0;i<6;i++){
        if(TM[i]!=Tm[i]){
            Tm[i]=TM[i];
            // destroy objects
            for(var j in O[k].O)document.getElementById("clock3D").removeChild(O[k].O[j].o);
            delete O[k];
            // create new digit
            O[k] = new Cdigit(k, TM[i]);
        }
        k+=(i==1 || i==3)?2:1;
    }
    // call animation
    for(var i in O){
        for(var j in O[i].O){
            O[i].O[j].anim();
        }
    }
    setTimeout("mainloop();",16);
}

function Cdigit(N,d){
    // digit prototype
    this.O = [];
    for(var i=0;i<7;i++){
        for(var j=0;j<5;j++){
            c=digits[i].charAt(5*d+j);
            if(c!=" "){
                a = ((32*N)+(j*5))/(180/Math.PI);
                this.O.push(new CObj(a,-42+i*12));
            }
        }
    }
}

function time(){
    // HH:MM:SS
    T = new Date();
    h = T.getHours();
    m = T.getMinutes();
    s = T.getSeconds();
    TM = [
        Math.floor(h/10),
        h%10,
        Math.floor(m/10),
        m%10,
        Math.floor(s/10),
        s%10
    ];
    setTimeout("time()" ,1000);
}

/* resize (standard mode) */
function resize(){
    nx = document.documentElement.clientWidth/2;
    ny = document.documentElement.clientHeight/2;
    if(ny==0)ny = document.body.clientHeight/2;
}
onresize = resize;

/* mouse move */
document.onmousemove = function(e){
    if(window.event) e=window.event;
    xm=(e.x || e.clientX);
    ym=(e.y || e.clientY);
    px=(xm-nx)/(nx*5);
    py=(ym-ny)/(ny*5);
}

onload = function () {
    // initializations
    time();
    resize();
    var k=0;
    for(var i=0;i<6;i++){
        O[k] = new Cdigit(k++, TM[i]);
        if(i==1 || i==3) O[k] = new Cdigit(k++, 10);
    }
    mainloop();
}

//-->
</script>
</head>

<body>
    <span id="clock3D" style="overflow:hidden"></span>
    <img id="plot" src="http://www.blueb.co.kr/SRC/javascript/image4/plot.gif" style="visibility:hidden">
    <img id="plotR" src="http://www.blueb.co.kr/SRC/javascript/image4/plotR.gif" style="visibility:hidden">
</body>
</html>


³×ƼÁð ÀÇ°ß   ÀÌ¿ëÇϽŠÀÚ·áÀÇ Èı⸦ ÀÚÀ¯·Ó°Ô ÀÛ¼ºÇϼ¼¿ä. (»ó¾÷ÀûÀÎ ±¤°í ¹× µµ¹è¼º ±Û µîÀº »çÀüÅ뺸¾øÀÌ »èÁ¦µÉ ¼ö ÀÖ½À´Ï´Ù.)
³»¿ë ¾ÆÀ̵ð ÀÇ°ß³²±â±â
µî·ÏµÈ ÀÇ°ßÀÌ ¾ø½À´Ï´Ù.
1
À̸§
³»¿ë
:³×¸Â¾Æ¿ä: :È­³ª´Â±º¿ä: :Àá¿Í: :¿ì¿ïÇØ: :À̰ǾƳÄ: :¿ÕÇÏÇÏ: ¿Õ¿ôÀ½~ ³î·¥~
Æò°¡Çϱâ ÈǸ¢ÇÔ ¸Å¿ìÁÁÀ½ ÁÁÀ½ ±¦ÂúÀ½ º¸Åë º°·Î
µµ¹è¹æÁöÅ°
 90914111 º¸ÀÌ´Â µµ¹è¹æÁöÅ°¸¦ ÀÔ·ÂÇϼ¼¿ä.