我使用https://github.com/agrimsrud/svgPieTimer.js中的代码创建了一个动画饼形计时器。我稍微更改了代码，以便有一个循环完成一个循环然后停止。
当计时器完成后，我想执行一些代码（例如重新加载页面），但我不知道代码中我需要插入此命令的位置。我尝试了一下并找到了一个可以工作的地方（在下面的示例中，我添加了一个警告框），但我不知道这是否是插入此代码的最佳逻辑位置。
我应该在哪里插入？为什么？
工作代码示例（完整的HTML页面）：
<!DOCTYPE html>
<html lang="de-DE">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="UTF-8">
<title>1 Minute</title>
<style type="text/css">
svg {
display: block;
width: 250px;
height: 250px;
position: absolute;
top: 20px;
right: 20px;
}
#timer {
fill: #bd4;
}
#border {
fill: #9b2;
}
</style>
</head>
<body>
<svg viewbox="0 0 250 250">
<path id="timer" transform="translate(125,125)"/>
</svg>
<script>
/* http://cdn.rawgit.com/darius/requestAnimationFrame/master/requestAnimationFrame.min.js */
"use strict";if(!Date.now)Date.now=function(){return(new Date).getTime()};(function(){var n=["webkit","moz"];for(var e=0;e<n.length&&!window.requestAnimationFrame;++e){var i=n[e];window.requestAnimationFrame=window[i+"RequestAnimationFrame"];window.cancelAnimationFrame=window[i+"CancelAnimationFrame"]||window[i+"CancelRequestAnimationFrame"]}if(/iP(ad|hone|od).*OS 6/.test(window.navigator.userAgent)||!window.requestAnimationFrame||!window.cancelAnimationFrame){var a=0;window.requestAnimationFrame=function(n){var e=Date.now();var i=Math.max(a+16,e);return setTimeout(function(){n(a=i)},i-e)};window.cancelAnimationFrame=clearTimeout}})();
/*! SVG Pie Timer 0.9.1 | Anders Grimsrud, grint.no | MIT License */
/* https://github.com/agrimsrud/svgPieTimer.js */
;(function(w) {
'use strict';
// Date.now fix by Ari Fuchs, afuchs.tumblr.com/post/23550124774/date-now-in-ie8
Date.now = Date.now || function() { return +new Date };
// Draw SVG path
function draw(element, rate) {
var count = element.length,
angle = 360 * rate;
angle %= 360;
var rad = (angle * Math.PI / 180),
x = Math.sin(rad) * 125,
y = Math.cos(rad) * - 125,
mid = (angle > 180) ? 1 : 0,
shape = 'M 0 0 v -125 A 125 125 1 '
+ mid + ' 1 '
+ x + ' '
+ y + ' z';
// If array of elements, draw each one
if(element instanceof Array)
while(count--)
element[count].setAttribute('d', shape)
else
element.setAttribute('d', shape)
}
// Prepare timer
// Define in global scope
w.svgPieTimer = function(props) {
var element = props.element,
duration = props.duration || 1000;
// Optional warning
if(!element) throw "SVG Pie Timer: Error - element required"
// This part might be confusing:
// If n==0, do infinite loops
// In other cases where n is set, do n loops
// If n is not set, do 1 loop
// Do it this way to prevent mixing n==0 and !n
var end = Date.now() + duration;
// Animate frame by frame
(function frame() {
var current = Date.now(),
remaining = end - current,
// Now set rotation rate
// E.g. 50% of first loop returns 1.5
// E.g. 75% of sixth loop returns 6.75
// Has to return >0 for SVG to be drawn correctly
// If you need the current loop, use Math.floor(rate)
rate = 1 - remaining / duration;
// As requestAnimationFrame will draw whenever capable,
// the animation might end before it reaches 100%.
// Let's simulate completeness on the last visual
// frame of the loop, regardless of actual progress
if(remaining < 60) {
// 1.0 might break, set to slightly lower than 1
// Update: Set to slightly lower than n instead
draw(element, 1 - 0.0001);
// Stop animating when the circle is full
alert("Done!");
if(remaining < duration) {
return
}
}
// Draw
draw(element, rate);
// Request next frame
requestAnimationFrame(frame);
}());
}
})(window, undefined);
svgPieTimer({
// Element (Required) SVG sub element to animate. Accepts array.
element: [timer],
// Duration (Optional) In milliseconds. Defaults to 1000.
duration: 3000
});
</script>
</body>
</html>
答案 0 :(得分：0)
据我了解，你应该添加代码而不是警告，就在这里
// Stop animating when the circle is full
alert("Done!");
例如window.location.reload（）重新加载页面
因为这里我们得到了条件
if(remaining < 60) {
// code to execute
}
答案 1 :(得分：0)
我的目的是这样的。 在此版本中，您可以将任何功能传递给计时器结束后要执行的计时器。
<!DOCTYPE html>
<html lang="de-DE">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="UTF-8">
<title>1 Minute</title>
<style type="text/css">
svg {
display: block;
width: 250px;
height: 250px;
position: absolute;
top: 20px;
right: 20px;
}
#timer {
fill: #bd4;
}
#border {
fill: #9b2;
}
</style>
</head>
<body>
<svg viewbox="0 0 250 250">
<path id="timer" transform="translate(125,125)"/>
</svg>
<script>
/* http://cdn.rawgit.com/darius/requestAnimationFrame/master/requestAnimationFrame.min.js */
"use strict";if(!Date.now)Date.now=function(){return(new Date).getTime()};(function(){var n=["webkit","moz"];for(var e=0;e<n.length&&!window.requestAnimationFrame;++e){var i=n[e];window.requestAnimationFrame=window[i+"RequestAnimationFrame"];window.cancelAnimationFrame=window[i+"CancelAnimationFrame"]||window[i+"CancelRequestAnimationFrame"]}if(/iP(ad|hone|od).*OS 6/.test(window.navigator.userAgent)||!window.requestAnimationFrame||!window.cancelAnimationFrame){var a=0;window.requestAnimationFrame=function(n){var e=Date.now();var i=Math.max(a+16,e);return setTimeout(function(){n(a=i)},i-e)};window.cancelAnimationFrame=clearTimeout}})();
/*! SVG Pie Timer 0.9.1 | Anders Grimsrud, grint.no | MIT License */
/* https://github.com/agrimsrud/svgPieTimer.js */
;(function(w) {
'use strict';
// Date.now fix by Ari Fuchs, afuchs.tumblr.com/post/23550124774/date-now-in-ie8
Date.now = Date.now || function() { return +new Date };
// Draw SVG path
function draw(element, rate) {
var count = element.length,
angle = 360 * rate;
angle %= 360;
var rad = (angle * Math.PI / 180),
x = Math.sin(rad) * 125,
y = Math.cos(rad) * - 125,
mid = (angle > 180) ? 1 : 0,
shape = 'M 0 0 v -125 A 125 125 1 '
+ mid + ' 1 '
+ x + ' '
+ y + ' z';
// If array of elements, draw each one
if(element instanceof Array)
while(count--)
element[count].setAttribute('d', shape)
else
element.setAttribute('d', shape)
}
// Prepare timer
// Define in global scope
w.svgPieTimer = function(props) {
var element = props.element,
duration = props.duration || 1000,
callback = props.callback || function(){};
// Optional warning
if(!element) throw "SVG Pie Timer: Error - element required"
// This part might be confusing:
// If n==0, do infinite loops
// In other cases where n is set, do n loops
// If n is not set, do 1 loop
// Do it this way to prevent mixing n==0 and !n
var end = Date.now() + duration;
// Animate frame by frame
(function frame() {
var current = Date.now(),
remaining = end - current,
// Now set rotation rate
// E.g. 50% of first loop returns 1.5
// E.g. 75% of sixth loop returns 6.75
// Has to return >0 for SVG to be drawn correctly
// If you need the current loop, use Math.floor(rate)
rate = 1 - remaining / duration;
// As requestAnimationFrame will draw whenever capable,
// the animation might end before it reaches 100%.
// Let's simulate completeness on the last visual
// frame of the loop, regardless of actual progress
if(remaining < 60) {
// 1.0 might break, set to slightly lower than 1
// Update: Set to slightly lower than n instead
draw(element, 1 - 0.0001);
// Stop animating when the circle is full
if(remaining <= 0) {
setTimeout(callback,0);
return
}
}
// Draw
draw(element, rate);
// Request next frame
requestAnimationFrame(frame);
}());
}
})(window, undefined);
svgPieTimer({
// Element (Required) SVG sub element to animate. Accepts array.
element: [timer],
// Duration (Optional) In milliseconds. Defaults to 1000.
duration: 3000,
callback:function() { alert("Timer is gone!"); }
});
</script>
</body>
</html>