gpt4 book ai didi

javascript - 代码有效 jsfiddle 不适用于 Dreamweaver

转载 作者:太空宇宙 更新时间:2023-11-04 05:06:17 25 4
gpt4 key购买 nike

这似乎是一个更常见的问题,但是当我尝试使用 jsfiddle (html/css/javascript) 的代码时,它不起作用。我正在尝试让 CSS 动画重复点击,并在其他问题的链接上找到了一些可以工作的 jsfiddle。但是,当我尝试在 DreamWeaver 上执行它们时它们不起作用,而且我没有收到任何错误。

我有 http://jsfiddle.net/vxcYJ/45/ , http://jsfiddle.net/AndyE/9LYAT/ , 和 http://jsfiddle.net/6tZd3/ , 并且没有工作。在 Dreamweaver 上,我相信第三个 jsfiddle 会翻译成这样:

<!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>

还有一件事,在按钮的末尾,由于某种原因出现了 this-​。如果有人可以帮助我,那将不胜感激。

最佳答案

您的代码失败有两个原因。首先,您的代码中的不同位置有两个非法字符。当您运行页面时,您可以看到它出现在按钮旁边,第二个在 webkitTransitionEnd 事件监听器之后导致 JavaScript 出错。其次,当您尝试将事件监听器添加到文档头部的按钮时,它会失败,因为 DOM 尚未在浏览器中注册。

下面的代码应该可以工作。您也可以考虑查看 jQuery document ready function .

<!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>

关于javascript - 代码有效 jsfiddle 不适用于 Dreamweaver,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10368047/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com