circleLine

by uiwwnw

HTML

scroll down plz~~
<div style="height: 400px;"></div>
<div class="circleWrap"></div>
<div style="height: 300px;"></div>
<div class="circleWrap2"></div>
<div style="height: 1000px;"></div>

JavaScript

(function(){
    var app = (function() {
        // 1. 모듈 스코프 내에서 사용할 변수 작성
        var scopeVar = {};
        var utilMethod;
        var manipulateDom;
        var eventHandle;
        var initModule;
    
        // 2. 유틸리티 메소드 작성
        utilMethod = {
            fnCreateNclass: function(w, t, c, s) {
                v = document.createElement(t);
                v.setAttribute('class', c);
                v.setAttribute('style', s);
                w.appendChild(v);
                return v;
            },
            fnCal: function(f) {
                var _value = Number(scopeVar.opt.value * 360 / scopeVar.opt.max);
                var _values = {};
                _values.v1 = _value;
                _values.v2;
                _values.v3;
                if (_value > 180) {
                    _values.v1 = 180;
                    _values.v3 = _value - 180;
                    _values.v2 = _values.v3 + 'deg';
                }
                _values.v1 += 'deg';
                return _values;
            },
            fnTime: function(msecs) {
                var start = new Date().getTime();
                var cur = start;
                while(cur-start < msecs) {
                cur = new Date().getTime();
                }
            },
            fnAddStyle: function(e, a, v) {
                e.setAttribute(a, e.getAttribute(a) + ';' + v);
            },
            fnRemoveStyle: function(e, a, v) {
                var _style = e.getAttribute(a);
                var _s = _style.indexOf(';;');
                e.setAttribute(a, _style.substr(0, _s + 1));
            },
            fnClick: function(){
                scopeVar.circleLine.el.onclick = function(){
                    eventHandle.fnToggle(this);
                }
            }
        }
    
        // 3. DOM 조작 메소드 작성
        manipulateDom = function() {
            scopeVar.circleLine = {};
            scopeVar.circleLine.style = 'z-index: 1;'
            + 'position:...