zoukankan      html  css  js  c++  java
  • JavaScript代码放在head和body的区别(QRCode生成)

    1.在head中时,所代表的functions只加载而不执行,执行是在某一事件触发后才开始。

    2.在body中时,直接加载并执行

    典型的区别

    如果有不在函数中的执行语句,比如变量初始化,如果在head中就不会执行。

    举个栗子:

    这段代码会生成一个二维码,二维码的跳转地址为text中超链接

    a.js放在body中,可生成二维码

    <!DOCTYPE html>
    <html>
    
    <head>
        <meta charset="utf-8" />
        <title></title>
        <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
        <script type="text/javascript" src="js/jquery.qrcode.min.js"></script>
    </head>
    
    <body>
        <div id="qrcode"></div>
        <script>
            $('#qrcode').qrcode({
                 128,
                height: 128,
                text: "http://www.bsnc.cn"
            })
        </script>
    </body>
    
    </html>

    b.js放在head中,网页为空白,没有执行js中内容

    <!DOCTYPE html>
    <html>
    
    <head>
        <meta charset="utf-8" />
        <title></title>
        <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
        <script type="text/javascript" src="js/jquery.qrcode.min.js"></script>
    <script>
            $('#qrcode').qrcode({
                 128,
                height: 128,
                text: "http://www.bsnc.cn"
            })
        </script>
    </head>
    
    <body>
        <div id="qrcode"></div>
    </body>
    
    </html>

    c.js放在head中,用window.onload函数执行js文件,这样仍然会生成二维码

    <!DOCTYPE html>
    <html>
    
    <head>
        <meta charset="utf-8" />
        <title></title>
        <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
        <script type="text/javascript" src="js/jquery.qrcode.min.js"></script>
        <script>
            window.onload = function() {
                $('#qrcode').qrcode({
                     128,
                    height: 128,
                    text: "https://www.cnblogs.com/GG-Bond/"
                })
            }
        </script>
    </head>
    
    <body>
        <div id="qrcode"></div>
    </body>
    
    </html>

    生成的二维码:

    总结:body中js代码直接执行,head中代码需要触发条件

    基于jquery的二维码生成插件qrcode,下载网址:https://github.com/jeromeetienne/jquery-qrcode/

  • 相关阅读:
    mysql in like GROUP_CONCAT
    StringBuilder的常用方法
    mysql 中unionall 使用
    mysql中,数据库字段为时间戳转时间的处理方法
    一个数组储存多个对象
    Java中的substring()用法
    java思想篇1
    任务调配管理
    字符窜数组去重及各种常规用法
    自定义属性的设值
  • 原文地址:https://www.cnblogs.com/GG-Bond/p/9634261.html
Copyright © 2011-2022 走看看