使用js完成文字根据输入框内数字在屏幕上移动
生活随笔
收集整理的這篇文章主要介紹了
使用js完成文字根据输入框内数字在屏幕上移动
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
基礎案例為javascript dom編程藝術第10章動畫效果，在此基礎上增加了輸入框和根據輸入框移動的功能
一開始兩個字符會根據計時器移動到一個位置，后面輸入高和寬whoa會移動到指定位置
文件結構如下
addLoadEvent.js
function addLoadEvent(func){var onload=window.onloadif(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 falseif (!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>總結
以上是生活随笔為你收集整理的使用js完成文字根据输入框内数字在屏幕上移动的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 关于Iphone的手势识别
- 下一篇： 项目开发流程_以房地产项目总的视角，谈谈