<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> html,body{ height: 100%; } .box{ width: 40px; height: 40px; border-radius: 50%; position: absolute; animation: move 5s ease-out forwards infinite; /*animation: 动画名 播放事件 播放速度 反向播放 重复次数;*/ } @-webkit-keyframes move{ 50%{left:800px;top:500px;opacity: 0;} 100%{left:0px;top:100px;opacity: 1;} } @-moz-keyframes move{ 50%{left:800px;top:500px;opacity: 0;} 100%{left:0px;top:100px;opacity: 1;} } @keyframes move{ 50%{left:800px;top:500px;opacity: 0;} 100%{left:0px;top:100px;opacity: 1;} } </style> </head> <body> <button onclick="createDiv()">创建div</button> <script type="text/javascript" src="new_file.js"></script> <script type="text/javascript"> //document.createElement("div"); function createDiv(){ var oDiv = document.createElement("div"); //oDiv = $("div"); //console.log(oDiv) //设置div的样式 // 方法一：用js设置样式 // oDiv.style.width = "200px"; // oDiv.style.height = "200px"; // oDiv.style.backgroundColor = randomColor(); // oDiv.style.float = "left"; // // 方法二：用css设置样式 oDiv.className = "box"; oDiv.style.backgroundColor = randomColor(); oDiv.style.left = ( Math.random()*($w()-40) )+"px"; oDiv.style.top = ( Math.random()*($h() -40) )+100+"px"; // 父节点.appendChild(子节点) 将子节点添加到父节点孩子列表的末尾 document.body.appendChild(oDiv); } </script> </body> </html>