Web前端的HelloWorld

reference-site-list

HelloWorld网页

steps

code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HelloWorld</title>
    <script type="text/javascript">
        function btnClick() {
            var app = document.getElementById("app");
            var btn = document.getElementById("btn");
            var hr = document.getElementById("hr");
            btn.style.display = 'none';
            var count = 0;
            var maxNum = 10000;

            var interval = setInterval(function() {
                var p = document.createElement("p");
                p.innerHTML = "你好，这是第 " + (count + 1) + " 次说 Hello World";
                app.insertBefore(p, hr);
                window.scrollTo(0, app.scrollHeight);
                if (count >= maxNum) {
                    clearInterval(interval);
                }
                count++;
            }, 1000);
        }
    </script>
</head>
<body>
<div id="app">
    <button id="btn" onclick="btnClick()">click</button>
    <hr id="hr">
</div>
</body>
</html>

功能解释：自己写的一个前端web页面中打印HelloWorld的一个前端最基础的例子，通过定时器不断打印hello world到页面的hr前面，然后拉动纵向滚动条到页面底部，能看到最新打印出来的hello world，使用计数器统计每次打印是第几次。