当前位置：网站首页>Use js to complete the text and move it on the screen according to the numbers in the input box

Use js to complete the text and move it on the screen according to the numbers in the input box

2022-04-22 15:55:00 【The rain is shallow and the wind sings】

The basic case is javascript dom Programming art no 10 Chapter animation effect , On this basis, the input box and the function of moving according to the input box are added
Insert picture description here
The first two characters will move to a position according to the timer , Enter the following width and height whoa Will move to the specified location
Insert picture description here The file structure is as follows
Insert picture description here

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=" Submit " onclick="reMoveElement();return false ;" />
        <!-- οnclick= " moveElement('message',Height,Width.,20)" -->
    </form>
</body>
</html>

版权声明
本文为[The rain is shallow and the wind sings]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/04/202204221552258994.html

边栏推荐

猜你喜欢

随机推荐