console 命令行工具 X clear

console

$("h6").text("支持jquery");
$(document).ready(function(){
        let i=0;
        setInterval(function(){
            $.ajax({
                url:"http://localhost:3000/api/roads/1",
                type:"get",
                dataType:"json",
                success:function(res){
                    console.log(res);
                    i++;
                    $("h5").text("-----------------------第"+i+"次数据请求--------------------------");
                },
                error:function(xhr){
                    console.log(xhr);
                }
            });
        },5000);

        setTimeout(function(){
            $("h6").text("支持jquery，延时执行！");
        },10000);
  			setTimeout(function(){
            let h6 = document.getElementsByTagName("h6");
    				h6[0].textContent = "支持原生dom";
        },20000);
    });

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>node</title>
</head>
<body>
    <div class="container">
        <p>css动画</p>
        <h6>不支持动态数据、不支持jquery插件</h6>
        <h5></h5>
    </div>
</body>
</html>

body{
            background: #fff;
        }
        .container ul{
            display: grid;
            grid-template-columns: repeat(2,1fr);
            grid-auto-rows: 100px;
            list-style: none;
        }
        .container ul li{
            border:1px solid #eee;
            text-align: center;
            vertical-align: middle;
            line-height: 5;
        }

        @keyframes anim{
            from{
                padding-left: 0px;
            }
            to{
                padding-left: 100px;
            }
        }
        .container p{
            animation: anim 4s ease 1s infinite alternate;
        }

本项目引用的自定义外部资源

jquery.js