JS元素操作與定時器
1.時間定時器-延遲
setInterval(function(){
newDiv.scrollTop = 200;
},1000);
1.元素操作
1.創建元素
2.添加元素
3.刪除元素
4.替換元素
5.原生對象
6.獲取元素的節點
7.獲取div尺寸大小
8.div內容尺寸大小
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.item{
width: 200px;
height:200px;
margin: 10px;
border :10px blue solid;
overflow: scroll ;
font-size: 50px;
}
body{
position: relative;
}
</style>
</head>
<body>
<div class="box">
我是box
<p>P</p>
</div>
</body>
<script type="text/javascript">
var newDiv = document.createElement("div");
newDiv.id = "first";
newDiv.className = "item";
newDiv.style.background = "red";
newDiv.innerHTML = "吉林省農村冀東水泥加快速度開始懂了衛計委的委屈ID額廢物的髮尾打上單 後期物業的顧問DGSAJFGSADHJKGFASDFAEUIWQHREUW服務而非福利和王力宏";
var body = document.getElementsByTagName('body')[0];
var box = document.getElementsByClassName('box')[0];
body.appendChild(newDiv);
body.insertBefore(newDiv,box);
var obj = {
name:"丁鵬",
age:12,
gender:"man",
eat:function(){
console.log("開始出發");
}
};
obj.dd = 1;
console.log(obj);
console.log(obj.age);
obj.eat();
console.log(newDiv);
console.log(box.childNodes);
console.log(box.childNodes[1]);
console.log(newDiv.offsetHeight);
console.log(newDiv.offsetWidth);
console.log(newDiv.clientHeight);
console.log(newDiv.scrollHeight);
console.log(newDiv.offsetLeft);
console.log(newDiv.scrollTop);
setInterval(function(){
newDiv.scrollTop = 200;
},1000);
</script>
</html>
2.定時器
1.一次性延遲定時器
setTimeout(f1,1000);
function f1(){
console.log("執行了f1");
}
註釋:1000毫秒後執行f1();
2.循環定時器
var timer = setInterval(function(){
console.log("循環定時器");
},1000);
註釋:1000執行一次函數
3.clearInterval(timer) / clearTimeout()
註釋:清除定時器 使定時器停止
<html>
<head>
<meta charset="utf-8">
<title>定時器</title>
<style type="text/css">
#first{
width: 100px;
height: 100px;
background-color: red;
position:absolute;
left: 0px;
}
</style>
</head>
<body>
<div id="first"></div>
</body>
<script type="text/javascript">
setTimeout(f1,1000);
function f1(){
console.log("執行了f1");
}
var timer = setInterval(function(){
console.log("循環定時器");
},1000);
setTimeout(function(){
clearInterval(timer);
},3000);
var first = document.getElementById('first');
first.onclick = function(){
var move = setInterval(function(){
console.log(first.offsetLeft);
first.style.left = first.offsetLeft + 5 + "px";
if (first.offsetLeft >= 500) {
clearInterval(move);
}
},1000);
}
</script>
</html>
3.接金幣遊戲
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>金幣</title>
<style type="text/css">
.item{
width: 60px;
border-radius: 50%;
position: absolute;
left: 100px;
top: 0px;
}
</style>
</head>
<body>
<input type="button" value="開始" id="start"/>
<input type="button" value="結束" id="stop"/>
</body>
<script type="text/javascript">
var start = document.getElementById('start');
var stop = document.getElementById('stop');
var createTimer;
stop.onclick = function(){
clearInterval(createTimer);
}
var num = 0;
start.onclick = function(){
num++;
console.log(num);
if (num >= 2) {
clearInterval(createTimer);
console.log(num);
}
createTimer = setInterval(function(){
var jb = document.createElement("img");
jb.src = "../img/11.jpg";
jb.className = "item";
jb.style.left = Math.random()*500 + 100 + "px";
document.getElementsByTagName("body")[0].appendChild(jb);
var downTime = setInterval(function(){
jb.style.top = jb.offsetTop + 5 + "px";
if (jb.offsetTop >= 500) {
jb.remove();
clearInterval(downTime);
}
},20);
},200);
}
</script>
</html>
