首页 > 代码库 > css 倒计时 svg

css 倒计时 svg

2024-07-08 10:01:18   221人阅读

<!DOCTYPE html><html> <head>    <meta charset="utf-8" />  <meta name="author" content="" />  <meta name="keywords" content="" />  <meta name="description" content="" />  <title> new document </title>  <style>     div{position:absolute;width:200px;height:200px;left:0;top:0;right:0;bottom:0;margin:auto;border-radius:50%;background-color:#CCC;}     div:before,     div:after{position:absolute;content:"";width:50%;height:100%;top:0;left:0;background-color:#CCC;border-radius:100% 0 0 100%/50% 0 0 50%;z-index:1;transform-origin:100% 50%;-webkit-transform-origin:100% 50%;-moz-transform-origin:100% 50%;-o-transform-origin:100% 50%;}     div.half,     div:before{background-color:gold;}     div{animation:run 10s steps(1,end);-webkit-animation:run 10s steps(1,end);-moz-animation:run 10s steps(1,end);-o-animation:run 10s steps(1,end);}     div:before{animation:run1 10s linear;-webkit-animation:run1 10s linear;-moz-animation:run1 10s linear;-o-animation:run1 10s linear;}     div span{position:absolute;width:100%;height:22px;left:0;top:90px;font-size:20px;font-weight:bold;line-height:22px;text-align:center;z-index:5;}     @keyframes run{        50%,        100%{background-color:gold;}     }     @keyframes run1{        100%{z-index:3;transform:rotate(360deg);}     }     @-webkit-keyframes run{        50%,        100%{background-color:gold;}     }     @-webkit-keyframes run1{        100%{z-index:2;-webkit-transform:rotate(360deg);}     }

　　svg倒计时

<!DOCTYPE html><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>

　　


联系
我们