JavaScript -- 总结 11 （小白）

最新推荐文章于 2024-08-12 09:24:46 发布

柿子来了

最新推荐文章于 2024-08-12 09:24:46 发布

阅读量335

点赞数 6

文章标签： javascript 前端

本文链接：https://blog.csdn.net/2301_78949452/article/details/140888730

版权

超时定时器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        var timeout =  setTimeout(function() {
            alert("过去5秒钟");
        }, 5000);

        clearTimeout(timeout);
    </script>
</body>
</html>

间歇定时器

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>

        // setInterval(); 间歇定时器

        var num = 0;

        // 定时器ID
        var time = setInterval(function () {
            num++;
            console.log(num);
        }, 3000);

        // 清除间歇定时器
        clearInterval(time);
    </script>
</body>

</html>

倒计时

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <!-- 禁用按钮 -->
    <button disabled> <span>10</span>s后开抢!</button>

    <script>
        // 10秒后开抢    
        var btn = document.getElementsByTagName("button")[0];
        var span = document.getElementsByTagName("span")[0];

        // 间歇定时器
        var updateTime = setInterval(function () {
            span.innerHTML -= 1;
        }, 1000);

        // 超时定时器
        var openTime = setTimeout(function () {
            btn.removeAttribute("disabled");

            // 清除间歇定时器
            clearInterval(updateTime);
        }, 10000);
    </script>
</body>

</html>

假期倒计时

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <div class="box"></div>

    <script>
        // 日期对象
        // 当前时间
        var future = new Date("2024/9/17");

        setInterval(function () {

            var date = new Date();

            // 目标时间

            // 时间差
            var time = future.valueOf() - date.valueOf();

            var s = parseInt(time / 1000 % 60);
            var m = parseInt(time / 1000 / 60 % 60);
            var h = parseInt(time / 1000 / 60 / 60 % 24);
            var d = parseInt(time / 1000 / 60 / 60 / 24);

            // console.log(d + "天" + h + "小时" + m + "分钟" + s + "秒");
            document.getElementsByClassName("box")[0].innerHTML = d + "天" + h + "小时" + m + "分钟" + s + "秒";

        }, 1000);
    </script>
</body>

</html>

时间同步

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div class="box"></div>
    <script>
        var box = document.getElementsByClassName("box")[0];

        getTime(box);

        // 每一秒调用一次函数
        setInterval("getTime(box)", 1000);


        // 时间格式化函数
        function trueTime(time) {
            if (time < 10) {
                time = "0" + time;
            }

            return time;
        }
        // 封装函数
        function getTime(ele) {
            // 日期对象
            var date = new Date();

            // 当前时间：2024年7月24日 周三 10:51:00
            // 获取年 getFullYear()
            var year = date.getFullYear();
            // 获取月 getMonth()+1
            var month = date.getMonth() + 1;
            // 获取日 getDate()
            var day = date.getDate();
            // 获取星期 getDay()
            var week = date.getDay();   // 3        
            var weeks = ["周日", "周一", "周二", "周三", "周四", "周五", "周六"];
            // 获取时
            var hours = date.getHours();
            // 获取分
            var minutes = date.getMinutes();
            // 获取秒
            var seconds = date.getSeconds();
            // 写入到文档
            ele.innerHTML = ("当前时间为：" + year + "年" + month + "月"
                + day + "日 " + weeks[week] + " " + trueTime(hours) +
                ":" + trueTime(minutes) + ":" + trueTime(seconds));
        }
    </script>
</body>

</html>

匀速动画

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .father {
            width: 1000px;
            height: 500px;
            border: 1px solid #000;
            margin: 0 auto;

            position: relative;
        }

        .son {
            width: 200px;
            height: 200px;
            background-color: red;

            position: absolute;
            top: 0;
            left: 0;
        }
    </style>
</head>

<body>
    <button>向右</button>
    <button>向左</button>

    <div class="father">
        <div class="son"></div>
    </div>

    <script>
        // 小盒子以每秒10px的速度向右移动, 直到父元素右侧为止
        var father = document.getElementsByClassName("father")[0];
        var son = document.getElementsByClassName("son")[0];
        var btns = document.getElementsByTagName("button");

        // 定时器id
        var timeId;
        // 向右走
        btns[0].onclick = function () {
            // 每次点击之后，先清除多余定时器
            clearInterval(timeId);

            timeId = setInterval(function () {
                if (son.offsetLeft < father.clientWidth - son.offsetWidth) {
                    son.style.left = son.offsetLeft + 10 + "px";
                }
            }, 10);
        }

        // 向左走
        btns[1].onclick = function () {
            // 每次点击之后，先清除多余定时器
            clearInterval(timeId);

            timeId = setInterval(function () {
                if (son.offsetLeft > 0) {
                    son.style.left = son.offsetLeft - 10 + "px";
                }
            }, 10);
        }
    </script>
</body>

</html>

练习转圈圈

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>

        .father {
            width: 500px;
            height: 500px;
            border: 1px solid red;
            position: relative;
        }

        .son {
            width: 100px;
            height: 100px;
            background-color: red;
            border-radius: 50%;
            position: absolute;
            top: 0;
            left: 0;
        }

    </style>
</head>
<body>

        <button>转圈圈</button>
        <button>停止</button>
    
    <div class="father">
        <div class="son"></div>
    </div>

    <script>  

        var father = document.getElementsByClassName("father")[0];
        var son = document.getElementsByClassName("son")[0];
        var btns = document.getElementsByTagName("button");

        var w = father.clientWidth - son.offsetWidth;
        var h = father.clientHeight - son.offsetHeight;
        var time;
        btns[0].onclick = function () {
            clearInterval(time);
            time = setInterval(function () {
                if (son.offsetLeft == 0 && son.offsetTop == 0){
                    moveX(son,w);
                } else if(son.offsetLeft == w && son.offsetTop == 0) {
                    moveY(son,h);
                } else if(son.offsetLeft == w && son.offsetTop == h) {
                    moveX(son,0);
                } else if(son.offsetLeft == 0 && son.offsetTop == h) {
                    moveY(son,0);
                }
            },20);
        }
        btns[1].onclick = function () {
            clearInterval(time);
        }
    
        
        // 匀速动画
        // ele 要运动的元素
        // target 运动的目标位置
        function moveX(ele, target) {
            // 先清除定时器
            // 给元素自定义一个属性，用来作为定时器id
            clearInterval(ele.timeId);

            // 定时器
            ele.timeId = setInterval(function () {
                var speed = ele.offsetLeft < target ? 10 : -10;
                ele.style.left = Math.abs(target - ele.offsetLeft) >= 10 ? ele.offsetLeft + speed + "px" : target + "px";
            }, 10);
        }

        function moveY(ele, target) {
            // 先清除定时器
            // 给元素自定义一个属性，用来作为定时器id
            clearInterval(ele.timeId);

            // 定时器
            ele.timeId = setInterval(function () {
                var speed = ele.offsetTop < target ? 10 : -10;
                ele.style.top = Math.abs(target - ele.offsetTop) >= 10 ? ele.offsetTop + speed + "px" : target + "px";
            },10);
        }
     </script>

</body>
</html>