我在if-else语句中插入以下 animate函数以有条件地更改SVG的背景颜色时遇到困难：
`<animate attributeName="fill" values = "#800;#f00;#800;#800" dur="0.8s" repeatCount="indefinite" />`
如果输入为1，则颜色为绿色，如果为2，则颜色为蓝色＆amp;如果3则颜色为红色。
如果输入为3（红色），是否可以使用上述动画或任何其他替代方式让颜色闪烁？
https://fiddle.jshell.net/zs2q5nyg/6/
<!DOCTYPE html>
<html>
<head>
<p id="Header" style="z-index:10000;position:absolute; top:30px; left:40%; margin:auto; color:Blue; font-size: 54px; font-family: BankGothic Md BT;font-weight: bold;"> Point Status </p> <br> <br><br>
<title>X</title>
<style>
div {
width: 120px;
height: 120px;
display: inline-block;
margin-left: 1px;
}
</style>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0; target-densitydpi=device-dpi" />
</head>
<body>
<b>Enter # of Circles</b>
<br>
<input type="number" id="circles" min="1" step="1">
<form>
<div id="Participentfieldwrap">
<svg height="100" width="200">
<line x1="0" y1="50" x2="100000000" y2="10000" style="stroke:rgb(0,255,0);stroke-width:5" />
<svg height="100" width="100">
<circle id="cir" cx="50" cy="50" r="30" stroke="black" stroke-width="3" />
<animate id="ani" xlink:href="#cir" attributeName="fill" values = "#000;#000;#000;#000" dur="0.7s" repeatCount="indefinite" />
</svg>
</svg>
<br>
<b>Status</b>
<br>
<input type="number" id="Color" onkeyup="myFunction(this)" min="1" step="1">
<script type="text/javascript">
function myFunction(val) {
var val1=val.id.substring(val.id.indexOf("_")+1,val.id.length)
var cir = document.getElementById("cir_"+val1);
var into = document.getElementById("Color_"+val1);
var ani = document.getElementById("ani_"+val1);
val=into.value;
if(val*1 == 1){
cir.style.fill = "green";
ani.setAttribute("values", "#0f0;#0f0;#0f0;#0f0");
}
else if(val*1 == 2){
cir.style.fill = "blue";
ani.setAttribute("values", "#FFC200;#FFC200;#800;#FFC200");
}
else if(val*1 == 3){
cir.style.fill = "red";
ani.setAttribute("values", "#f00;#f00;#f00;#f00");
}
else if(val*1 == 4){
cir.style.fill = "blue";
ani.setAttribute("values", "#3333cc;#3333cc;#3333cc;#3333cc");
}
else{
cir.style.fill = "grey";
ani.setAttribute("values", "#99ccff;#99ccff;#99ccff;#99ccff");
}
}
</script>
</div>
</form>
<script type="text/javascript">
//Loop for creating multiple divs in a form using a limit that is set in an integer input
var participantsField = document.getElementById("Participentfieldwrap"),form = document.getElementsByTagName("form")[0],ContestantNum = document.getElementById("circles"), i, timer;
function createCircles(val) {
// Removing previous circles
while (form.firstChild) {
form.removeChild(form.firstChild);
}
for(i = 1; i <= val; i++) {
var clone = participantsField.cloneNode(true);
clone.id = "Participentfieldwrap_" + i;
clone.querySelector("input").id = "Color_" + i;
clone.querySelector("circle").id = "cir_" + i;
clone.querySelector("animate").id = "ani_" + i;
clone.querySelector("animate").setAttribute("xlink:href", "#cir_" + i);
form.appendChild(clone);
}
}
ContestantNum.addEventListener('keydown', function(e) {
if(timer) {
clearTimeout(timer);
}
timer = setTimeout(function() {
createCircles(ContestantNum.value);
}, 0);
});
</script>
</body>
</html>
答案 0 :(得分：0)
请尝试以下
<!DOCTYPE html>
<html>
<head>
<title>Service</title>
<style>
div {
width: 120px;
height: 120px;
display: inline-block;
margin-left: 1px;
}
</style>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0; target-densitydpi=device-dpi" />
</head>
<body>
<b>Enter # of Circles</b>
<br>
<input type="number" id="circles" min="1" step="1">
<form>
<div id="Participentfieldwrap">
<svg height="100" width="200">
<line x1="0" y1="50" x2="100000000" y2="10000" style="stroke:rgb(0,255,0);stroke-width:5" />
<svg height="100" width="100">
<circle id="cir" cx="50" cy="50" r="30" stroke="black" stroke-width="3" />
<animate id="ani" xlink:href="#cir" attributeName="fill" values = "#fff;#000;#000;#000" dur="0.8s" repeatCount="indefinite" />
</svg>
</svg>
<br>
<b>Color</b>
<br>
<input type="number" id="Color" onkeyup="myFunction(this)" min="1" step="1">
<script type="text/javascript">
//Inputing integer 1, 2 or 3 which instantly applies color formatting (RGB) to circle in the same div
function myFunction(val) {
var val1=val.id.substring(val.id.indexOf("_")+1,val.id.length)
var cir = document.getElementById("cir_"+val1);
var into = document.getElementById("Color_"+val1);
var ani = document.getElementById("ani_"+val1);
val=into.value;
if(val*1 == 1){
cir.style.fill = "green";
ani.setAttribute("values", "#fff;#0f0;#0f0;#0f0");
}
else if(val*1 == 2){
cir.style.fill = "blue";
ani.setAttribute("values", "#fff;#00f;#00f;#00f");
}
else if(val*1 == 3){
cir.style.fill = "red";
ani.setAttribute("values", "#fff;#f00;#f00;#f00");
}
else{
cir.style.fill = "yellow";
ani.setAttribute("values", "#fff;#fefe00;#fefe00;#fefe00");
}
}
</script>
</div>
</form>
<script type="text/javascript">
//Loop for creating multiple divs in a form using a limit that is set in an integer input
var participantsField = document.getElementById("Participentfieldwrap"),form = document.getElementsByTagName("form")[0],ContestantNum = document.getElementById("circles"), i, timer;
function createCircles(val) {
// Removing previous circles
while (form.firstChild) {
form.removeChild(form.firstChild);
}
for(i = 1; i <= val; i++) {
var clone = participantsField.cloneNode(true);
clone.id = "Participentfieldwrap_" + i;
clone.querySelector("input").id = "Color_" + i;
clone.querySelector("circle").id = "cir_" + i;
clone.querySelector("animate").id = "ani_" + i;
clone.querySelector("animate").setAttribute("xlink:href", "#cir_" + i);
form.appendChild(clone);
}
}
ContestantNum.addEventListener('keydown', function(e) {
if(timer) {
clearTimeout(timer);
}
timer = setTimeout(function() {
createCircles(ContestantNum.value);
}, 1);
});
</script>
</body>
</html>