我想要做的就是通过单击按钮让我的 javascript 函数运行。 (目前有一个硬编码的值)但是当我这样做的时候，我什至没有得到 alert();在函数的第一部分......就像按钮点击被禁用了!有什么建议吗？
此外，我无法获取此代码以正确更改 CSS 样式表，然后根据该度数的差异制作图像旋转。
<html>
<head>
<link href="main.css" type="text/css" rel="stylesheet" />
<script>
function findKeyframesRule(rule)
{
// gather all stylesheets into an array
var ss = document.querySelector("link[href='main.css']").sheet;
alert(ss.name);
var pointer;
var webkitKeyframe;
var keyFrame;
// loop through all the rules
for (var j = 0; j < ss.cssRules.length; ++j) {
// find the -webkit-keyframe rule whose name matches our passed over parameter and return that rule
if (ss.cssRules[j].type == window.CSSRule.WEBKIT_KEYFRAMES_RULE
&& ss.cssRules[j].name == rule) {
alert(ss.cssRules[j]);
webkitKeyframe = ss.cssRules[j];
}
if (ss.cssRules[j].type == window.CSSRule.KEYFRAMES_RULE
&& ss.cssRules[j].name = rule){
alert(ss.cssRules[j]);
webkitKeyframe = ss.cssRules[j];
}
if (ss.cssRules[j].type == window.CSSRule.STYLE_RULE
&& ss.cssRules[j].name = ".arrow") {
alert(ss.cssRules[j]);
pointer = ss.cssRules[j];
}
}
var rules = [webkitKeyframe, keyFrame, pointer];
return rules;
// rule not found
}
function findCurrentAngle(el) {
var st = window.getComputedStyle(el, null);
var tr = st.getPropertyValue("-webkit-transform") ||
st.getPropertyValue("-moz-transform") ||
st.getPropertyValue("-ms-transform") ||
st.getPropertyValue("-o-transform") ||
st.getPropertyValue("transform") ||
"Either no transform set, or browser doesn't do getComputedStyle";
var values = tr.split('(')[1],
values = values.split(')')[0],
values = values.split(',');
var a = values[0];
var b = values[1];
var c = values[2];
var d = values[3];
var angle = Math.round(Math.asin(b) * (180/Math.PI));
//alert(angle);
return angle;
}
// remove old keyframes and add new ones
function change(anim, newDeg){
var el = document.getElementById("arrow");
// find our -webkit-keyframe rule
var keyframes = findKeyframesRule(anim);
var currentDeg = findCurrentAngle(el);
//alert(currentDeg);
// remove the existing 0% and 100% rules
keyframes[0].deleteRule("0%");
keyframes[0].deleteRule("100%");
// create new 0% and 100% rules with random numbers
keyframes[0].insertRule("0% { transform: rotate("+ currentDeg +"deg); }");
keyframes[0].insertRule("100% { transform: rotate("+ newDeg +"deg); }");
// remove the existing 0% and 100% rules
keyframes[1].deleteRule("0%");
keyframes[1].deleteRule("100%");
// create new 0% and 100% rules with random numbers
keyframes[1].insertRule("0% { transform: rotate("+ currentDeg +"deg); }");
keyframes[1].insertRule("100% { transform: rotate("+ newDeg +"deg); }");
keyframes[2].style.WebkitTransform = "rotate(" + newDeg + "deg)";
keyframes[2].style.Transform = "rotate(" + newDeg + "deg)";
el.className = "arrow";
//alert("Changes Done");
// assign the animation to our element (which will cause the animation to run)
//document.getElementById('arrow').style.webkitAnimationName = anim;
}
// begin the new animation process
function startChange(newDeg){
// remove the old animation from our object
//document.getElementById('arrow').style.webkitAnimationName = "none";
alert("Start Change Done");
// call the change method, which will update the keyframe animation
setTimeout(function(){change("rotate", newDeg);}, 0);
}</script>
</head>
<body>
<div>
<img src="arrow.png" id="arrow" class="arrow" />
</div>
<button id="button" onclick="startChange(90)">Get Quote!</button>
</body>
最佳答案
您在较早的函数中有一些无效的 JS，这导致了解析错误。您的两个 if 语句使用单个“=”运算符而不是“==”。单'='用于赋值，双'=='用于比较操作。
...
if (ss.cssRules[j].type == window.CSSRule.KEYFRAMES_RULE && ss.cssRules[j].name == rule){ //you only had a single '=' sign here
alert(ss.cssRules[j]);
webkitKeyframe = ss.cssRules[j];
}
if (ss.cssRules[j].type == window.CSSRule.STYLE_RULE && ss.cssRules[j].name == ".arrow") { //you only had a single '=' sign here
alert(ss.cssRules[j]);
pointer = ss.cssRules[j];
}
...
<强> JSFiddle DEMO
关于javascript - onClick 没有运行功能？？ (可能是 Javascript 错误？)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27990693/