Learning JavaScript modify the picture up and down buttons change

Disclaimer: This article is a blogger original article, follow the CC 4.0 BY-SA copyright agreement, reproduced, please attach the original source link and this statement.

This link: https://blog.csdn.net/weixin_45747700/article/details/102574818

1. The use of JavaScript buttons to modify the vertical and horizontal image fluctuation
... Image preparation Here Insert Picture Description
2. Modify button effects movable FIG
3. Next, the code is
JavaScript

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>修改按键实现动态效果</title>
</head>
<body>
<center>
    <h2 align="center">按 键 修 改</h2>
    上：<input type="text" id="up" onkeyup="caplock('up')" maxlength="1"><br><br>
    下：<input type="text" id="down " onkeyup="caplock('down')" maxlength="1"><br><br>
    左：<input type="text" id="left" onkeyup="caplock('left')" maxlength="1"><br><br>
    右：<input type="text" id="right " onkeyup="caplock('right')" maxlength="1"><br><br>
    <button onclick="ctrl()">修 改</button>
</center>
<lable id="show"/>
<img id="img" src="3.jpg" style="width: 80px;
height: 80px;
position: absolute;
left:0px;top: 0px"/>

   <script type="text/javascript">
    var obj = document.getElementById("img");
    obj.left = 0;
    obj.top = 0;
    var up,down,left,right;
    var up1,downl,left1,right1;
    function ctrl(){
        up = up1;
        down = downl;
        left = left1;
        right= right1;
        alert(up+";"+down+";"+left+";"+right);
        shift();
    }
    function caplock(str){
        if(str=="up") {
            up1 = event.keyCode ;
        }
        if(str=="down") {
            downl= event.keyCode;
        }
        if(str=="left") {
            left1= event.keyCode;
        }
        if(str=="right") {
            right1 =event.keyCode;
        }

    }
    function action() {

        console.log(event.keyCode);
        if (event.keyCode == parseInt(left)) {
            //左
            obj.left -= 80;
        }
        if (event.keyCode == parseInt(up)) {
            //上
            obj.top -= 80;
        }
        if (event.keyCode == parseInt(right)) {
            //右
            obj.left += 80;
        }
        if (event.keyCode == parseInt(down)) {
            //下
            obj.top += 80;
        }
        obj.style.left = obj.left + "px", obj.style.top = obj.top + "px";
    }
      document.onkeydown = action;
</script>
</body>
</html>

Learning JavaScript modify the picture up and down buttons change

Guess you like