编程日志 | nohup.net-HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<title>Quick Start - Leaflet</title>

<link rel="shortcut icon" type="image/x-icon" href="docs/images/favicon.ico" />

    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.8.0/dist/leaflet.css" integrity="sha512-hoalWLoI8r4UszCkZ5kL8vayOGVae1oxXe/2A4AO6J9+580uKHDO3JdHb7NzwwzK5xr/Fs0W40kiNHxM9vyTtQ==" crossorigin=""/>
    <script src="https://unpkg.com/leaflet@1.8.0/dist/leaflet.js" integrity="sha512-BB3hKbKWOc9Ez/TAwyWxNXeoV9c1v6FIeYiBieIWkpLjauysF18NzgR1MBNBXf8/KABdlkX68nAhlwcDFLGPCQ==" crossorigin=""></script>

<style>
html, body {
height: 100%;
margin: 0;
}
.leaflet-container {
height: 400px;
width: 600px;
max-width: 100%;
max-height: 100%;
}
</style>


</head>
<body>



<div id="map" style="width: 600px; height: 400px;"></div>
<script>

var map = L.map('map').setView([51.505, -0.09], 13);

var tiles = L.tileLayer('http://{s}.google.com/vt?lyrs=m&x={x}&y={y}&z={z}', {
maxZoom: 19,
subdomains:['mt0','mt1','mt2','mt3']
}).addTo(map);

var marker = L.marker([51.5, -0.09]).addTo(map)
.bindPopup('<b>Hello world!</b><br />I am a popup.').openPopup();

var circle = L.circle([51.508, -0.11], {
color: 'red',
fillColor: '#f03',
fillOpacity: 0.5,
radius: 500
}).addTo(map).bindPopup('I am a circle.');

var polygon = L.polygon([
[51.509, -0.08],
[51.503, -0.06],
[51.51, -0.047]
]).addTo(map).bindPopup('I am a polygon.');


var popup = L.popup()
.setLatLng([51.513, -0.09])
.setContent('I am a standalone popup.')
.openOn(map);

function onMapClick(e) {
popup
.setLatLng(e.latlng)
.setContent('You clicked the map at ' + e.latlng.toString())
.openOn(map);
}

map.on('click', onMapClick);

</script>



</body>
</html>

JS实现网页代码复制带格式换行2022-06-07 15:13:22

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>pre代码复制功能</title>
    <script src="/jslib/jquery/jquery-3.6.0.min.js"></script>
    <style>
        .content{
            width: 1000px;
            margin: 10px auto;
        }
        .content pre{
            position: relative;
            background-color: #f5f5f5;
            border: 1px solid #ccc;
            border-radius: 4px;
            padding: 10px;
        }
        pre .btn-pre-copy{
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            -khtml-user-select: none;
            user-select: none;
            position: absolute;
            top: 10px;
            right: 12px;
            font-size: 12px;
            line-height: 1;
            cursor: pointer;
            color: hsla(0,0%,54.9%,.8);
            transition: color .1s;
        }
        textarea{
            width: 100%;
        }
    </style>
</head>
<body>
<div>
    <pre>@SpringBootApplication
public class DemoApplication {
    public static void main(String[] args) {
        SpringApplication.run(DemoApplication.class, args);
    }
}</pre>
    ---分割线---
    <pre>@RestController
@RequestMapping("/")
public class TestController {
    @GetMapping("/test")
    public String test() {
        return "test";
    }
}</pre>
    ---分割线---
    <pre>server:
  port: 8080</pre>
    ---复制粘贴测试区域---<br>
    <textarea rows="10" onclick="selectAll(this)">你可以在这里进行粘贴测试</textarea>
</div>
<script>
    $(function(){
        //给每一串代码元素增加复制代码节点
        let preList = $(".content pre");
        for (let pre of preList) {
            //给每个代码块增加上“复制代码”按钮
            let btn = $("<span class=\"btn-pre-copy\" onclick='preCopy(this)'>复制代码</span>");
            btn.prependTo(pre);
        }
    });
    /**
     * 执行复制代码操作
     * @param obj
     */
    function preCopy(obj) {
        //执行复制
        let btn = $(obj);
        let pre = btn.parent();
        //为了实现复制功能。新增一个临时的textarea节点。使用他来复制内容
        let temp = $("<textarea></textarea>");
        //避免复制内容时把按钮文字也复制进去。先临时置空
        btn.text("");
        temp.text(pre.text());
        temp.appendTo(pre);
        temp.select();
        document.execCommand("Copy");
        temp.remove();
        //修改按钮名
        btn.text("复制成功");
        //一定时间后吧按钮名改回来
        setTimeout(()=> {
            btn.text("复制代码");
        },1500);
    }
    /**
     * 全选文本
     * @param obj
     */
    function selectAll(obj){
        $(obj).select();
    }
</script>
</body>
</html>

谷歌浏览器导出的HAR包web展示工具开发2022-05-31 09:45:49

在别人做好的基础上，会方便不少。

http://www.softwareishard.com/blog/har-viewer/

<< 1 2 > >>

编程日志 | nohup.net

实践是检验真理的唯一标准

HTTP caching开发者文档学习记录2023-05-18 08:56:18

viewport深入理解2023-04-30 12:58:36

关于像素的几个概念-前端2023-04-04 09:42:32

编程基础知识之浏览器缓存机制（转）2023-01-29 13:45:18

浏览器user-agent即UA的前世今生2022-11-07 13:47:52

H5手机唤起拨打电话功能2022-08-17 14:02:56

osm地图服务提供商2022-07-13 11:39:56

OSM地图换成google地图2022-07-05 15:59:04

JS实现网页代码复制带格式换行2022-06-07 15:13:22

谷歌浏览器导出的HAR包web展示工具开发2022-05-31 09:45:49