前端 svg 如何做倒计时

前端开发如何测试不同分辨率下的效果|安卓开发需要用前端语言吗|ios 安卓前端开发环境搭建

代码片段 1

<!DOCTYPE html>

<html>

<title>软件开发前端前景：svg做的倒计时</title>

<body>

</svg>

window.onload = function () {

num = 360;

var time = setInterval(j, 10);

function j() {

num = num – 1;

i = parseInt(num / 360 * 100);

var text_ = document.getElementById(“text”);

text_.textContent = i; //svg节点是xml，所以只能用textContent代替innerHTML来获取文本节点

var startAngle = 90;

var cx = 100; //svg与y轴的距离

var cy = 100; //svg与x轴的距离

var r = 100; //圆的半径

var deg1 = num + startAngle;

var x0 = cx + r * Math.cos(startAngle * Math.PI / 180);

var y0 = cy – r * Math.sin(startAngle * Math.PI / 180);

var x1 = cx + r * Math.cos(deg1 * Math.PI / 180);

var y1 = cy – r * Math.sin(deg1 * Math.PI / 180);

var a = num < 180 ? 0 : 1;

var test = document.getElementById(“test1”);

//画笔落在(cx,cy)，画线至(x0,y0)，画圆弧(从当前点到x1,y1画椭圆,r,r为长短半轴,偏转0度,大圆弧或小圆弧,逆时针或顺时针,闭合路径)

test.setAttribute(“d”, “M ” + cx + “,” + cy + ” L ” + x0 + “,” + y0 + ” A ” + r + “,” + r + ” 0 ” + a + “,0 ” + x1 + “,” + y1 + ” Z”);

if (num < 1) {

text_.setAttribute(“fill”, “red”);

window.clearInterval(time);

console.log(“时间到了昂~~~”);

}

};

</script>

</div>

</body>

</html>

移动前端开发之viewport的深入理解|移动前端开发性能提升|前端开发与软件测试如何选择

前端 svg 如何做倒计时

前端开发者

相关推荐

评论抢沙发

评论前必须登录！

最新评论

前端开发者

相关推荐

评论 抢沙发

评论前必须登录！

最新评论

评论抢沙发