js动画失效，js函数内部规定原始css可以运行，外部html中#div{}定义原始css不能运行
添加一段代码，改成用js规定#line2的css，最后直接onclick调用positionLine2()，就可以运行了。
但是我注释掉js中规定#line2的css的部分，然后再html中用css直接定义，就不行了
像下面这样：
p#line2 {
color: #66ceff;
position: absolute;
top: 350px;
left: 140px;
font-size: 90px;
}
<script>
.....
function positionLine2() {
if (!document.getElementById) return false;
if (!document.getElementById("line2")) return false;
/*
var elem = document.getElementById("line2");
elem.style.color = "#66ceff";
elem.style.position = "absolute";
elem.style.left = "140px";
elem.style.top = "350px";
elem.style.fontSize = "90px"
*/
moveAE("line2", 290, 150, 5)
}
.....var bott = document.getElementById("botton")
bott.addEventListener("click", function() {
positionLine2()
})我觉得可能跟局部变量之类的有关系……但是并不清楚，只是js入门新手，希望知道原因的大神能指点一下
谢谢各位的帮助~~新手捂脸感谢
代码根据各位前辈的指点改过一遍了，修改部分在上面备注指出，但是还是不行，这些代码的主要功能就是两行文字在点击按钮之后移动，但就是实现不了，继续求挑问题。
另外，还有一点别的疑惑，为什么repeat要这样用字符串的方式写
var repeat = "moveAE('" + elementid + "'," + xfi + "," + yfi + "," + intime + ")"
而不能直接向下面这样呢？
var repeat = moveAE(elementid, xfi, yfi, intime)
原始代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>hey</title>
</head>
<style type="text/css">
p#line1 {
color: transparent;
-webkit-text-stroke: 1px #66ceff;
position: absolute;
top: 350px;
left: 140px;
font-size: 90px;
}
p#line2 {
color: #66ceff;
position: absolute;
top: 350px;
left: 140px;
font-size: 90px;
}
#botton {
background-color:transparent;
border: 1px #66ceff solid;
position: absolute;
top: 250px;
left: 520px;
font-size: 30px;
color:#66ceff;
width:150px;
height:46px;
line-height:40px;
text-align:center;
}
/*#botton :hover{ 错误*/
#botton :hover{
background-color:#66ceff;
color:#ffffff;
}
</style>
<body>
<p id="line1">Hello,John.</p>
<p id="line2">削了个椰子，你却给个梨</p>
<div id="botton">
move
</div>
</body>
<script type="text/javascript">
/*function moveAE("elementid", xfi, yfi, intime) { 错误*/
function moveAE(elementid, xfi, yfi, intime) {
if (!document.getElementById(elementid)) return false
var elem = document.getElementById(elementid)
var xnow = parseInt(elem.style.left)
var ynow = parseInt(elem.style.top)
/*if (xnow = xfi && ynow = yfi) return false 错误*/
if (xnow == xfi && ynow == yfi) return false
if (xnow < xfi) {
xnow++
}
if (xnow > xfi) {
xnow--
}
if (ynow < yfi) {
ynow++
}
if (ynow > yfi) {
ynow--
}
elem.style.left = xnow + "px"
elem.style.top = ynow + "px"
var repeat = "moveAE('" + elementid + "'," + xfi + "," + yfi + "," + intime + ")"
movement = setTimeout(repeat, intime)
}
/* 改为用js给按钮绑定事件 */
var bott = document.getElementById("botton")
bott.addEventListener("click", function() {
moveAE('line1', 350, 250, 10)
moveAE('line2', 350, 350, 10)
})
</script>
</html>各种失效，代码是照着《javascript DOM编程艺术》写的，查了一遍感觉没错，有大神能看出来问题吗
展开
收起
1
条回答
写回答
写回答
-
码农|Coder| Pythonista1) 基本上每个JS语句后的；都缺失
2) moveAE在事件回调中为什么调用2次，目的是什么？
3) 通过getComputedStyle来获取通过CSS添加的样式最终值
4) parseInt(elm.style.left)可能获取结果NaN，所以要parseInt(elm.style.left)||0来保护操作
5)setTimeout/setInterval要避免出入字符串形式的函数，因其最终是通过eval函数调用，而eval函数是不推荐使用的<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>hey</title> </head> <style type="text/css"> p#line1 { color: transparent; -webkit-text-stroke: 1px #66ceff; position: absolute; top: 350px; left: 140px; font-size: 90px; } p#line2 { color: #66ceff; position: absolute; top: 350px; left: 140px; font-size: 90px; } #botton { background-color:transparent; border: 1px #66ceff solid; position: absolute; top: 250px; left: 520px; font-size: 30px; color:#66ceff; width:150px; height:46px; line-height:40px; text-align:center; } /*#botton :hover{ 错误*/ #botton :hover{ background-color:#66ceff; color:#ffffff; } </style> <body> <p id="line1">Hello,John.</p> <p id="line2">削了个椰子，你却给个梨</p> <div id="botton"> move </div> </body> <script type="text/javascript"> /*function moveAE("elementid", xfi, yfi, intime) { 错误*/ var movement; function moveAE(elementid, xfi, yfi, intime) { if (!document.getElementById(elementid)) return false; var elem = document.getElementById(elementid); var computedstyle=getComputedStyle(elem); var xnow = parseInt(computedstyle.left)||0; var ynow = parseInt(computedstyle.top)||0; console.log(xnow); /*if (xnow = xfi && ynow = yfi) return false 错误*/ //console.log(elem.style); function animation(){ if (xnow == xfi && ynow == yfi) return; if (xnow < xfi) { xnow++; } if (xnow > xfi) { xnow--; } if (ynow < yfi) { ynow++; } if (ynow > yfi) { ynow--; } elem.style.left = xnow + "px"; elem.style.top = ynow + "px"; movement = setTimeout(function(){ animation(); }, intime); } animation(); } var bott = document.getElementById("botton") bott.addEventListener("click", function() { moveAE('line1', 350, 250, 10); //moveAE('line2', 350, 350, 10); }) </script> </html>2019-07-17 19:43:28赞同 展开评论 打赏
版权声明：本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
相关问答
