用html编写JavaScript实现图形上下移动

在HTML中结合JavaScript实现图形的上下移动，通常涉及到DOM操作和CSS样式控制。首先，你需要创建一个HTML元素来代表你的图形，比如一个`<div>`：

<div id="moving-object" style="position: absolute; top: 50px;"></div>

然后，在JavaScript中，你可以获取这个元素并改变它的`top`属性来实现上下的移动：

// 获取元素
var obj = document.getElementById("moving-object");

// 定义移动函数
function moveObject(direction) {
  var currentTop = parseInt(obj.style.top);
  
  // 判断方向并移动
  if (direction === "up") {
    if (currentTop > 0) { // 防止溢出
      obj.style.top = (currentTop - 10) + 'px'; // 每次移动10像素
    }
  } else if (direction === "down") {
    obj.style.top = (currentTop + 10) + 'px';
  }
}

// 调用移动函数
moveObject("up"); // 开始向上移动
moveObject("down"); // 然后向下移动

在这个例子中，每当调用`moveObject()`函数时，图形就会按照指定的方向移动。你可以通过参数来切换移动方向。