svg时钟（转载）

Html

Css

body {
	background:#1e2730;
	font-family:Arial;
}
svg {
	width:100vmin;
	margin:0 auto;
	display:block;
}
circle {
	fill:none;
	stroke-width:3;
}
#secondsPath {
	stroke-width:3;
	pointer-events:none;
	stroke-linecap:round;
}
#minPath {
	stroke-width:3;
	pointer-events:none;
	stroke-linecap:round;
}
#hoursPath {
	stroke-width:3;
	pointer-events:none;
	stroke-linecap:round;
}
text {
	dominant-baseline:central;
	text-anchor:middle;
	font-size:5px;
	fill:Linen;
}
svg text::selection {
	background:none;
}
#hub {
	fill:#24303a;
	stroke-width:0;
}
#toggle,#reset {
	cursor:pointer;
}

const rad = Math.PI / 180;
    let requestId = null;
    let stop = false;
    const svg = document.querySelector("svg");
    const g = document.querySelector("g");

const spring = 0.09;
    const friction = 0.8;

class Clock {
        constructor(o) {
            this.path = o.path;
            this.divisions = o.divisions; //24 || 60
            this.R = o.r;
            this.start = o.start;
            this.strokeDashoffset = 0;
            this.definePath(this.path);
            this.vel = 0;
        }

update(time) {
            let t = time % this.divisions;

this.strokeLength = this.target;
            this.target = t * this.pathLength / this.divisions;

if (this.pathLength - this.strokeLength <= this.delta) {
                this.strokeDashoffset += this.pathLength;
                this.strokeLength = 0.1;
            }
        }

updateStrokeLength() {
            this.dist = this.target - this.strokeLength;
            this.acc = this.dist * spring;
            this.vel += this.acc;
            this.vel *= friction;
            this.strokeLength += this.vel;
            this.path.style.strokeDasharray = `${this.strokeLength},${this.pathLength -
            this.strokeLength}`;
            this.path.style.strokeDashoffset = this.strokeDashoffset;

}

definePath() {
            let d =
                "M" +
                this.R +
                "," +
                0 +
                "  A" +
                this.R +
                "," +
                this.R +
                " 0 " +
                1 +
                "," +
                1 +
                this.R +
                "," +
                -1 +
                "z";
            //y-1: the circles are rotated 90 degs

this.path.setAttributeNS(null, "d", d);
            this.pathLength = this.path.getTotalLength();
            this.delta = this.pathLength / this.divisions;
            this.strokeLength = this.start * this.delta;
            this.target = this.strokeLength;
            this.path.style.strokeDasharray = `${this.strokeLength},${this.pathLength -
            this.strokeLength}`;
            this.path.style.strokeDashoffset = this.strokeDashoffset;
        }
    }

let secondsTrack = new Clock(circles.s);
    let minTrack = new Clock(circles.m);
    let hoursTrack = new Clock(circles.h);

let sid = setInterval(setCron, 1000);

function addZero(i) {
        if (i < 10) {
            i = "0" + i;
        }
        return i;
    }

function setText(h, m, s) {
        text.textContent =
            addZero(h % 24) + ":" + addZero(m % 60) + ":" + addZero(s % 60);
    }

setText(h, m, s);

function Animation() {
        requestId = window.requestAnimationFrame(Animation);
        secondsTrack.updateStrokeLength();
        minTrack.updateStrokeLength();
        hoursTrack.updateStrokeLength();
    }
    Animation();

reset.addEventListener("click", resetCron, false);

function resetCron() {
        secondsTrack = new Clock(circles.s);
        minTrack = new Clock(circles.m);
        hoursTrack = new Clock(circles.h);

h = parseInt(TIME.split(":")[0]);
        m = h * 60 + parseInt(TIME.split(":")[1]);
        s = h * 60 * 60 + m * 60 + parseInt(TIME.split(":")[2]);

setText(h, m, s);
    }

function setCron() {
        secondsTrack.update(s);
        if (s % 60 == 0) {
            minTrack.update(m);
        }
        if (s % (60 * 60) == 0) {
            hoursTrack.update(h);
        }

setText(h, m, s);

s++;
        if (s % 60 == 0) {
            m++;
        }
        if (s % (60 * 60) == 0) {
            h++;
        }
    }

toggle.addEventListener("click", function() {

if (stop) {
            stop = false;
            toggle.textContent = "STOP";
            sid = setInterval(setCron, 1000);

} else {
            stop = true;
            toggle.textContent = "GO";
            clearInterval(sid);
        }
    }, false);

↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.11.3

立即下载

svg时钟（转载）

代码描述：了解svg的时候看到的svg代码制作的时钟

这个时钟是svg格式因为是矢量图所以放大缩小不会引起变形 svg可以用embed object 标签引入到html文件里
通过控制标签来控制svg矢量图的大小样式可以根据自己需要调整

0

最新

发表评论全部评论

暂时没有评论！

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

Mr.Annnnnnnn

相关代码

svg时钟（转载）

最新