Day10-HTML5 CSS3

最新推荐文章于 2024-07-23 16:10:02 发布

前端拓海

最新推荐文章于 2024-07-23 16:10:02 发布

阅读量25

点赞数

文章标签： html5 css3 前端

本文链接：https://blog.csdn.net/Spirs/article/details/134753394

版权

一.svg

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #can {
            border: 1px solid red;
        }
    </style>
</head>

<body>

    <img src="../img/食物.svg" alt="">
    <img src="../img/面性秃顶男.svg" alt="">
    <canvas width="600" height="600" id="can"></canvas>

    <script>

        var mycan = can.getContext("2d");

        mycan.rect(100, 100, 400, 200)
        mycan.stroke();

        // 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))) {
        //     window.location.href = "./01-svg.html?id=1";     //跳转到手机端的页面
        // } else {
        //     window.location.href = "./05-Navigator对象.html";     //跳转到pc端的页面
        // }

        // switch (key) {
        //     case value:
                
        //         break;
        
        //     default:
        //         break;
        // }

    </script>

</body>

</html>

二.location

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        h1 {
            margin-top: 2000px;
        }
    </style>
</head>

<body>

    <a href="./09-History对象.html">点击跳转到09</a>
    <a href="#happy">点击进行锚点定位</a>
    <h1 id="happy">七夕快乐</h1>

    <script>

        // http 协议
        console.log(window.location);
        // 一个完整的url都包含什么
        // 协议+域名+端口号+虚拟目录+文件名+?参数+#锚链接
        // http://127.0.0.1:5500/04-H5-C3/07h5c3/01-location.html?id=1&gender=男#like

        // origin
        // 返回页面来源的域(当前协议 + 主机名+端口号)
        console.log(location.origin);
        // file:// 文件协议 没有域名

        // host返回一个URL的主机名和端口
        console.log(location.host);

        // hostname返回URL的主机名
        console.log(location.hostname);

        // port返回一个URL服务器使用的端口号
        console.log(location.port);

        // pathname返回的URL路径名。
        console.log(location.pathname);

        // protocol返回一个URL协议
        console.log(location.protocol);

        // href返回完整的URL
        console.log(location.href);
        // http://127.0.0.1:5500/%E7%81%AB%E8%8A%B1238/%E8%AF%BE%E7%A8%8B/04-HTML5-CSS3/07-html5-css3/code/02-location.html


        // hash返回从井号 (#) 开始的 URL（锚）
        console.log(location.hash);

    </script>

</body>

</html>

三.search

<body>

    <form action="">
        <div>
            日期 : <input type="date" name="date">
        </div>
        <div>
            用户名 ： <input type="text" name="username">
        </div>
        <div>
            密码： <input type="password" name="userpwd">
        </div>
        <div>
            邮箱： <input type="email" name="email">
        </div>
        <div>
            手机号：<input type="tel" name="tel">
        </div>
        <div>
            <input type="submit">
        </div>
    </form>

    <button id="btn">点击跳转到01并携带参数</button>

    <script>

        // 返回一个完整的url
        console.log(location.href);
        // search返回从问号 (?) 开始的 URL（查询部分）
        console.log(location.search);
        var arr = location.search.split("?")[1].split("&");
        console.log(arr);
        var obj = {};

        for (var i = 0; i < arr.length; i++) { 
           console.log( arr[i].split("="));;
           obj[arr[i].split('=')[0]] = arr[i].split('=')[1]
        }
        console.log(obj);
        var _id = Math.floor(Math.random()*10);

        btn.onclick = function(){
            location.href = "./01-svg.html?id="+_id;
        }

    </script>

</body>

</html>

四.location的方法

<body>

    <button class="btn1"> assign</button>
    <button class="btn2"> replace</button>
    <button class="btn3"> reload</button>

    <script>

        // assign()加载新的文档。跟href一样，可以跳转页面
        // replace()用新的文档替换当前文档。替换当前页面，不记录历史，不可以后退
        // reload()重新加载当前文档。
        var btn1 = document.querySelector(".btn1");
        var btn2 = document.querySelector(".btn2");
        var btn3 = document.querySelector(".btn3");


        btn1.onclick = function () {
            // location.assign('./01-svg.html');
            location.assign("http://www.4399.com")
        }

        btn2.onclick = function () {
            // 不记录历史，不可以后退
            // location.replace('./01-svg.html');
            location.replace('http://www.7k7k.com');
        }

        btn3.onclick = function(){
            // 刷新页面
            location.reload();
        }

    </script>

</body>

</html>

五.Navigator对象

<body>

    <script>

        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))) {
            window.location.href = "./01-svg.html?id=1";     //跳转到手机端的页面
        } else {
            // window.location.href = "./05-search.html?id=1";     //跳转到pc端的页面
        }

    </script>

</body>

</html>

六.map

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="keywords" content="百度地图,百度地图API，百度地图自定义工具，百度地图所见即所得工具" />
    <meta name="description" content="百度地图API自定义地图，帮助用户在可视化操作下生成百度地图" />
    <title>百度地图API自定义地图</title>
    <!--引用百度地图API-->
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=1qjYwQqblNWq8mX9vhlFVR0gZXG38Y3i"></script>
    <style>
        *{
            margin: 0px;
            padding: 0px;
        }
    </style>
</head>

<body>

    <!-- <img src="https://filesys.53kf.com/storage/talk/72664371/11199421/pxiRSC_1652359253_2022-05-12.png" alt=""> -->
    <!--百度地图容器-->
    <div style="width:1200px;height:550px;border:#ccc solid 1px;font-size:12px; box-sizing: border-box;" 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.544611, 34.804743), 19);
    }
    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: "now position", title: "好谷", imageOffset: {width:-115,height:-21}, position: { lat: 34.804802, lng: 113.544324 } }
        ];
        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, {
                // http://api.map.baidu.com/lbsapi/createmap/images/icon.png
                // https://filesys.53kf.com/storage/talk/72664371/11199421/pxiRSC_1652359253_2022-05-12.png
                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);

            marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
            // marker.setOffset(new BMap.Size(0, 0));
        };
        var labels = [
        ];
        for (var index = 0; index < labels.length; index++) {
            var opt = { position: new BMap.Point(labels[index].position.lng, labels[index].position.lat) };
            var label = new BMap.Label(labels[index].content, opt);
            map.addOverlay(label);
        };
        var plOpts = [
        ];
        var plPath = [
        ];
        for (var index = 0; index < plOpts.length; index++) {
            var polyline = new BMap.Polyline(plPath[index], plOpts[index]);
            map.addOverlay(polyline);
        }
    }
    //向地图添加控件
    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: BMAP_NAVIGATION_CONTROL_LARGE });
        map.addControl(navControl);
        var overviewControl = new BMap.OverviewMapControl({ anchor: BMAP_ANCHOR_BOTTOM_RIGHT, isOpen: true });
        map.addControl(overviewControl);
    }
    var map;
    initMap();

</script>

</html>

七.index

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0px;
            padding: 0px;
        }

        header {
            width: 100%;
            height: 100px;
            background-color: black;
        }

        .banner {
            width: 1200px;
            height: 550px;
            margin: 100px auto;
            background-color: pink;
        }

        main {
            width: 1200px;
            height: 3000px;
            background-color: skyblue;
            margin: 0 auto 100px;
        }

        .map {
            width: 1200px;
            height: 600px;
            margin: 0 auto 100px;
        }

        footer {
            width: 100%;
            height: 400px;
            background-color: purple;
        }
    </style>
</head>

<body>

    <header></header>
    <div class="banner"></div>
    <main></main>
    <div class="map">
        <iframe src="./06-map.html" frameborder="0" width="100%" height="600px"></iframe>
    </div>
    <footer></footer>

</body>

</html>

八.online

<body>

    <script>

        // 判断用户设备是否处于脱机状态（没网）
        // navigator.onLine
        console.log(navigator.onLine);
        if (navigator.onLine) {
            console.log("网络状态处于正常");
        } else {
            console.log("世界上最遥远的距离就是没网");
        }

        // 当前设备网络状态正常
        window.ononline = function () {
            console.log('你的浏览器在线工作');
        };

        // 当前设备处于没网状态
        window.onoffline = function () {
            console.log('你的浏览器离线工作');
        }

    </script>

</body>

</html>

九.History对象

<body>

    <button class="back">back</button>
    <button class="forward">forward</button>
    <button class="go">go</button>
    <button class="pushState">pushState</button>
    <button class="replaceState">replaceState</button>
    <a href="http://www.4399.com">点击跳转</a>

    <script>

        // 历史 包含了用户在浏览当中访问过的 记录
        console.log(window.history);
        // 返回浏览器历史列表中的 URL 数量。
        console.log(history.length);
        // 返回浏览器在当前 URL 下的状态信息，如果没有调用过 pushState() 或 replaceState() 方法，则返回默认值 null。
        console.log(history.state);

        var back = document.querySelector(".back");
        var forward = document.querySelector(".forward");
        var go = document.querySelector(".go");
        var pushState = document.querySelector(".pushState");
        var replaceState = document.querySelector(".replaceState");

        back.onclick = function () {
            // 返回历史列表当中的上一个访问记录
            // 跳转页面
            history.back();
        }

        forward.onclick = function () {
            // 加载历史列表当中的下一个
            history.forward();
        }

        // 加载 history 列表中的某个具体页面。其中go()参数为正值前进,参数为负值后退,为0刷新页面
        go.onclick = function () {
            // 刷新页面
            // history.go(0)
            // 前进
            // history.go(1)
            // 后退
            history.go(-1);
        }

        // 用于在当前历史记录当中添加一个记录
        // history.pushState();
        // 用来修改 History 对象的当前记录，其他都与pushState()方法一模一样。
        // history.replaceState();

        // ctrl + shift + T 恢复之前关闭的标签页

        // try
        // 把你觉得可能会报错的代码放在try里面
        // catch里面会给你返回错误的结果
        try {
            console.log(a);
        } catch (error) {
            console.log(error);
        }


        console.log(1 + 2);

    </script>

</body>

</html>

十.读取文本

<body>

    <input type="file" class="files" multiple>

    <ul class="list">
        <!-- <li></li> -->
    </ul>

    <script>

        var elefiles = document.querySelector(".files");
        var list = document.querySelector(".list");


        elefiles.onchange = function () {
            // 1.获取当前上传的文件
            console.log(this.files);
            // 2.创建FileReader对象
            var reader = new FileReader;

            for (var i = 0; i < this.files.length; i++) {
                readerEveryFile(this.files[i], list);
            }
        }
        // everyfile 每次调用函数都必须传进一个文件
        // ele 元素
        function readerEveryFile(everyfile, ele) {
            var reader = new FileReader;

            // 一次只能读一个
            reader.readAsText(everyfile);

            reader.onload = function () {
                var li = document.createElement("li");
                li.innerText = reader.result;
                ele.appendChild(li);
            }
        }
        // reader.readAsText()

    </script>

</body>

</html>

十一.读取文件

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .img {
            display: none;
            width: 80px;
            height: 80px;
        }
    </style>
</head>

<body>

    <img src="">
    <img src="C:\Users\zhang\Pictures\Saved Pictures\1c419d8f6f574fc593dde3ec33352dd9_th.png" alt="">
    <input type="file" class="files" multiple>
    <img src="" alt="" class="img">

    <script>

        var elefiles = document.querySelector(".files");
        var _img = document.querySelector(".img");


        elefiles.onchange = function () {
            console.log(this.value);
            // FileList
            console.log(this.files[0]);
            console.log(this.files);
            // 创建实例化对象
            var reader = new FileReader();
            console.log(reader);
            // reader.readAsDataURL()：DataURL形式读取文件
            // console.log();
            reader.readAsDataURL(this.files[0])

            // 当文件读取完成时进行显示图片结果
            reader.onload = function () {
                console.log(reader.result);
                console.log(123);
                _img.style.display = "block";
                _img.src = reader.result;
            }
        }

        // 1.给文件控件input 添加事件监听 监听内容的改变
        // 2.创建文件读取的 对象 new FileReader();
        // 3.使用readAsDataURL读取用户上传的this.files[0]
        // 4.当读取完成之后 _img.src = reader.result; 完成缩略图展示

    </script>

</body>

</html>