创建元素节点

<!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>

posted @ 2018-09-10 18:00  邓志娇  阅读(105)  评论(0编辑  收藏  举报