oninput事件触发后重新加载javascript文件
oninput事件触发后重新加载javascript文件
提问于 2018-09-26 07:02:54
我使用Lea Verou的polyfill制作了一个带有css圆锥梯度的交互式拼图，它在初始页面加载时显示饼图，但当您更改输入中的任何值时，饼图将变为空白，并且只显示一个空白圆圈。我猜想当oninput事件触发时，polyfill javascript文件不会被重新触发。
calcz.oninput = function() {
var colors = ['red','orange','yellow','lime','aqua', 'violet'];
var gradient = []; var values = [];
var percents = [0]; var n = 0; var o = 0;
var lengthz = document.forms.calcz.length;
var totalz = 0;
for(var z = 0; z < lengthz-1; z++)
{
totalz += parseFloat(document.forms.calcz[z].value);
values.push(document.forms.calcz[z].value);
}
for (var zz = 0; zz < lengthz-1; zz++)
{
percents.push(document.forms.calcz[zz].value/totalz*100);
n += percents[zz];
o += percents[zz+1];
gradient.push(colors[zz] + ' ' + n.toFixed(2)+'% ' + o.toFixed(2)+'% ');
}
result.value = totalz;
var h = document.getElementById("piechart");
h.setAttribute('style', 'background:conic-gradient('+gradient+')');
};
calcz.oninput();input[type=number] { width:80px; }
output {font-weight:bold;}
#piechart { float:left; width:200px; height:200px; border-radius:50% 50%; border:1px solid black; background-repeat: no-repeat; margin-top:15px; }<html>
<head>
<meta charset="UTF-8">
<title>Interactive Pie Chart</title>
</head>
<body>
<form id="calcz">
<div style="float:left; width:50%">
1. <input type="number" value="6000"><br>
2. <input type="number" value="240"><br>
3. <input type="number" value="1440"><br>
4. <input type="number" value="240"><br>
5. <input type="number" value="600"><br>
6. <input type="number" value="1200"></div>
<div id="piechart"></div>
<output id="result"></output></form>
<script src='https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js'></script>
<script src='https://leaverou.github.io/conic-gradient/conic-gradient.js'></script>
</body>
</html>
回答 2
Stack Overflow用户
发布于 2018-09-26 07:26:54
嗯，我首先要确定我能得到圆锥梯度函数：
#thing {
background: conic-gradient(#f06, gold);
height: 100px;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<script src="conic-gradient.js"></script>
<div id="thing">
thing here...
</div>
在你的代码中，我在第一次加载时根本看不到渐变，但当我改变这一行时，我可以看到：
h.setAttribute('style'，‘背景:圆锥渐变(#f06，金色)；’)
例如：
calcz.oninput = function() {
console.log('calling function.....')
var colors = ['red','orange','yellow','lime','aqua', 'violet'];
var gradient = []; var values = [];
var percents = [0]; var n = 0; var o = 0;
var lengthz = document.forms.calcz.length;
var totalz = 0;
for(var z = 0; z < lengthz-1; z++)
{
totalz += parseFloat(document.forms.calcz[z].value);
values.push(document.forms.calcz[z].value);
}
for (var zz = 0; zz < lengthz-1; zz++)
{
percents.push(document.forms.calcz[zz].value/totalz*100);
n += percents[zz];
o += percents[zz+1];
gradient.push(colors[zz] + ' ' + n.toFixed(2)+'% ' + o.toFixed(2)+'% ');
}
console.warn('gradient here is: ', gradient)
result.value = totalz;
var h = document.getElementById("piechart");
/* h.setAttribute('style', 'background:conic-gradient('+gradient+')') */;
h.setAttribute('style', 'background: conic-gradient(#f06, gold);')
};
calcz.oninput(); input[type=number] { width:80px; }
output {font-weight:bold;}
#piechart {
float:left;
width:200px;
height:200px;
border-radius:50% 50%;
border:1px solid black;
background-repeat:
no-repeat; margin-top:15px;
} <html>
<head>
<meta charset="UTF-8">
<title>Interactive Pie Chart</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<script src="conic-gradient.js"></script>
</head>
<body>
<form id="calcz">
<div style="float:left; width:50%">
1. <input type="number" value="6000"><br>
2. <input type="number" value="240"><br>
3. <input type="number" value="1440"><br>
4. <input type="number" value="240"><br>
5. <input type="number" value="600"><br>
6. <input type="number" value="1200"></div>
<div id="piechart"></div>
<output id="result"></output></form>
</body>
</html>
请注意，第一次运行脚本时，您的gradient变量是一个如下所示的数组：["red 0.00% 61.73% ", "orange 61.73% 64.20% ", "yellow 64.20% 79.01% ", "lime 79.01% 81.48% ", "aqua 81.48% 87.65% ", "violet 87.65% 100.00% "]
Stack Overflow用户
发布于 2019-01-17 23:34:38
我不知道如何重新加载polyfill脚本，但是我得到了一个有效的交互式饼图，它通过使用SVG生成切片来响应oninput事件。
https://codepen.io/captlid/pen/wROWKj
圆的半径必须是16。数学计算出笔划-dasharray可以说是“20100”，也就是20%，然后对于dashoffset，你可以添加percent+previouspercent。笔划宽度和svg viewbox应为32。
<svg viewBox="0 0 32 32">
<circle cx="50%" cy="50%" r="16" stroke="pink" stroke-dasharray="10 100" stroke-dashoffset="0"></circle>
<circle cx="50%" cy="50%" r="16" stroke="aqua" stroke-dasharray="55 100" stroke-dashoffset="-10"></circle>
<circle cx="50%" cy="50%" r="16" stroke="lime" stroke-dasharray="20 100" stroke-dashoffset="-65"></circle>
<circle cx="50%" cy="50%" r="16" stroke="orange" stroke-dasharray="20 100" stroke-dashoffset="-85"></circle>
</svg>
svg { width:200px; height:200px; border-radius:50%; }
circle {fill:transparent; stroke-width:32;}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/52507716
复制相关文章
相似问题