页面动态加载效果

yang2639408005

已于 2023-11-07 18:51:54 修改

阅读量70

点赞数

文章标签： chrome javascript 前端

于 2023-11-06 18:20:32 首次发布

本文链接：https://blog.csdn.net/yang2556925063/article/details/134251939

版权

一个简单的无限循环页面加载
完整代码如下【小圆圈，越来越大，颜色随机，到最大再缩小，如此往复循环】

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <meta charset="utf-8" />
    <style>
        .son {
            border: 1px solid green;
            height: 20px;
            width: 80px;
            color: white;
            position: absolute;
            /*上下左右居中*/
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
            border-radius:50%;
        }
    </style>
</head>
<body id="MAX" style="background-color:black;">
    <div style="border:1px solid red;width:20px;height:20px;border-radius:50%;" onclick="start()"></div>
</body>
</html>
<script src="~/Scripts/jquery/jquery-2.1.1.min.js"></script>
<script>
    var maxboxnum = 5;//添加的最大的圈数
    var addnum = 200;//每次添加圈的时间隔（单位是毫秒）
    function start() {
        var t = 0;
        var timer = setInterval(function () {
            t++;
            if (t > maxboxnum) {
                //清除定时器
                clearInterval(timer);
                //清除添加
                clear(maxboxnum+2);

            }
            addpro(t);

        }, addnum);
    }
    function addpro(t) {
        var border = t^2;
        console.log("本次循环的t*******：" + border);
        var randomcolor=randomHexColor();
        AddStr =
                "<div id=add"+t+ "  class=\"son\" style=\"height:" + border + "px;" + "width:" + border + "px;"+ "border:1px solid " + randomcolor+ "\">" +
                 "</div>"
        $("#MAX").append(AddStr);
    }
    function randomHexColor() {
        var hex = Math.floor(Math.random() * 16777216).toString(16);
        while (hex.length < 6) {
            hex = '0' + hex;
        }
        return '#' + hex; 
    }
    function clear(t) {
        var timer = setInterval(function () {
            t--;
            if (t < 0) {
                clearInterval(timer);
            }
            remove(t);
        }, addnum);
    }
    function remove(t) {
        $("#add" + t).remove();
        if (t == maxboxnum-1) start();
    }
</script>