JavaScript收藏

JS控制字体大小

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>字体大小控制</title>
        <style>
            .button {
                background-color: #4CAF50;
                border: none;
                color: white;
                padding: 15px 32px;
                text-align: center;
                font-size: 1.4em;
                margin: 4px 2px;
                border-radius: 8px;
            }
            .button1 {
                background-color: #00bace;
                border: none;
                color: white;
                padding: 15px 32px;
                text-align: center;
                font-size: 1em;
                margin: 4px 2px;
                border-radius: 8px;
            }
            h2 {
                text-align: center;
                padding-top: 2em;
            }
        </style>
        <script>
            function ChangefontSize(z) {
                var x = document.getElementById("demo");
                var y = window
                    .getComputedStyle(x)
                    .fontSize;
                var fn = y[0];
                var sn = y[1];
                var fsn = fn + sn;
                fsn = Number(fsn);
                if (z == 1) {
                    fsn = fsn - 3;
                } else {
                    fsn = fsn + 3;
                }
                fsn = String(fsn) + 'px';
                x.style.fontSize = fsn;
            }
        </script>
    </head>
    <body>

        <h2>JS控制字体大小和页面跳转演示</h2>
        <button class="button" onclick="ChangefontSize(0)">A+</button>
        <button class="button" onclick="ChangefontSize(1)">A-</button>
        <div id="demo">
            <p>
                第一段： JS控制字体大小和页面跳转演示
            </p>
            <p>
                第二段： JS控制字体大小和页面跳转演示
            </p>
        </div>
        <hr>
        <button
            class="button1"
            onclick="javascript:window.location.href='https://google.com'">跳转谷歌</button>
        <button
            class="button1"
            onclick="javascript:window.location.href='https://baidu.com'">跳转百度</button>
    </body>
</html>

字体大小控制

JS控制字体大小和页面跳转演示

第一段： JS控制字体大小和页面跳转演示

第二段： JS控制字体大小和页面跳转演示

JS查找替换：

<html>
    <head>
        <meta charset="utf-8">
        <title>Try</title>
        <script type="text/javascript">
            function load_home() {
                var text = document.getElementById("note");
                str = text.innerText.replace(/Hello World!/g, "你好世界！");
                text.innerText = "Hello World! 已替换为：" + str;
            }
        </script>
    </head>
    <body>
        <button type="button" id="btn" onclick="javascript:load_home();">确认</button>
        <p id="note">Hello World!</p>
    </body>
</html>

Try

替换 Hello World! 为：你好世界！

Hello World!

计数器：

<html>
    <head>
        <meta charset="utf-8">
        <title>Try</title>
        <script type="text/javascript">
            function load_home() {
                var str = document.getElementById("note");
                var num = str.innerText;
                num++;
                str.innerText = num;
            }
        </script>
    </head>
    <body>
        <button type="button" id="btn" onclick="load_home();">确认</button>
        <p>已点击了：<span id="note">0</span>次</p>
    </body>
</html>