美文网首页
html基础 持续更新

html基础 持续更新

作者: wkmx | 来源:发表于2019-06-14 08:48 被阅读0次

    html js 基础

    js 常见获取dom对象的方法

    • getElementById()
    • getElementByName()
    • getElementByTagName()
    • getElementByClassName()
    getElementById 根据ID获取元素
    
    getElementsByTagName 通过标签名获取元素, 返回 NodeList
    
    getElementByClassName 根据类名获取, 返回 HTMLCollection 类数组类型
    

    添加事件的常用方法

    1. 使用 onlock 属性 (不推荐, 不方便管理)

     <button onclick="clickHandler(event)">按钮</button>
    

    2. 给 dom 对象添加 onclick 方法

    document.getElementById("btn1").onclick = function() {}
    

    3. 事件监听绑定 click 事件

    document.getElementById("id").addEventListener("click", function() {});
    

    js 后端确认框

    var dels = document.getElementByClassName('btn btn-outline-danger'); // 通过 类名 获取一个 nodeList, 循环添加 onclick 方法
    
    for (var i = 0; i < dels.length; i++) {
        // dom 事件处理级别
        dels[i].onclick = function() {
            if (!confirm) {
                return false; // 如果取消了, 返回false
            }
        }
    
        // 事件监听绑定 click
        dels[i].addEventListener("click", function() {
        
        })
    }
    

    常见页面定时跳转

    history.back(): 页面回退

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Skip</title>
    </head>
    <script type="text/javascript">
        onload = function() {
            setInterval(go, 1000);
            var v = document.getElementById("backHref")
            v.onclick = function() {
                event()
            }
        }
        var x = 3; // 使用全局变量保存时间
        function go() {
            x--;
            if (x > 0) {
                document.getElementById("sp").innerHTML = x;
            } else {
                event();
            }
        }
    
        function event() {
            history.back()
        }
    </script>
    <body>
    {{ .msg }}  <span id="sp">3</span> <a id="backHref" href="#">点击立即返回</a>
    </body>
    </html>
    

    {{.msg}} 后端模板渲染的时候需要提示的消息

    页面跳转, 提示信息后, 三秒跳转

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
    </head>
    <script type="text/javascript">
        onload = function() {
            setInterval(go, 1000);
            var v = document.getElementById("backHref")
            v.onclick = function() {
                event()
            }
        }
        var x = 3;
        function go() {
            x--;
            if (x > 0) {
                document.getElementById("sp").innerHTML = x;
            } else {
                event();
            }
        }
    
        function event() {
            location.href={{ .href }};
        }
        
    </script>
    
    <body>
        
    </body>
    {{ .msg }}, <span id="sp">3</span> <a id="backHref" href="{{ .href }}">点击立即返回</a>
    </html>
    

    {{.msg}} 后端模板渲染的时候需要提示的消息, {{.href}} 需要跳转的地址

    相关文章

      网友评论

          本文标题:html基础 持续更新

          本文链接:https://www.haomeiwen.com/subject/mowyfctx.html