把https地址作为变量拼接在link/script 内部

电玩女神 2022-12-30 13:58 16阅读 0赞

下面是之前写的一个交互的例子，直接拿过来用一用啦，最主要的在于将把https地址作为变量拼接在link/script 内部，其余的都是次要的。

示例如下：

时间的json数据格式：data.json

{"commitTime": 1588061853944}

示例代码：

<!DOCTYPE HTML>
    <html xmlns:th="http://www.thymeleaf.org">
        <head>
            <title>jQuery数据结构渲染(2)：时间戳的处理</title>
            <meta name="viewport" content="width=device-width, initial-scale=1">
            <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
            <link rel="stylesheet" href="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
            <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
            <script src="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
        </head>
        <body>
            时间:<div id="commintTime"></div>
        </body>
        <script type="text/javascript">
            $.ajax({
                url: "data.json",
                type: 'GET',
                dataType: 'json',
                success: function(data) {
                    //
                    var htm = '';
                    htm += '' + formatTime(data.commintTime) + '';
                    $('#commintTime').html(htm)
                }
            });
            //格式化时间，时间戳的处理
            function formatTime(commintTime) {
                var date = new Date();
                //date.setTime(value);
                var month = date.getMonth() + 1;
                var hours = date.getHours();
                if (hours < 10)
                    hours = "0" + hours;
                var minutes = date.getMinutes();
                if (minutes < 10)
                    minutes = "0" + minutes;
                var time = date.getFullYear() + "-" + month + "-" + date.getDate() +
                    " " + hours + ":" + minutes;
                return time;
            }
        </script>
    </html>

显示：

![2442732dea509cb00413a17cc010e563.png][]

把https地址作为变量拼接在link/script 内部

主要代码：

例子：

<!DOCTYPE HTML>
    <html xmlns:th="http://www.thymeleaf.org">
        <head>
            <title>jQuery数据结构渲染(2)：时间戳的处理</title>
            <meta name="viewport" content="width=device-width, initial-scale=1">
            <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
            
        </head>
        <body>
            时间:<div id="commintTime"></div>
        </body>
        <script type="text/javascript">
            var webpath = "https://cdn.bootcss.com"
            document.write('<link  rel="stylesheet" type="text/css" href="' + webpath +'/twitter-bootstrap/4.3.1/css/bootstrap.min.css">');
            document.write('<scr' + 'ipt src="' + webpath + '/jquery/3.4.1/jquery.min.js"></scr' + 'ipt>');
            document.write('<scr' + 'ipt src="' + webpath + '/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></scr' + 'ipt>');
        </script>
        <script type="text/javascript">
            $.ajax({
                url: "test.json",
                type: 'GET',
                dataType: 'json',
                success: function(data) {
                    //
                    var htm = '';
                    htm += '' + formatTime(data.commintTime) + '';
                    $('#commintTime').html(htm)
                }
            });
            //格式化时间，时间戳的处理
            function formatTime(commintTime) {
                var date = new Date();
                //date.setTime(value);
                var month = date.getMonth() + 1;
                var hours = date.getHours();
                if (hours < 10)
                    hours = "0" + hours;
                var minutes = date.getMinutes();
                if (minutes < 10)
                    minutes = "0" + minutes;
                var time = date.getFullYear() + "-" + month + "-" + date.getDate() +
                    " " + hours + ":" + minutes;
                return time;
            }
        </script>
    </html>

完成  
这个时候可以打开F12，查看一下dom元素  
可以看到，通过拼接的地址可以打印在dom元素里面了。

![2c87bd2f8721166c42987c0ac5a7ebe5.png][]

[2442732dea509cb00413a17cc010e563.png]: /images/20221120/abdda0be94f249de9b8a44ffef6522b9.png
[2c87bd2f8721166c42987c0ac5a7ebe5.png]: https://img-blog.csdnimg.cn/img_convert/2c87bd2f8721166c42987c0ac5a7ebe5.png