JS元素操作与定时器

最新推荐文章于 2024-07-15 16:14:38 发布

Tw368WJZ

最新推荐文章于 2024-07-15 16:14:38 发布

阅读量691

点赞数

分类专栏： js html 函数按钮元素

本文链接：https://blog.csdn.net/Tw368WJZ/article/details/79547408

版权

html 同时被 3 个专栏收录

14 篇文章 0 订阅

订阅专栏

函数

5 篇文章 0 订阅

订阅专栏

3 篇文章 0 订阅

订阅专栏

JS元素操作与定时器

1.时间定时器-延迟
// setInterval();定时延迟
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">
    //1.创建元素
    var newDiv = document.createElement("div");
    //设置类名
    newDiv.id = "first";
    newDiv.className  = "item";
    newDiv.style.background = "red";
    newDiv.innerHTML = "吉林省农村冀东水泥加快速度开始懂了卫计委的委屈ID额废物的发尾打上单  后期物业的顾问DGSAJFGSADHJKGFASDFAEUIWQHREUW服务而非福利和王力宏";
    //2.添加元素
    var body = document.getElementsByTagName('body')[0];
    var box = document.getElementsByClassName('box')[0];
    body.appendChild(newDiv);//在body最后面添加元素
    body.insertBefore(newDiv,box);//把newDiv插进box前面
    // body.replaceChild(newDiv,box);//newDiv替换掉box
    //3.删除元素
    // body.removeChild(box);
    // box.remove();

  // js 基础语法
  // 原生对象
  var obj = {
    name:"丁鹏",
    age:12,
    gender:"man",
    eat:function(){
        console.log("开始出发");
    }
  };
  obj.dd = 1;
  console.log(obj);
  console.log(obj.age);
  obj.eat();
 //数组对象 浏览器自己添加的对象(div);
 console.log(newDiv);
//dom(元素/div..)属性
//节点 标签 文本,注释 声明(doctype)
//获取元素下所有字点
console.log(box.childNodes);
//获取标签类型的子节点
console.log(box.childNodes[1]);
//获取div尺寸大小
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();定时延迟
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() 方法用于在指定的毫秒数后调用函数或计算表达式...只能执行一次

    //clearInterval(timer)清除定时器 使定时器停止
    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(){//如果按多次按钮就会创建多个setInterval(,)定时器
        num++;
        console.log(num);
        if (num >= 2) {
            clearInterval(createTimer);
            console.log(num);
        }
        createTimer = setInterval(function(){   
            var jb = document.createElement("img");//创建img金币
             jb.src = "../img/11.jpg";//添加图片链接
             jb.className = "item";//添加css样式
             jb.style.left = Math.random()*500 + 100 + "px";//规定图片创建的距离
             document.getElementsByTagName("body")[0].appendChild(jb);//在body最后面添加jb
             var downTime = setInterval(function(){
                jb.style.top = jb.offsetTop + 5 + "px";//金币离父级body顶部的距离
                if (jb.offsetTop >= 500) {
                    jb.remove();
                    clearInterval(downTime);
                }
             },20);

        },200);
    }
</script>
</html>