HTML5新增API

最新推荐文章于 2023-08-24 19:36:05 发布

qianmingmaoyao

最新推荐文章于 2023-08-24 19:36:05 发布

阅读量202

点赞数

文章标签： html5 servlet 前端

本文链接：https://blog.csdn.net/qianmingmaoyao/article/details/126607982

版权

01-location对象

<a href="#aboutus">关于我们</a>
    <p id="aboutus">关于我们</p>

    <form action="">
        <p>
            用户名:<input type="text" name="username">
        </p>
        <p>
            年龄:
            <input type="number" name="age" id="">
        </p>
        <input type="submit" value="提交">
    </form>
    <script>
        console.log(window.location);
        // 省略window--
        // location对象是与URL相关的信息,归属于BOM
        console.log(location);
        // 返回来源的域
        // http://127.0.0.1:5500
        console.log(location.origin);
        // 主机名和端口号
        // 127.0.0.1:5500
        console.log(location.host);
        // 主机名
        console.log(location.hostname);
        // 端口号
        console.log(location.port);
        // 返回的URL路径名。
        console.log(location.pathname);
        // 返回协议
        console.log(location.protocol);
        // 返回锚后面内容(#后面的内容,包含#)
        // 务必熟练记忆
        console.log(location.hash);
        // 完整的URL地址
        console.log(location.href);
        // ?号后面的查询部分,包含?
        // ?username=momokotest&age=20
        console.log(location.search);
    </script>

02-location的href使用

<body>
    <script>
        console.log(location.href);
        location.href = 'http://www.baidu.com';
    </script>
</body>

03-location的searh的使用

<body>
    <!-- 默认get 地址栏会出现提交的参数 -->
    <form action="./04-跳转页面.html" method="get">
        <p>
            用户名:<input type="text" name="username">
        </p>
        <p>
            年龄:
            <input type="number" name="age" id="">
        </p>
        <p>
            昵称:
            <input type="text" name="secname" id="">
        </p>
        <input type="submit" value="提交">
    </form>
======================
跳转到的页面
 跳转到的页面
    <script>
        // ?号后面的查询部分,包含?
        // ?username=momokotest&age=20
        console.log(location.search);
        // 获取username=admin111&age=20
        var paramsURL = location.search.split('?')[1];
        // ['username=admin111', 'age=20']
        var tempArr = paramsURL.split("&");
        // 设定存储的对象
        var urlObj = {};
        // 循环获取每组数据
        for (var i = 0; i < tempArr.length; i++) {
            var paraArr = tempArr[i].split('=');
            // 设定到对象中
            // decodeURI()
            urlObj[paraArr[0]] = decodeURI(paraArr[1]);
        };
        console.log(urlObj);
    </script>

05-location对象的方法

    <button id="btn">location对象方法</button>
    <script>
        var btn = document.querySelector('#btn');
        btn.onclick = function() {
            // 加载新的文档。 跟href一样， 可以跳转页面
            // location.assign('http://www.baidu.com');
            // 用新的文档替换当前文档。替换当前页面，不记录历史，不可以后退
            // location.replace('http://www.baidu.com');
            // 重新加载当前文档。刷新页面
            location.reload();
        }
    </script>

06-N秒后跳转页面-点击跳转

<body>
    <button>点击跳转</button>
    <p></p>
    <script>
        // 获取元素
        var btn = document.querySelector('button');
        var pEle = document.querySelector('p');
        btn.onclick = function() {
            location.href = '07-N秒跳转后得页面.html';
        };
        var timer = 5;
        var interId = setInterval(function() {
            if (timer == 0) {
                clearInterval(interId);
                // location.href = '07-N秒跳转后得页面.html';
                // 自动调用
                btn.click();
            } else {
                pEle.innerHTML = '您将在' + timer + '秒后返回页面';
                timer--;
            }
        }, 1000);
    </script>
</body>
=========================
跳转后的页面
<body>
    欢迎回来
</body>

08-navigator对象


<body>
    <script>
        console.log(window.navigator);
        // navigator浏览器相关信息:
        // userAgent用户代理相关信息
        console.log(navigator.userAgent);
        if ((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i))) {
            alert(navigator.userAgent);
            window.location.href = 'http://www.baidu.com' //跳转到手机端的页面
        } else {
            alert(navigator.userAgent);
            window.location.href = "http://www.mi.com"; //跳转到pc端的页面
        }
    </script>
</body>

09-map

   <!--引用百度地图API-->
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=G8Gxt4FBpqCGOGXooqshyhQ4TsSPnYMw"></script>
    <style>
        .nav {
            width: 1200px;
            height: 300px;
            border: 1px solid #ccc;
        }
    </style>
</head>

<body>
    <!-- <div class="nav">联系我们</div> -->
    <!--百度地图容器-->
    <div style="width:1200px;height:300px;border:#ccc solid 1px;font-size:12px" id="map"></div>
</body>
<script type="text/javascript">
    //创建和初始化地图函数：
    function initMap() {
        createMap(); //创建地图
        setMapEvent(); //设置地图事件
        addMapControl(); //向地图添加控件
        addMapOverlay(); //向地图添加覆盖物
    }

    function createMap() {
        map = new BMap.Map("map");
        map.centerAndZoom(new BMap.Point(113.543025, 34.80297), 17);
    }

    function setMapEvent() {
        map.enableScrollWheelZoom();
        map.enableKeyboard();
        map.enableDragging();
        map.enableDoubleClickZoom()
    }

    function addClickHandler(target, window) {
        target.addEventListener("click", function() {
            target.openInfoWindow(window);
        });
    }

    function addMapOverlay() {
        var markers = [{
            content: "好谷",
            title: "好谷就业力",
            imageOffset: {
                width: 0,
                height: 3
            },
            position: {
                // 纬度
                lat: 34.804207,
                // 经度
                lng: 113.545792
            }
        }, ];
        for (var index = 0; index < markers.length; index++) {
            var point = new BMap.Point(markers[index].position.lng, markers[index].position.lat);
            var marker = new BMap.Marker(point, {
                icon: new BMap.Icon("http://api.map.baidu.com/lbsapi/createmap/images/icon.png", new BMap.Size(20, 25), {
                    imageOffset: new BMap.Size(markers[index].imageOffset.width, markers[index].imageOffset.height)
                })
            });
            var label = new BMap.Label(markers[index].title, {
                offset: new BMap.Size(25, 5)
            });
            var opts = {
                width: 200,
                title: markers[index].title,
                enableMessage: false
            };
            var infoWindow = new BMap.InfoWindow(markers[index].content, opts);
            marker.setLabel(label);
            addClickHandler(marker, infoWindow);
            map.addOverlay(marker);
        };
    }
    //向地图添加控件
    function addMapControl() {
        var scaleControl = new BMap.ScaleControl({
            anchor: BMAP_ANCHOR_BOTTOM_LEFT
        });
        scaleControl.setUnit(BMAP_UNIT_IMPERIAL);
        map.addControl(scaleControl);
        var navControl = new BMap.NavigationControl({
            anchor: BMAP_ANCHOR_TOP_LEFT,
            type: 0
        });
        map.addControl(navControl);
        var overviewControl = new BMap.OverviewMapControl({
            anchor: BMAP_ANCHOR_BOTTOM_RIGHT,
            isOpen: true
        });
        map.addControl(overviewControl);
    }
    var map;
    initMap();
</script>

10-嵌入地图

    <style>
        .nav {
            width: 1200px;
            height: 500px;
            background-color: #ccc;
        }
    </style>
</head>

<body>
    <div class="nav">联系我们</div>
    <!-- scrolling="no":不要滚动条
        frameborder="0":不要边框
    -->
    <iframe src="09-map.html" frameborder="0" width="1200" height="300" scrolling="no"></iframe>
</body>

11-应用地图方法

  <style type="text/css">
        body,
        html {
            width: 100%;
            height: 100%;
            margin: 0;
            font-family: "微软雅黑";
        }
        
        #container {
            width: 1200px;
            height: 300px;
        }
        
        #result {
            position: fixed;
            top: 10px;
            left: 20px;
            width: 300px;
            height: 40px;
            line-height: 40px;
            text-align: center;
            background: #fff;
            box-shadow: 0 2px 6px 0 rgba(27, 142, 236, 0.5);
            border-radius: 7px;
            z-index: 99;
        }
        /* 删除版权的信息 */
        /* 设定css样式 */
        
        .anchorBL {
            display: none;
        }
    </style>
    <script type="text/javascript" src="http://api.map.baidu.com/api?type=webgl&v=1.0&ak=G8Gxt4FBpqCGOGXooqshyhQ4TsSPnYMw"></script>
    <title>根据起点和终点经纬度驾车导航</title>
</head>

<body>
    <div id="container"></div>
    <div id='result'>导航路线请参照</div>
    <script>
        var map = new BMapGL.Map("container");
        map.centerAndZoom(new BMapGL.Point(113.543025, 34.80297), 17);

        var p1 = new BMapGL.Point(113.545792, 34.804207);
        var p2 = new BMapGL.Point(113.572123, 34.817318);

        var driving = new BMapGL.DrivingRoute(map, {
            renderOptions: {
                map: map,
                autoViewport: true
            }
        });
        driving.search(p1, p2);
    </script>
</body>

12-online属性

<body>
    <script>
        console.log(navigator.onLine);
        if (navigator.onLine) {
            console.log('此网络在线');
        } else {
            console.log('此网络不在线');
        };
        // HTML5 也给我们提供了2个事件  online  和 offline，给window绑定事件--检测网络开始状态
        window.ononline = function() {
            console.log('网络发生变化,已在线...');
        }
        window.onoffline = function() {
            console.log('网络发生变化,已下线...');
        };
    </script>
</body>

14-files对象-读取图片

<body>
    <input type="file" name="filevalue" id="fileEle">
    <img src="" alt="">
    <script>
        // 1.获取元素
        var fileEle = document.querySelector('#fileEle');
        var imgEle = document.querySelector('img');
        // 读取上传文件的内容
        // 图片
        // 2.绑定onchange事件
        fileEle.onchange = function() {
            // 伪数组
            // console.log(fileEle.files);
            // 3.创建FileReader读取文件的对象
            var reader = new FileReader();
            // 4.readAsDataURL方法读取图片
            reader.readAsDataURL(fileEle.files[0]);
            // 5.绑定onload事件监听读取成功后的结果
            reader.onload = function() {
                // reader.result 文件读取结果
                console.log(reader.result);
                // 6.将读取的结果进行相应的设置
                imgEle.src = reader.result;
            }

        };
    </script>
</body>

15-files对象-读取文本文件

<body>
    <input type="file" name="filevalue" id="fileEle">
    <div></div>
    <script>
        // 1.获取元素
        var fileEle = document.querySelector('#fileEle');
        var divEle = document.querySelector('div');
        // 读取上传文件的内容
        // 图片
        // 2.绑定onchange事件
        fileEle.onchange = function() {
            // 伪数组
            // console.log(fileEle.files);
            // 3.创建FileReader读取文件的对象
            var reader = new FileReader();
            // 4.readAsText:读取文本文件的方法
            reader.readAsText(fileEle.files[0]);
            // 5.绑定onload事件监听读取成功后的结果
            reader.onload = function() {
                // reader.result 文件读取结果
                console.log(reader.result);
                // 6.将读取的结果进行相应的设置
                divEle.innerHTML = reader.result;
            }

        };
    </script>
</body>

16-读取多文件

<body>
    <!-- multiple:多文件上传 -->
    <input type="file" name="filevalue" id="fileEle" multiple>
    <ul>
    </ul>
    <script>
        // 1.获取元素
        var fileEle = document.querySelector('#fileEle');
        var ulEle = document.querySelector('ul');
        // 读取上传文件的内容
        // 图片
        // 2.绑定onchange事件
        fileEle.onchange = function() {
            // 循环调用进行读取
            for (var i = 0; i < fileEle.files.length; i++) {
                readFileFun(fileEle.files[i]);
            };
        };

        function readFileFun(everyFile) {
            // 3.创建FileReader读取文件的对象
            var reader = new FileReader();
            // 4.readAsText:读取文本文件的方法
            reader.readAsText(everyFile);
            // 5.绑定onload事件监听读取成功后的结果
            reader.onload = function() {
                // 6.将读取的结果进行相应的设置
                // 创建li
                var li = document.createElement('li');
                li.innerHTML = reader.result;
                ulEle.appendChild(li);
            };
        }
    </script>
</body>