JavaScript 字符串拼接 & setInterval()实现简单动画
在学习JavaScript DOM编程艺术第十章时,遇到了一个小问题:
想要实现的最终效果:一个小方块不断的向下移动。
小方块绝对定位,设置好top与left值后,写了一个动态获取方块到上方距离并在每次调用中加50px的函数
function move(){
box.style.top += 50px;//错在这一行
console.log(getComputedStyle(box).top);
}
由于还比较小白,忘记了.style.property只能获取内联样式,用console.log发现问题(输出的是空值)之后,又改成了= getComputedStyle(box).top + "50px" 还是不行,查了一下发现这样相当于"200px10px"的一个字符串,没有意义的。然后我也不知道我咋想的,= getComputedStyle(box).top -"px"+"50px"(我可真是鬼才)突然想到了用parseInt,我直接给你变成数值类型,然后在末尾拼个px
var mid = parseInt(getComputedStyle(box).top);
box.style.top = mid+50+"px";
写到这里,我又回去用typeOf确认了box.style.top是string~(我记性真的bad)
这里还犯了一个小错误,把var mid 写在了函数外面,这样只会改变一次,因为mid的值不会变~
加油!!
JavaScript 字符串拼接 & setInterval()实现简单动画的更多相关文章
- 浅谈JavaScript字符串拼接
本文给大家汇总介绍了几种javascript中字符串拼接的方法,十分的简单实用,有需要的小伙伴可以参考下. 在JavaScript中会经常遇到字符串拼接,但是如果要拼接的字符串过长就比较麻烦了. 如果 ...
- Javascript字符串拼接小技巧
在Javascript中经常会遇到字符串的问题,但是如果要拼接的字符串过长就比较麻烦了. 如果是在一行的,可读性差不说,如果要换行的,会直接报错. 在此介绍几种Javascript拼接字符串的技巧. ...
- 最优雅,高效的javascript字符串拼接
这种方式是es6的语法.使用键盘1左边的那个字符 `` 拼接, 再加上js自带的模板引擎拼接字符串非常快速.这东西也没什么高深的,看几个例子就懂了. console.log(`<xml> ...
- javascript: 字符串拼接有问题
点击某个链接,出现js错误:Uncaught SyntaxError: Unexpected token ILLEGAL 原因: $str .= sprintf('   ...
- javascript字符串拼接
var c='../Project/SelectPerson.aspx?personList='+'"'+personListValue+'"' X('Window2').x_sh ...
- 使用 SQL的 for xml path来进行字符串拼接
本篇主要讲怎么利用SQL的FOR XML PATH 参数来进行字符串拼接,FOR XML PATH的用法很简单,它会以xml文件的形式来返回数据. 我的讲解步骤: 1:构造初始数据 2:提出问题 3: ...
- JavaScript如何实现字符串拼接操作
实际应用中,目标字符串的生成可能需要多个数据的拼接. 由于应用频繁,几乎是所有编程语言都必须掌握的操作,当然每种语言具有各自特点. 本文将通过代码实例详细介绍一下JavaScript如何实现字符串拼接 ...
- 谈JavaScript组合拼接字符串的效率 --转载
JavaScript组合拼接字符串的效率.在脚本开发过程中,经常会按照某个规则,组合拼接出一个大字符串进行输出.比如写脚本控件时控制整个控件的外观的HTML标签输出,比如AJAX里得到服务器端的回传值 ...
- javascript中字符串拼接详解
字符串拼接是所有程序设计语言都需要的操作.当拼接结果较长时,如何保证效率就成为一个很重要的问题.本文介绍的是Javascript中的字符串拼接,希望对你有帮助,一起来看. 最近在研究<jav ...
随机推荐
- NPOI将DataGridView中的数据导出+导出Chart图表图片至Excel
#region 导出Excel private HSSFWorkbook Workbook = null; private Sheet SheetOne = null; private DataFor ...
- Azure SQL Database (22) Azure SQL Database支持中文值
<Windows Azure Platform 系列文章目录> 在笔者之前的文章里,已经介绍了如何使Azure SQL Database支持中文: SQL Azure(七) 在SQL Az ...
- windows下安装mingw-w64
mingw-w64应该可以算是mingw的改进版本吧,mingw系列编译器是非常好的并且主流的c/c++编译器 mingw-w64只负责程序的编译,只提供命令行操作没有编辑代码的图像界面,代码的编写需 ...
- 解除IE锁定主页批处理
解除IE锁定主页.bat rem 解除IE锁定主页@echo offecho HKEY_CURRENT_USER\Software\Microsoft\Internet Explorer\Main [ ...
- 使用jquery.validation+jquery.poshytip做表单验证--未完待续
jqueryValidate的具体使用方法很多,这里就不在赘述,这一次只谈一下怎样简单的实现表单验证. 整片文章目的,通过JQvalidation按表单属性配置规则验证,并将验证结果通过poshyti ...
- react事件中的事件对象和常见事件
不管是在原生的js还是vue中,所有的事件都有其事件对象,该事件对象event中包含着所有与事件相关的信息,在react中,所有的事件也有其事件对象,在触发DOM上的某个事件时,就会产生一个事件对象. ...
- 使用 Spring Cloud 和 Docker 构建微服务架构
如何使用Spring Boot.Spring Cloud.Docker和Netflix的一些开源工具来构建一个微服务架构. 本文通过使用Spring Boot.Spring Cloud和Docker构 ...
- mysql查询优化之二:查询优化器的局限性
在<mysql查询优化之一:mysql查询优化常用方式>一文中列出了一些优化器常用的优化手段.查询优化器在提供这些特性的同时,也存在一定的局限性,这些局限性往往会随着MySQL版本的升级而 ...
- Ajax中最有名axios插件(只应用于Ajax)(post方法,官网写错了,应是字符串格式)
/* axios v0.18.0 | (c) 2018 by Matt Zabriskie */!function(e,t){"object"==typeof exports&am ...
- spring cglib实现嵌套方法拦截
使用spring 的拦截器对方法进行拦截,不管是动态代理,还是cglib, 只能拦截到被代理对象的调用方法,对于被调用方法里再调用同一对象里的其他方法就无法拦截到,就是我们说的嵌套拦截,之前文章里提及 ...