Javascript 代码工作JSFIDLE不在dreamweaver上工作
这似乎是一个更常见的问题，但当我尝试使用JSFIDLE（html/css/javascript）的代码时，它不起作用。我正试图获得一个CSS动画来重复onclick，并在其他问题的链接上找到了一些JSFIDLE的工作。然而，当我尝试在DreamWeaver上执行这些操作时，它们不起作用，并且我没有得到任何错误 我有，而且，没有工作。在dreamweaver上，我相信第三个JSFIDLE会转化为如下内容：Javascript 代码工作JSFIDLE不在dreamweaver上工作,javascript,html,css,dreamweaver,jsfiddle,Javascript,Html,Css,Dreamweaver,Jsfiddle,这似乎是一个更常见的问题，但当我尝试使用JSFIDLE（html/css/javascript）的代码时，它不起作用。我正试图获得一个CSS动画来重复onclick，并在其他问题的链接上找到了一些JSFIDLE的工作。然而，当我尝试在DreamWeaver上执行这些操作时，它们不起作用，并且我没有得到任何错误 我有，而且，没有工作。在dreamweaver上，我相信第三个JSFIDLE会转化为如下内容： <!DOCTYPE> <head> <style> .a
<!DOCTYPE>
<head>
<style>
.animate {
-webkit-transition-property: -webkit-transform;
-webkit-transition-duration: 1s;
-webkit-transition-timing-function: linear;
}
.initial {
-webkit-transform: rotate(0deg);
}
.final {
-webkit-transform: rotate(360deg);
}
</style>
<script>
document.getElementById('button').addEventListener('click', function()
{
this.setAttribute('class', 'animate final');
});
document.getElementById('button').addEventListener('webkitTransitionEnd', function() {
this.setAttribute('class', 'initial');
});
</script>
</head>
<body>
<button type="button" id="button" class="animate initial">Click me!</button>
</body>
</html>
.制作动画{
-webkit转换属性：-webkit转换；
-webkit转换持续时间：1s；
-webkit转换定时功能：线性；
}
.首字母{
-webkit变换：旋转（0度）；
}
.决赛{
-webkit变换：旋转（360度）；
}
document.getElementById（'button'）。addEventListener（'click'，function（）
{
this.setAttribute（'class'，'animate final'）；
});
document.getElementById（'button'）。addEventListener（'WebKittTransitionEnd'，function（）{
this.setAttribute（'class'，'initial'）；
});
点击我！
还有一件事，在按钮的末尾，出于某种原因，出现了这个->
按钮。如果有人能帮我，我将不胜感激。你想在dreamweaver浏览器中查看该网站吗？您正在使用-webkit
属性。这些工具只能在诸如chrome或safari之类的webkit浏览器中使用。类似地，-moz
标签也只能在firefox中使用
我假设dreamweaver不读取-webkit
标记。尝试对opera使用-o
标记，对safari和chrome使用-webkit
，对firefox使用-moz
，对IE使用-ms
。chrome和safari将读取-webkit css，但忽略-moz
和-o
，因为它们不知道如何读取
W3学校有一些很好的例子支持除IE以外的所有浏览器：
如果您添加-ms transform
：您的代码由于两个原因失败，那么转换
css属性（-webkit transform
在您的代码中）将在IE中工作。首先，代码中不同位置有两个非法字符。运行页面时，您可以看到的一个出现在按钮旁边，第二个出现在WebKittTransitionEnd事件侦听器之后，导致JavaScript出错。其次，当您尝试将事件侦听器添加到文档头部的按钮时，由于DOM尚未向浏览器注册，因此失败
下面的代码应该可以工作。您也可以考虑查看.
.制作动画{
-webkit转换属性：-webkit转换；
-webkit转换持续时间：1s；
-webkit转换定时功能：线性；
}
.首字母{
-webkit变换：旋转（0度）；
}
.决赛{
-webkit变换：旋转（360度）；
}
点击我！
document.getElementById（'button'）。addEventListener（'click'，function（）
{
this.setAttribute（'class'，'animate final'）；
});
document.getElementById（'button'）。addEventListener（'WebKittTransitionEnd'，function（）{
this.setAttribute（'class'，'initial'）；
});
jsfiddle在chrome中为我工作。你在本地测试这个吗？如果是，您确定所有链接都正确吗？尝试查看源代码：并检查浏览器看到的所有链接。JSFIDLE可以工作，但当我将其复制到dreamweaver中时，它会停止。。。是的，它们很好。你把它复制到dreamweaver后怎么看？我认为dreamweaver（“dreamweaver浏览器”）中的“设计”选项卡不会读取特定于浏览器的标签。不，我在浏览器中进行预览，然后Chromeit工作得很好，谢谢。。但是，我总是在按钮旁边看到–code>。那是什么？在结束按钮标签和开始脚本标签之间有一个字符。听起来它在您使用的编辑器中不可见（在我的编辑器中不可见）。试着删除这两个标签之间的所有内容。
<!DOCTYPE>
<head>
<style>
.animate {
-webkit-transition-property: -webkit-transform;
-webkit-transition-duration: 1s;
-webkit-transition-timing-function: linear;
}
.initial {
-webkit-transform: rotate(0deg);
}
.final {
-webkit-transform: rotate(360deg);
}
</style>
</head>
<body>
<button type="button" id="button" class="animate initial">Click me!</button>
<script>
document.getElementById('button').addEventListener('click', function()
{
this.setAttribute('class', 'animate final');
});
document.getElementById('button').addEventListener('webkitTransitionEnd', function() {
this.setAttribute('class', 'initial');
});
</script>
</body>
</html>