js实现方块上下左右移动效果
时间:2019-03-31
本文章向大家介绍js实现方块上下左右移动效果,主要包括js实现方块上下左右移动效果使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
本文实例为大家分享了js实现方块移动的具体代码,供大家参考,具体内容如下
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #box{ width: 50px; height: 50px; position: absolute; background: palevioletred; } </style> </head> <body> <div id="box" style = "left: 0; top: 50px;"></div> <button id = "btn">stop</button> </body> <script type="text/javascript"> var speed = 10; var flag = true; var interId; function moveLeft(){ var oldLeft = parseInt(box.style.left); if(oldLeft >= window.innerWidth-50 || oldLeft < 0){ speed *= -1; } box.style.left = oldLeft + speed + "px"; } function moveTop(){ var oldTop = parseInt(box.style.top); if(oldTop >= window.innerHeight-50 || oldTop < 0){ speed *= -1; } box.style.top = oldTop + speed + "px"; } function onOff(rand){ // var rand = random(); if (flag) { btn.innerHTML = "start"; clearInterval(interId); flag = false; } else{ btn.innerHTML = "stop"; if (rand == 1) { interId = setInterval("moveLeft()",50); // flag = true; } else{ interId = setInterval("moveTop()",50); // flag = true; } flag = true; } } btn.onclick =onOff; //产生一个1-2的随机数 function random(){ rand = parseInt(Math.random() * 2 + 1); alert(rand); if (rand == 1) { interId = setInterval("moveLeft()",50); } else{ interId = setInterval("moveTop()",50); } } random(); </script> </html>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
- Java设计模式-外观模式
- Java设计模式-组合模式
- 使用shell批量监控磁盘坏块(二) (r7笔记第80天)
- JavaWeb10-request&response你不得不学(1)
- dg的奇怪问题终结和分区问题答疑 (r7笔记第77天)
- 最近让我焦灼的四个问题(有解) (r7笔记第76天)
- JavaWeb10-reques;response你不得不学(2)
- 很多人比较纠结的约束和索引的关系(r7笔记第75天)
- JavaWeb09-Servlet(Java真正的全栈开发)
- JavaWeb08-XML,tomcat,HTTP轻松入门
- JavaWeb07-JDBC(Java真正的全栈开发)
- 编程思想 之「操作符」
- Hyperledger fabric Chaincode 开发详解
- 字节码文件的内部结构之谜
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- ggplot2_散点图
- 你真的理解Binder“一次拷贝“吗?
- ggplot2_boxplot
- ggplot_Violin Plot & dot plot
- 只要网速够快,小视频看完一个删一个,任性!Python爬取小视频
- ggplot barplot and error bars
- 设计稿生成游戏界面
- ggplot Stripchart and line
- ggplot2 核密度图和直方图
- 喜欢的歌曲不在一个平台怎么办?你需要一个自己专属的音乐播放器
- ggplot_QQ图和ECDF
- tidyverse evaluation
- 下载歌曲的时候嫌麻烦?打造专属你的音乐下载器
- Tidyverse补充
- 抖音关键词热度搜索小程序(附源码)