[HTML]APIs

Geolocation

获取用户的地理位置信息

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <button onclick="getLocation()">点击获取位置信息</button>
    <output id="geo"></output>
</body>
<script>
    var geo = document.getElementById("geo")
    function getLocation() {
        if (navigator.geolocation)
            navigator.geolocation.getCurrentPosition(showPositon)
        else
            geo.innerHTML = "此浏览器不支持获取位置信息"
    }
    function showPositon(position) {
        geo.innerHTML = "<br/>纬度:" + position.coords.latitude + "<br/>经度:" + position.coords.longitude
    }
</script>

</html>

Drag/Drop

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>html-drag&drop</title>
    <style>
        .box {
            width: 110px;
            padding: 5px;
            height: 200px;
            border: 1px solid black;
            margin: 10px;
            float: left;
        }
    </style>
</head>

<body>
    <p>试着将图片拖至方框内</p>
    <div class="box" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
    <div class="box" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
    <div class="box" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
    <img id="pic1" src="https://img0.baidu.com/it/u=570534185,2137476261&fm=253&fmt=auto?w=123&h=161" alt="无法显示"
        width="100" ondragstart="drag(event)" draggable="true" />
</body>
<script>
    function allowDrop(e) {
        e.preventDefault()
    }
    function drag(e) {
        e.dataTransfer.setData("pic1", e.target.id)
    }
    function drop(e) {
        e.preventDefault()
        var data = e.dataTransfer.getData("pic1")
        e.target.appendChild(document.getElementById(data))
    }
</script>

</html>

Web Storage

html 提供两种对象用来在客户端存储数据
window.localStorge - 不会失效
window.sessionStorge - 数据只在一次会话有效, 退出浏览器销毁

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <button onclick="countClick()" id="btn1">点击次数增加</button>
</body>
<script>
    var btn = document.getElementById("btn1")
    function countClick() {
        if (typeof (Storage) !== "undefined") {
            if (localStorage.clickCounter) {
                localStorage.clickCounter++
                btn.innerHTML = "你已经点击" + localStorage.clickCounter + "次"
            }
            else {
                localStorage.clickCounter = 1
                btn.innerHTML = "你已经点击" + localStorage.clickCounter + "次"
            }
        } else {
            btn.innerHTML = "你的浏览器不支持web storage"
        }
    }
</script>

</html>

Web Workers

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <p> Workers是一项Web技术，它可以帮助开发者以独立的方式在单独的线程中运行脚本，而不会影响主网页的性能.<br>
        它们是异步运行的，与主网页无关，所以它们不会影响网页的响应速度和性能。</p>
    <output id="output1">0</output><br>
    <button onclick="startCount()">点击开始计数</button>
    <button onclick="endCount()">点击终止计数</button>

</body>
<script>
    var output1 = document.getElementById("output1")
    var w
    function startCount() {
        if (typeof (Worker) !== "undefined") {
            if (typeof (w) == "undefined") {
                w = new Worker("demo_worker.js")
            }
            w.onmessage = function (event) {
                output1.innerHTML = event.data
            }
        } else {
            output1.innerHTML = "你的浏览器不支持web worker"
        }
    }
    function endCount() {
        w.terminate()
        w = undefined
    }
</script>

</html>

var i = 0
function timeCount() {
    i++
    postMessage(i)
    setTimeout("timeCount()", 500)
}
timeCount()

参考

www3schools

Author:
slacr_
Copyright:
Published:
September 6, 2023
Updated:
September 6, 2023

Buy me a cup of coffee ☕.

支