js之定时器相关

灵跃115

于 2020-09-08 20:04:27 发布

阅读量222

点赞数

本文链接：https://blog.csdn.net/wang_ningning/article/details/108261540

版权

只能输入数字的文本框

 <input type="text " id="txt">

    <script>
        

        var txt = document.querySelector('#txt');
        txt.onkeydown = function(e) {
            //判断用户当前数下的键
            // 按下后退键 8 删除一个字符
            if ((e.keyCode < 48 || e.keyCode > 57) && e.keyCode !== 8) {
                //输入的非数字就取消默认行为
                // e.preventDefault(); // 或者是return false
                return false;
            }
        }

页面加载事件

<script>
        //BOM onload 页面加载完成之后执行
        //页面加载完成 页面上的所有的元素创建完毕，并且引用的外部资源下载完毕（js， css 图片）
        window.onload =function() {
            var box=document.querySelector('.box');
            console.dir(box);
        }
        //window.onunload页面卸载的时候执行
        //f5 所做的两件事
        // 1 卸载页面
        // 2 重新加载页面
    </script>
</head>
<body>
    <div class="box">

    </div>
    <script>
        //当页面上的元素创建完毕就会执行
    </script>

设置定时器

 //开始  设置一个定时器  
        // setTimeOut()   ----定时炸弹  每隔一段时间执行，只执行一次
        // setInterval() ------闹钟     每隔一段时间执行，重复执行

        var btn1 = document.querySelector('#btn1');
        var timerId;
        btn1.onclick = function() {
            //两个参数
            // 第一个参数是匿名函数或者是命名函数，第二个参数是定时时间，单位是毫秒
            //返回值是这个定时器的标识
            // timerId = setTimeout(function() {
            //     console.log('爆炸了');
            // }, 3000);
            timerId = setTimeout(fn, 3000); // 这里的fn不要加（）
            function fn() {
                console.log('爆炸了');
            }


        }


        var btn2 = document.querySelector('#btn2');
        btn2.onclick = function() {
            //取消定时器
            clearTimeout(timerId);

        }

倒计时功能

 <style>
        .items {
            width: 430px;
            height: 45x;
            margin: 0px auto;
        }
        
        .items strong {
            background-color: orange;
            color: #fff;
            line-height: 49px;
            height: 49px;
            font-size: 20px;
            padding: 0 10px;
            border-radius: 5px;
            box-shadow: 1px 1px 3px rgba(0, 0, 0, .2);
        }
        
        .items>span {
            float: left;
            line-height: 49px;
            color: orange;
            font-size: 32px;
            margin: 0 auto;
        }
        
        .txt {
            width: 260px;
            height: 50px;
            margin: 200px auto 50px auto;
        }
    </style>
</head>

<body>

    <h1 class="txt">距离光棍节，还有</h1>

    <div class="items">
        <span><span id="day">00</span>天</span>
        <strong><span id="hour">00</span>时</strong>
        <strong><span id="minute">00</span>分</strong>
        <strong><span id="second">00</span>秒</strong>
    </div>


        var day = document.querySelector('#day');
        var hour = document.querySelector('#hour');
        var minute = document.querySelector('#minute');
        var second = document.querySelector('#second');


        function getInterval(start, end) {
            var interval = end - start;
            interval = interval / 1000;
            var day = Math.round(interval / 60 / 60 / 24);
            var hour = Math.round(interval / 60 / 60 % 24);
            var minute = Math.round(interval / 60 % 60);
            var second = Math.round(interval % 60);
            return {
                day: day,
                hour: hour,
                minute: minute,
                second: second
            }

        }
        var endDate = new Date('2020-11-11 0:0:0');
        setInterval(countdown, 1000); //因为每次刷新都会重新显示00 所以这里要提前调用一次函数
        countdown();

        function countdown() {
            setInterval(function() {
                //当前日期
                var startDate = new Date();
                var interval = getInterval(startDate, endDate);
                day.innerHTML = interval.day; //返回的是对象
                hour.innerHTML = interval.hour < 10 ? '0' + interval.hour : interval.hour;
                minute.innerHTML = interval.minute < 10 ? '0' + interval.minute : interval.minute;
                second.innerHTML = interval.second < 10 ? '0' + interval.second : interval.second;
            }, 1000);
        }

与offset有关

var box1 = document.querySelector('.box1');
        console.log(box1.offsetLeft);
        console.log(box1.offsetTop); //盒子距离页面的左边和上边的距离
        console.log(box1.offsetWidth); // 300
        console.log(box1.offsetHeight); // 300  盒子的宽度和高度



        var box2 = document.querySelector('.box2');


        //offsetParent  获取距离当前元素最近的定位父元素
        // 如果定位的父元素，则是距离body的距离
        console.log(box2.offsetParent); //body
        //加了定位以后打印的是类名是box1的div


        //获取子元素box2  包括边框和padding
        console.log(box2.offsetLeft);  //100距离body（没有定位的父级）或者是父级的距离
        console.log(box2.offsetHeight);  //这个盒子的高度是130  宽度也是130
        //beacause border:10+padding:20+widtn:100

与client和scroll有关

 <script>
        var box1 = document.querySelector('.box1');
        //与client有关
        //盒子的border宽度
        console.log(box1.clientLeft);//10
        console.log(box1.clientTop);//10

        // 盒子的宽度：100 和padding：10+10
        console.log(box1.clientWidth);//120
        console.log(box1.clientHeight);//120



        //scroll  滚动的距离
        console.log(box1.scrollLeft);
        console.log(box1.scrollTop);

        // 内容的大小，包括隐藏的内容，不包括滚动条
        console.log(box1.scrollWidth);
        console.log(box1.scrollHeight);