ㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠ오늘도 실패..책사봐야지 ㅠㅠㅠㅠㅠㅠㅠㅠㅠ

분명히 수정한 인덱스 파일에서는 

일캐 이뿌게 나왓는데 ㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠ


clock. js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
 
var Clock = (function(){
 
    var exports = function(element) {
        this._element = element;
        var html = '';
        for (var i=0;i<6;i++) {
            html += '<span>&nbsp;</span>';
        }
        this._element.innerHTML = html;
        this._slots = this._element.getElementsByTagName('span');
        this._tick();
    };
 
    exports.prototype = {
 
        _tick:function() {
            var time = new Date();
            this._update(this._pad(time.getHours()) + this._pad(time.getMinutes()) + this._pad(time.getSeconds()));
            var self = this;
            setTimeout(function(){
                self._tick();
            },1000);
        },
 
        _pad:function(value) {
            return ('0' + value).slice(-2);
        },
 
        _update:function(timeString) {
 
            var i=0,l=this._slots.length,value,slot,now;
            for (;i<l;i++) {
 
                value = timeString.charAt(i);
                slot = this._slots[i];
                now = slot.dataset.now;
 
                if (!now) {
                    slot.dataset.now = value;
                    slot.dataset.old = value;
                    continue;
                }
 
                if (now !== value) {
                    this._flip(slot,value);
                }
            }
        },
 
        _flip:function(slot,value) {
 
            // setup new state
            slot.classList.remove('flip');
            slot.dataset.old = slot.dataset.now;
            slot.dataset.now = value;
 
            // force dom reflow
            slot.offsetLeft;
 
            // start flippin
            slot.classList.add('flip');
 
        }
 
    };
 
    return exports;
}());
 
var i=0,clocks = document.querySelectorAll('.clock'),l=clocks.length;
for (;i<l;i++) {
    new Clock(clocks[i]);
}
cs




clock.css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
html,body {
    padding:0;
    margin:0;
    text-align:center;
    position: fixed; right: 30px; top: 0px; 
}
body {
    padding-top:0em;
}
.clock {
    position:relative;
    font-family:monaco,consolas,"courier new",monospace;
    font-size:3.5rem;
    line-height:1.375;
}
.clock:before,
.clock:after {
    position:absolute;
    top:0;
    bottom:0;
    content:':';
    z-index:2;
    line-height:1.15;
    color:#a3a3a3;
}
.clock:before {
    left:2.325em;
}
.clock:after {
    right:2.325em;
}
.clock span {
    position:relative;
    display:inline-block;
    padding:0 .25em;
    margin:0 .06125em;
    z-index:1;
    -webkit-transform:perspective(750);
    -moz-transform:perspective(750);
    -ms-transform:perspective(750);
    transform:perspective(750);
    -webkit-transform-style:preserve-3d;
    -moz-transform-style:preserve-3d;
    -ms-transform-style:preserve-3d;
    transform-style:preserve-3d;
}
.clock span:first-child {
    margin-left:0;
}
.clock span:last-child {
    margin-right:0;
}
.clock span:nth-child(2),
.clock span:nth-child(4) {
    margin-right:.3em;
}
.clock span:nth-child(3),
.clock span:nth-child(5) {
    margin-left:.3em;
}
.clock span:before,
.clock span:after {
    position:absolute;
    left:0;
    top:0;
    right:0;
    bottom:0;
    color:#414141;
    text-shadow:0 1px 0 #ffffff;
    background:#ffffff;
    border-radius:.125em;
    outline:1px solid transparent; /* fix jagged edges in ff */
    -webkit-backface-visibility:hidden;
    -moz-backface-visibility:hidden;
    -ms-backface-visibility:hidden;
    backface-visibility:hidden;
    -webkit-transition:-webkit-transform .75s, opacity .75s;
    -moz-transition:-moz-transform .75s, opacity .75s;
    -ms-transition:-ms-transform .75s, opacity .75s;
    transition:transform .75s, opacity .75s;
}
.clock span:before {
    opacity:1;
    z-index:1;
    content:attr(data-old);
    -webkit-transform-origin:0 0;
    -moz-transform-origin:0 0;
    -ms-transform-origin:0 0;
    transform-origin:0 0;
    -webkit-transform:translate3d(0,0,0) rotateX(0);
    -moz-transform:translate3d(0,0,0) rotateX(0);
    -ms-transform:translate3d(0,0,0) rotateX(0);
    transform:translate3d(0,0,0) rotateX(0);
}
.clock span:after {
    opacity:0;
    z-index:2;
    content:attr(data-now);
    -webkit-transform-origin:0 100%;
    -moz-transform-origin:0 100%;
    -ms-transform-origin:0 100%;
    transform-origin:0 100%;
    -webkit-transform:translate3d(0,-102.5%,0) rotateX(90deg);
    -moz-transform:translate3d(0,-102.5%,0) rotateX(90deg);
    -ms-transform:translate3d(0,-102.5%,0) rotateX(90deg);
    transform:translate3d(0,-102.5%,0) rotateX(90deg);
}
.clock .flip:before {
    opacity:0;
    -webkit-transform:translate3d(0,102.5%,0) rotateX(-90deg);
    -moz-transform:translate3d(0,102.5%,0) rotateX(-90deg);
    -ms-transform:translate3d(0,102.5%,0) rotateX(-90deg);
    transform:translate3d(0,102.5%,0) rotateX(-90deg);
}
.clock .flip:after {
    opacity:1;
    -webkit-transform:translate3d(0,0,0) rotateX(0);
    -moz-transform:translate3d(0,0,0) rotateX(0);
    -ms-transform:translate3d(0,0,0) rotateX(0);
    transform:translate3d(0,0,0) rotateX(0);
}
 
cs




html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <title>A Pen by  romeonews</title>
  
  
  
      <link rel="stylesheet" href="css/clock.css">
 
  
</head>
 
<body>
  <span class="clock"></span>
  
    <script src="js/clock.js"></script>
 
</body>
</html>
cs



티스토리 html  </head> 바로위에 적용


1
2
3
4
<link rel="stylesheet" href="http://tistory4.daumcdn.net/tistory/2683937/skin/images/clock.css">
<span class="clock"></span>
<script src="http://tistory1.daumcdn.net/tistory/2683937/skin/images/clock.js"></script>
 
cs



결과...


제길... 스크롤 하나도 안먹히고..........더 공부가 필요하다 ㅁㄴ아ㅣ럼ㄴ아ㅣ;ㄹㄴ이;호;ㅣ머ㅏㅣ;ㅁㄴㅇ라ㅣㅁ러ㅏㅣㅁㄴ아ㅣㅁ너라ㅣㅇ너라ㅣ;ㄴ어ㅣ라;ㄴ어ㅣ;ㄹㄴㅇㄹㄴㄹㄴㅇㅅㅎㅈㄷㅎㅁㅈㄷㅅㅎㅁㄷ홈ㅇㅎㄴㅇㄹㅇㅎㅁㅁㄴㅇㄹㅇㄹㄴㅁㄴㅇㄹ

티스토리 툴바