当前位置：网站首页>使用js完成文字根据输入框内数字在屏幕上移动

使用js完成文字根据输入框内数字在屏幕上移动

2022-04-22 15:52:00 【雨浅听风吟】

基础案例为javascript dom编程艺术第10章动画效果，在此基础上增加了输入框和根据输入框移动的功能
在这里插入图片描述
一开始两个字符会根据计时器移动到一个位置，后面输入高和宽whoa会移动到指定位置
在这里插入图片描述文件结构如下
在这里插入图片描述

addLoadEvent.js

function addLoadEvent(func){
    
    var onload=window.onload
    if(typeof onload!='function'){
    
        window.onload=func;
    }else{
    
        window.onload=function(){
    
            onload();
            func();
        }
    }
}

moveElement.js

function moveElement(elementID,final_x,final_y,interval){
    
    if (!document.getElementById) return false;
    if (!document.getElementById(elementID)) return false;
    var elem = document.getElementById(elementID);
    var xpos = parseInt(elem.style.left);
    var ypos = parseInt(elem.style.top);
    if (xpos == final_x && ypos == final_y) {
    
      return true;
    }
    if (xpos < final_x) {
    
      xpos++;
    }
    if (xpos > final_x) {
    
      xpos--;
    }
    if (ypos < final_y) {
    
      ypos++;
    }
    if (ypos > final_y) {
    
      ypos--;
    }
    elem.style.left = xpos + "px";
    elem.style.top = ypos + "px";
    var repeat = "moveElement('"+elementID+"',"+final_x+","+final_y+","+interval+")";
    movement = setTimeout(repeat,interval);


}

positionMessage.js

function positionMessage(){
    
    if(!document.getElementById)return false
    if (!document.getElementById("message")) return false;
    var elem = document.getElementById("message");
    elem.style.position = "absolute";
    elem.style.left = "50px";
    elem.style.top = "100px";
    moveElement("message",125,25,20);
    if (!document.getElementById("message2")) return false;
    var elem = document.getElementById("message2");
    elem.style.position = "absolute";
    elem.style.left = "50px";
    elem.style.top = "50px";
    moveElement("message2",125,75,20);
}
reMoveElement=function(){
    
    var Height=document.getElementById("Height");
    var  Width=document.getElementById("Width");
    moveElement("message",Height.value,Width.value,20);
    return false ;
  }

addLoadEvent(positionMessage);

message.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script type="text/javascript" src="scripts/addLoadEvent.js"></script>
    <script type="text/javascript" src="scripts/positionMessage.js"></script>
    <script type="text/javascript" src="scripts/moveElement.js"></script>
    <title>Document</title>
</head>
<body>
    <p id="message">whee!</p>
    <p id="message2">whoa!</p>
    <form >
        Height : <input id="Height" type="number" name="Height" />
        Width: <input id="Width" type="number" name="Width" />
        <input type="submit" value="提交" onclick="reMoveElement();return false ;" />
        <!-- οnclick= " moveElement('message',Height,Width.,20)" -->
    </form>
</body>
</html>

版权声明
本文为[雨浅听风吟]所创，转载请带上原文链接，感谢
https://blog.csdn.net/weixin_39289876/article/details/124301874

边栏推荐

猜你喜欢

随机推荐