javascript例子

Posted 2020-12-30 c-x-m

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了javascript例子相关的知识，希望对你有一定的参考价值。

入口函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>入口函数</title>
    <script>
        //入口函数，回调函数：当窗口加载完成之后，才调用此方法.
        //window.onload:1.文档 2.图片加载。
        // 1.覆盖现象  2.必须等待着图片加载完成才调用此回调函数。
        // window.onload = function(){
        //     console.log(document.getElementById("box"));
        // };


        // 文档加载
        document.onload = function(){};
    </script>
</head>
<body>
    <div id="box">aaa</div>
</body>
</html>

阻止默认事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>阻止默认事件</title>
    <style>
    *{
        margin:0;
        padding:0;
    }
    .box1{
        display:block;
        width:100px;
        height:100px;
        background:red;
        text-align:center;
        line-height: 100px;
    }

    .hide{
        display:none;
    }
    </style>
</head>
<body>
    <!-- <a id="box" class="box1" href="https://www.baidu.com/">X</a> -->
    <a id="box" class="box1" href="#">X</a>
    <!-- <a id="box" class="box1" href="javascript:">X</a> -->
</body>
<script>
    var oClose = document.getElementById("box");
    box.onclick = function(event){
        // 只要有事件就会有事件，阻止a标签的默认事件。
        // event.preventDefault();
        this.className += ‘ hide‘;
    }
</script>
</html>

阻止默认事件

反引号

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div></div>
</body>
<script>
    
    // oDiv.innerHTML = ‘<ul><li>哈哈哈</li></ul>‘;

    oDiv = document.getElementsByTagName("div")[0];
    var name = ‘alex‘;
    // 模板字符串 tab键上面反引号 插入变量名${变量名}
    oDiv.innerHTML = `<ul>
        <li>${name}</li>
    </ul>`;
</script>
</html>

client

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            .box{
                width: 200px;
                height: 200px;
                position: absolute;
                border: 30px solid red;
                /*margin: 10px 0px 0px 0px;*/
                padding: 80px;
                background:pink;
            }
        </style>
    </head>
    <body>
        <div class="box">
            哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
        </div>
    </body>
    <script type="text/javascript">
        /*
         *      clientTop 内容区域到边框顶部的距离 ，说白了，就是边框的高度
         *      clientLeft 内容区域到边框左部的距离，说白了就是边框的乱度
         *      clientWidth 内容区域+左右padding   可视宽度
         *      clientHeight 内容区域+ 上下padding   可视高度
         * 
         */
        
        var oBox = document.getElementsByClassName(‘box‘)[0];
        console.log(oBox.clientTop);
        console.log(oBox.clientLeft);
        console.log(oBox.clientWidth);
        console.log(oBox.clientHeight);
        
    </script>
    
</html>

以上是关于javascript例子的主要内容，如果未能解决你的问题，请参考以下文章

前端开发工具vscode如何快速生成代码片段

golang goroutine例子[golang并发代码片段]

VSCode自定义代码片段12——JavaScript的Promise对象

分享几个实用的代码片段（附代码例子）