前端 svg 如何做倒计时

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

代码片段 1

<!DOCTYPE html>
<meta charset=”utf-8″>
<title>软件开发前端前景:svg做的倒计时</title>
<body>
    <div id=”svgBox”>
        <svg xmlns=”http://www.w3.org/2000/svg” version=”1.1″ width=”500″ height=”500″>
            <path id=”test1″ style=”fill:#fe0; stroke:#fff; stroke-width:0;” />
            <text x=”93″ y=”100″ fill=”green” id=”text”>1</text>
        </svg>
        <script>
            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 如何做倒计时》
» 本文链接地址:https://www.rokub.com/4714.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!