JS实现小方块上下移动

**JS实现小方块上下移动

效果图

HTML代码展示


<!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><label id="show" />
<img id="img" src="1.jpg" style="width: 80px;height: 80px;position: absolute;left: 0px;top: 0px"/>
<script language="JavaScript">var obj=document.getElementById("img");obj.left = 0;obj.top = 0;function move(){console.log(event.keyCode);if(event.keyCode==37|| event.keyCode==65){obj.left-=80;}if(event.keyCode==38|| event.keyCode==87){obj.top-=80;}if(event.keyCode==39|| event.keyCode==68){obj.left +=80;}if(event.keyCode==40|| event.keyCode==83){obj.top +=80;}obj.style.left = obj.left+'px',obj.style.top=obj.top+'px';}document.onkeydown=move;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;}}</script>
</html>**

JS实现小方块上下移动相关推荐

原生js实现小方块拖拽
需求:实现点击一个小方块按下拖拽的功能. 实现: <!DOCTYPE html> <html lang="en"> <head><met ...
js实现上下左右移动小方块
js实现上下左右移动小方块在学习过程中同学实现的移动小方块代码,我重写了一遍,感觉收获很大,不过代码存在些许不足 <!DOCTYPE html> <html lang=" ...
小方块上升组成背景特效 html+css+js
一.先看效果: 1024程序员节发篇文章拿个个徽章,嘿嘿 (^▽ ^ ) . 二.详细实现(后面有完整代码): 1.先定义html标签,.container就是底层大盒子,.item就是一个小方块,后 ...
js实现随机生成小方块
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...
俄罗斯小方块游戏html,通过h5的canvas手写一个俄罗斯方块小游戏
开始自己手写一个好玩的俄罗斯方块吧,上变形,左右移动,下加速,空格瞬移等功能,无聊的时候学习下canvas,f12 修改分数,体验金手指的快乐吧 1.定义界面,和按钮上下左右 2.js部分 1 ...
也分享自己做的JS扫雷小游戏
看了草根程序猿分享的JS扫雷小游戏想起去年的时候自己也做了一个于是也拿出来分享之先上截图~ 引用了jQuery,节省了很多鼠标点击上的判断界面显然都是照搬Windows的扫雷啦详细的内容注释 ...
在html中什么标签可以显示小方块,css列表前的小方块
css列表前的小方块自己用个符号·来代替,却发现怎么显示都比较小,后来自己研究才发现我的字体全部定义成tahoma了,只要采用"宋体"就正常了. 列表前的小方块--design ...
第三天---随机小方块
❀随机小方块展示 html部分: <div class="map"></div> css样式: .map{ width:800px; height:600p ...
随机位置生成小方块案例
每一秒改变所有小方块的颜色和位置,效果如图 html代码很简单,就是一个容器以及十个小方块 ```javascript <div id = 'container'></div> ...

JS实现小方块上下移动

JS实现小方块上下移动相关推荐

最新文章

热门文章