在学习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()实现简单动画的更多相关文章

  1. 浅谈JavaScript字符串拼接

    本文给大家汇总介绍了几种javascript中字符串拼接的方法,十分的简单实用,有需要的小伙伴可以参考下. 在JavaScript中会经常遇到字符串拼接,但是如果要拼接的字符串过长就比较麻烦了. 如果 ...

  2. Javascript字符串拼接小技巧

    在Javascript中经常会遇到字符串的问题,但是如果要拼接的字符串过长就比较麻烦了. 如果是在一行的,可读性差不说,如果要换行的,会直接报错. 在此介绍几种Javascript拼接字符串的技巧. ...

  3. 最优雅,高效的javascript字符串拼接

    这种方式是es6的语法.使用键盘1左边的那个字符 `` 拼接, 再加上js自带的模板引擎拼接字符串非常快速.这东西也没什么高深的,看几个例子就懂了. console.log(`<xml> ...

  4. javascript: 字符串拼接有问题

    点击某个链接,出现js错误:Uncaught SyntaxError: Unexpected token ILLEGAL 原因: $str .= sprintf('&nbsp&nbsp ...

  5. javascript字符串拼接

    var c='../Project/SelectPerson.aspx?personList='+'"'+personListValue+'"' X('Window2').x_sh ...

  6. 使用 SQL的 for xml path来进行字符串拼接

    本篇主要讲怎么利用SQL的FOR XML PATH 参数来进行字符串拼接,FOR XML PATH的用法很简单,它会以xml文件的形式来返回数据. 我的讲解步骤: 1:构造初始数据 2:提出问题 3: ...

  7. JavaScript如何实现字符串拼接操作

    实际应用中,目标字符串的生成可能需要多个数据的拼接. 由于应用频繁,几乎是所有编程语言都必须掌握的操作,当然每种语言具有各自特点. 本文将通过代码实例详细介绍一下JavaScript如何实现字符串拼接 ...

  8. 谈JavaScript组合拼接字符串的效率 --转载

    JavaScript组合拼接字符串的效率.在脚本开发过程中,经常会按照某个规则,组合拼接出一个大字符串进行输出.比如写脚本控件时控制整个控件的外观的HTML标签输出,比如AJAX里得到服务器端的回传值 ...

  9. javascript中字符串拼接详解

    字符串拼接是所有程序设计语言都需要的操作.当拼接结果较长时,如何保证效率就成为一个很重要的问题.本文介绍的是Javascript中的字符串拼接,希望对你有帮助,一起来看.   最近在研究<jav ...

随机推荐

  1. 【java】之查看JVM参数的值

    查看JVM参数的值 可以根据java自带的jinfo命令: jinfo -flags pid 使用jmap可以查看某个Java进程中每个对象有多少个实例,占用多少内存,命令格式:jmap -histo ...

  2. windows cmd下ssh连接免密码问题解决

    windows 7 cmd下 ssh -T username@serverip 免密码连接成功 有的同学在windows下开发,并且在windows下安装了git for windows,这些资源已经 ...

  3. 【HTTP】使用 RestTemplete 实现 post请求

    如上图,要求: post请求; x-www-form-urlencoded 类型; 如下代码没有进行整理,但是测试OK package com.chinamobile.epic.http; impor ...

  4. pyqt5.8.2没有qt Designer和assistant exe

    使用python3.6 pyqt5.8 eric6 创建完新的窗体后,弹出如下的错误: 解决方法: 1.安装pyqt5-tools 下载地址: https://pypi.python.org/pypi ...

  5. java高并发编程(二)

    马士兵java并发编程的代码,照抄过来,做个记录. 一.分析下面面试题 /** * 曾经的面试题:(淘宝?) * 实现一个容器,提供两个方法,add,size * 写两个线程,线程1添加10个元素到容 ...

  6. IDC:电源系统

    ylbtech-IDC:电源系统 电源系统(Power System)是由整流设备.直流配电设备.蓄电池组.直流变换器.机架电源设备等和相关的配电线路组成的总体.电源系统为各种电机提供各种高.低频交. ...

  7. ubuntu下修改mysql默认data路径

    由于ubuntu默认的mysql路径是在/var/lib/mysql下,很多时候我们如果没有挂载其它分区在/var的时候,随着网站逐渐浏览和添加内容,数据容量也会越来越大,自然磁盘空间也会比较吃紧.因 ...

  8. Zabbix 告警内容配置

    #配置媒介告警类型 #----------------------------------------------------------------------------------------- ...

  9. 05-RARP: 逆地址解析协议

    具有本地磁盘的系统引导时,一般是从磁盘上的配置文件中读取I P地址.但是无盘机,如X终端或无盘工作站,则需要采用其他方法来获得I P地址. 网络上的每个系统都具有唯一的硬件地址,它是由网络接口生产厂家 ...

  10. [UE4]子弹碰撞

    在子弹actor蓝图“BP_LauncherBullet”中添加一个球体碰撞组件“Sphere Collision”,并设置为actor的根组件(直接拖放到默认根组件上面就会覆盖) 子弹碰撞预设 “B ...