JSFiddle - React, Tailwind, and code Playground

HTML

<div id="div" style="width: 100px;height:100px"></div>
<p id="message">HELLO</p>

CSS

body {
	    width: 500x;
	    margin: 0 auto;
	}
	div {
	    background: #888;
	}

JavaScript

window.onload = function(){
    var m = document.getElementById("message");
    m.onclick = positionMessage();
}
//这个是 JavaScript DOM 编程艺术  里面的一个例子，我用来参考的
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,10);
	var ypos = parseInt(elem.style.top,10);
	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);
}

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",200,100,10);
}


//这个是我自己写的
function fade(e,t,d){
	e.style.opacity = 1 - t/d;  //出错，firebug显示  e.style is undefined
	t++;
	var str = "fade('" + e + "'," + t + "," + d + ")";
	if(t < d) {
		anim = setTimeout(str,20);
	}

}

function fadeAnimate() {
	var div = document.getElementById("div");
	div.style.opacity = 1;
	div.onclick = function() {
		fade(div,0,100);
	};
}