Web前端的HelloWorld
Xplorist Lv6
  2021-12-02 08:42:00 2021-12-02 08:42      

Web前端的HelloWorld

reference-site-list

HelloWorld网页

steps

  • 0

code

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<!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，使用计数器统计每次打印是第几次。
  • 本文标题：Web前端的HelloWorld
  • 本文作者：Xplorist
  • 创建时间：2021-12-02 08:42:00
  • 本文链接：https://xplorist.tech/2021/12/02/17661a4fc2ac/
  • 版权声明：本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！
 评论