webgis入门之JavaScript（3）

已于 2024-03-02 12:56:09 修改
阅读量366 收藏 9
点赞数 9
分类专栏： webgis开发 文章标签： javascript 开发语言 ecmascript
于 2024-02-29 00:17:27 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_67679364/article/details/136359337
版权

   WEBGIS开发

01、input时间

<!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>
    <input type="text" name="" id="">
    <script>
        const input = document.querySelector('input')

        // 获取焦点
        input.onfocus = function(){
            input.style.borderBlockColor = 'blue'
        }

        // 失去焦点
        
        input.onblur = function(){
            input.style.borderBlockColor = 'red'
        }
    </script>
</body>
</html>

02、鼠标移入移出效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #app{
            width: 100px;
            height: 100px;
            background-color: blueviolet;
        }
    </style>
</head>
<body>
    <div id="app">app</div>
    <script>
        const app = document.querySelector('#app')
        app.onmouseover = function(){
            app.style.backgroundColor = 'red'
        }
        app.onmouseout =function(){
            app.style.backgroundColor = 'blue'
        }
    </script>
</body>
</html>

03、键盘事件key

<!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>
    <div id="app">
        <input type="text" name="" id="">
        <button onclick="getValue()">确定</button>
    </div>
    <script>
        const input = document.querySelector('input')
        const app = document.querySelector('#app')

        input.onkeydown = function (event) {
            if (event.keyCode == 13) {
                if (!input.value) {
                    alert('请填写信息')
                } else {
                    const p = document.createElement('p')
                    p.innerHTML = '<span>'+ input.value+'</span><button onclick="toDel(this)">删除</button>'
                    app.append(p)
                    input.value = ''
                }
            }            
        }
        function toDel(btn){
            // 获取button的父元素
            const parentElement = btn.parentElement
            // 删除父元素
            parentElement.remove()
        }
    </script>
</body>

</html>

04、间隔行效果

<!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>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
    <script>
        const divs = document.querySelectorAll('div')
        divs.forEach((item,index) => {
            item.style.background = index%2 ? 'blue':'red'
        });
    </script>
</body>
</html>

05、window对象

<!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>
    <script>
        // window是内置对象  不需要创建
        console.log(window)

        // docment也是属于window的一部分
        console.log(document = window.document)
        
        // alert也是window的一部分
        window.alert('111')

        // window可以省略
    </script>
</body>
</html>

06、window相关事件

<!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>
    <div style="height: 2000px;"></div>
    <script>
        // 网页窗口大小改变触发
        window.onresize = function(){
            console.log(1111)
        }

        // 页面滚动时出发
        window.onscroll = function(){
            console.log('滚动')
        }
    </script>
</body>
</html>

07、location

<!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="btnReload()">刷新</button>
    <script>
        console.log(location)

        consolo.log(window.location == location)

        function btnReload(){
            // 页面刷新
            // location.reload()

            // 页面跳转
            location.href = 'hppts://www.baidu.com'
        }
    </script>
</body>
</html>

08、定时器

<!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>
    <div></div>
    <script>
        // 定时器也是属于window属性

        // 间隔一定时间触发  并且只触发一次
        // setTimeout(()=>{
        //     console.log('hello')
        // },1000) // 第二个参数为时间

        const div = document.querySelector('div')
        // 间隔一段时间重复触发
        setInterval(() => {
            let d = new Date()
            div.innerHTML = d
        }, 1000);
    </script>
</body>
</html>

09、清除定时器

<!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="toClear()">删除</button>
    <script>
        // 用一个变量接收定时器返回的值
        const time1 = setTimeout(() => {
            console.log(1);
        }, 1000);

        const timer2 = setInterval(() => {
            console.log(2)
        }, 1000);
    
        function toClear() {
            // 清除定时器
            clearTimeout(time1);
            clearInterval(timer2)
        }
    </script>
</body>
</html>

10、倒计时跳转

<!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>
    <h1>请在5秒内点击此处，否则自动跳转</h1>
    <h2>5</h2>
    <script>
        // const time = setInterval(() => {
        //     const h1 = document.querySelector('h1')
        //     let str = h1.textContent
        //     let time = str[2]
        //     time -= 1
        //     if (time > 0) {
        //         h1.textContent = str.substr(0, 2) + time + str.substr(3)
        //     } else {
        //         clearInterval(timer)
        //         location.href = "https://www.baidu.com"
        //     }
        // }, 1000);
        const h2 = document.querySelector('h2')

        let timer
        function go(){
            timer = setTimeout(() => {
                if(h2.innerHTML>0){
                    h2.innerHTML--
                    go()
                }else{
                    console.log(1)
                    clearTimeout(timer)
                }
            }, 1000);
        }
        go()
    </script>
</body>

</html>

11、短信验证码

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

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

<body>
    <div>
        <input type="text" name="" id="">
        <button>发送验证短信</button>
    </div>

    <script>
        const btn = document.querySelector('button')
        // btn.onclick = function () {
        //     btn.disabled = true
        //     let time = 5
        //     const timer = setInterval(() => {
        //         console.log(time)
        //         if (time > 0) {
        //             time--
        //         } else {
        //             clearInterval(timer)
        //             btn.disabled = false
        //         }
        //     }, 1000);
        // }

        let num = 5
        btn.onclick = function () {
            let num = 5
            btn.disabled = true
            btn.innerHTML = 5
            function go() {
                timer = setTimeout(() => {
                    if (num > 0) {
                        num--
                        btn.innerHTML = num
                        go()
                    } else {
                        clearTimeout(timer)
                        btn.disabled = false
                    }
                }, 1000);
            }
        }

    </script>
</body>

</html>

12、轮播图

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        img {
            width: 80vw;
            height: 60vh;
            margin: 0 auto;
        }
    </style>
</head>

<body>
    <img src="./images/1.jpg" alt="">
    <script>
        let arr = ["./images/1.jpg", "./images/2.jpg", "./images/3.jpg"]
        const img = document.querySelector("img")
        let num = 0 
        setInterval(() => {
            num++
            if(num>arr.length-1){
                num=0
            }
            img.src = arr[num]
        }, 2000);
    </script>
</body>

</html>

13、jquery入门

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./jquery.min.js"></script>
</head>
<body>
    <div>你好</div>
    <script>
        // const div = document.querySelector('div') //之间

        // $是jquery别名  用起来方便  书写更简洁
        // console.log($('div'))
        $('div').hide() // 选中的是div元素  传入的还是css选择器

        // hide是jquery隐藏的元素的方法
    </script>
</body>
</html>

14、jquery事件

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./jquery.min.js"></script>
</head>

<body>
    <button>按钮</button>
    <script>
        $('button').click(() => {
            console.log('我被点击了')
        })
    </script>
</body>

</html>

15、jquery遍历

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./jquery.min.js"></script>
</head>
<body>
    <div>2</div>
    <div>2</div>
    <div>2</div>
    <div>2</div>
    <div>2</div>
    <div>2</div>
    <div>2</div>
    <div>2</div>
    <script>
        const arr = $('div')
        console.log(arr)

        for (let index = 0; index < arr.length; index++) {
            console.log(arr[index].innerHTML)            
        }

        arr.each((index,item)=>{
            console.log(index,item)
        })
    </script>
</body>
</html>

16、jquery操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./jquery.min.js"></script>
</head>
<body>
    <div id="d1"><span>11111111111111</span></div>
    <script>
        const d = $('#d1')
        console.log(d)

        // 获取div标签中的内容
        console.log(d.html())

        d.html('333333333333')

        // 原生js操作html元素  本质操作元素的属性

        // jquery操作html  是调用封装好的方法
    </script>
</body>
</html>

17、jquery操作属性

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./jquery.min.js"></script>
</head>

<body>
    <img src="../day2/img/on.gif" alt="">
    <script>
        $('img').click(() => {
            // attr 第一个参数告诉jquery修改那个属性     第二个参数为修改的值

            $('img').attr('src').includes('on')?
            $('img').attr('src', '../day2/img/off.gif'):$('img').attr('src', '../day2/img/on.gif')

            // if ($('img').attr('src').includes('on')) {
            //     $('img').attr('src', '../day2/img/off.gif')
            // } else {

            //     $('img').attr('src', '../day2/img/on.gif')
            // }
        })
    </script>
</body>

</html>

18、jquery操作样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="jquery.min.js"></script>
    <style>
        div{
            width: 100px;
            height: 100px;
            background-color: rebeccapurple;
        }
    </style>
</head>
<body>
    <div></div>
    <script>
        $('div').click(()=>{
            // 第一个参数css属性，第二个参数要更改的属性值
            $('div').css('background-color','blue')
        })
    </script>
</body>
</html>

19、jquery操作节点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="jquery.min.js"></script>
</head>
<body>
    <script>
        const hr = $('<hr>')    //只是创建了 数据在内存中
        const body = $('body')  //获取父元素对象
        body.append(hr) //将生成的hr添加到body

        body.append('<div>;aljf;ljas;klf<div/>')    //通过字符串添加标签
        hr.remove() //元素的删除
    </script>
</body>
</html>

20、数据请求

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="jquery.min.js"></script>
</head>

<body>
    <script>
        // $.ajax({
        //     type:'GET',
        //     url:'./data.json',
        //     success:function(data){
        //         console.log(data)
        //         data.user.forEach((item) => {
        //             console.log(item)
        //             // ``模板字符串 可以换行
        //             $('body').append(
        //                 `<div>
        //                 姓名：${item.name} 
        //                 年龄：${item.age}
        //                 id：${item.id}
        //                 </div>`)
        //         });
        //     }
        // })

        fetch('./data.json').then(res => res.json()).then(data => {
            data.user.forEach((item) => {
                console.log(item)
                // ``模板字符串 可以换行
                $('body').append(
                    `<div>
                        姓名：${item.name} 
                        年龄：${item.age}
                        id：${item.id}
                        </div>`)
            })
        })
    </script>
</body>

</html>

Coding小亿~
关注
专栏目录
js实现webgis
11-26
1、用JS实现和google地图一样的地图--拖动，移动，放大、缩小、还原 2、不需搭建gis服务器，不需第三方API支持。 3、地图的图片直接从百度地图中选择所需的比例，直接截图，然后PS拼接一下就OK了(示例为福州市地图)。 4、代码简单，容易套用，可以直接用于二次开发，实现地理位置信息的展示。 5、可在此基础上进行扩展，增加标注层，数据展示窗等。 6、功能简单，适用于简单的地理信息展示。 7、作者邮箱：258385583@qq.com, 转载请保留。
webgis入门之JavaScript（1）
weixin_67679364的博客
02-26 571
包括了JavaScript入门的基本语法和概念，以及一些实用的例子。从内嵌式和外联式的JavaScript开始，介绍了变量声明、输入输出、基础数据类型、强制转换、运算符、自增自减、比较符、逻辑符、赋值运算、二元运算符等基础知识。接着介绍了流程控制中的if、if-else、if-else-elif和switch语句，以及for循环的运用。最后涉及了函数的定义、参数、返回值以及如何利用函数判断闰年等实用例子。这些内容涵盖了JavaScript入门的基础知识和常见应用场景。
WebGIS 相关 Js组件
sinat_41838539的博客
02-10 273
1. Mapv Mapv 是一款地理信息可视化开源库，可以用来展示大量地理信息数据，点、线、面的数据，每种数据也有不同的展示类型，如直接打点、热力图、网格、聚合等方式展示数据。 当前是Mapv 2.0的预发布版本，当前api是不稳定的并有可能随时发生变化。 https://mapv.baidu.com/ https://github.com/huiyan-fe/mapv#readme ...
基于JS的WebGIS的开发
03-13
使用JS的Web端GIS的使用，参加比赛可以做为指导文件，也可以提供一些思路。
webGIS使用JS,高德API完成简单的智慧校园项目基础
IIIIIAN
12-02 679
【代码】webGIS使用JS,高德API完成简单的智慧校园项目基础。
WebGIS入门学习记录
u012563517的博客
10-27 420
本篇文章是学习记录，参考学习了网上大神们的博客，亦有一些转载，本文选择了基于ArcGIS Server的ArcGIS API for JavaScript开发 WebGIS入门阅读： https://blog.csdn.net/wsdhla/article/details/99624078 WebGIS平台及技术： ArcGIS server必须有高效的服务器作为支撑，同时可以实现很好的负载平衡，可实现所有Engine及一些高级GIS功能（如空间分析等） ① ArcGIS Desktop基础.
WebGis实践（1）
qq_28053189的博客
04-10 1052
简单使用Idea创建web项目最近学校的互联网软件开发开始进入上机实习阶段了，开发最难的莫过于开头，再此跟随着实习进度写下一些上机心得，既为自己加强记忆，也为和我一样对java web抱有畏惧的人一些共勉。1、关于idea的项目结构可以看到几个文件夹:（1）.idea（2）out（3）src（4）web这其中.idea、out文件夹都不要我们关心，这两个文件夹里的东西都是自动生成的其次src文件夹，
webgis入门之js（2）灯泡
02-29
总结起来，"webgis入门之js（2）灯泡"主要涵盖了JavaScript在WebGIS中的应用，包括使用JavaScript库创建和操作地图上的点状图层，以及控制图层的可见性。同时，"灯泡"的概念也可能涉及到地图的视觉元素设计，如图层...
webgis入门之html与css (练习2)
02-26
本文将深入探讨这两个关键技术，并结合"webgis入门之html与css (练习2)"这一主题，来理解它们在WebGIS中的应用。 HTML是用于创建网页结构的语言，它定义了网页的基本元素，如标题、段落、图像、链接等。在WebGIS中...
WebGIS从基础到开发实践（基于ArcGIS API For JavaScript）
12-28
本教程“WebGIS从基础到开发实践（基于ArcGIS API For JavaScript）”深入浅出地介绍了如何利用JavaScript进行WebGIS应用的开发，特别强调了Esri公司的ArcGIS API的应用。 ArcGIS API for JavaScript是Esri公司提供...
openlayer视频教程，基于javaScript的WebGis开发.pdf。2015_OpenLayers_3_入门教程详细版.docx.zip
07-31
这个压缩包包含的资源是关于OpenLayers的学习资料，特别是针对OpenLayers 3版本的详细入门教程。以下是关于OpenLayers、WebGIS以及JavaScript的相关知识点： 1. **OpenLayers**： - **基本概念**：OpenLayers是一...
【WebGIS系统古村古镇数字化平台源码】古村古镇数字化平台，作者热门文章[WebGIS入门、WebGIS期末作业等]的源码
07-17
WebGIS组成部分 可知：WebGIS由Web和GIS两部分组成，那么理论上在设置一个WebGIS系统框架时就线需从这两方面分别设计然后进行拼接合并。实际上思维大致相同，但时在设计GIS部分也需以Web部分为基础进行设计。Web部分...
WebGIS学习（html、css、javascript）
xdkSilence的博客
01-15 1269
超文本标记语言（HyperText Markup Language），用于创建网页的标准标记语言。层叠样式表（Cascading Style Sheets）
webgis入门之JavaScript（2）
weixin_67679364的博客
02-29 358
介绍了WEBGIS开发中的面向对象编程基础，包括类的定义、属性与行为的定义，以及对象的创建方式。进一步介绍了JavaScript中的内置对象，如Math和Date，以及数组和字符串的操作方法。此外，还介绍了ES6的const关键字和DOM操作中的节点增删改查，以及事件绑定。最后，给出了一个灯泡切换的示例并介绍了内联事件的使用。
【完整的WebGIS教程】2、第一个基于vue的webgis项目
热门推荐
老靳的WebGIS
04-20 1万+
利用vue-cli创建你的第一个WebGIS项目
【WebGIS】一、基于VUE来构建一个WebGIS项目
xiaobai_1900的博客
09-16 3193
基于VUE构建一个WebGIS项目
WebGIS学习资源推荐（包含学习路线、软件和数据资源推荐）
X北辰北的博客
01-20 6252
写在前面 很多人对于WebGIS不是很熟悉，尤其是刚接触WebGIS的开发人员来说，感觉这东西漫无边际，不知道如何下手，所以本篇文章就结合自己的开发和学习经验，给大家推荐一下学习路线和相关的学习资源。 首先直接上一张学习路线图，图中绿标的知识必须要掌握。 学习资源推荐 1、Web开发方面 1.1、Web开发基础知识学习资源 Web开发基础知识无非就是前端三剑客：HTML、CSS、JavaScript。对于这三块知识学习的话，其实重点和难点还是在CSS和JS这两块，以下是一些推荐的学习网站和资
WebGIS的认识及学习路线推荐！
damadashen的博客
07-21 6660
WebGIS的认识及学习路线推荐。
js中【Worker】相关知识点详细解读
最新发布
2301_79858914的博客
09-11 862
JavaScript 中的 Worker 是一个可以在后台线程中运行代码的 API，这样可以避免主线程（通常是 UI 线程）被阻塞。使用 Worker 时，JavaScript 可以在多线程环境中工作，解决了单线程的瓶颈问题。通常情况下，JavaScript 是单线程的，也就是所有的代码（包括 DOM 操作和事件处理等）都在同一个线程里执行。如果某段代码需要大量计算，或者运行时间过长，会阻塞整个页面，导致界面卡顿甚至崩溃。Worker提供了一种将复杂或耗时的任务分配到后台线程执行的方法。
WebGIS入门：概念、特征与优势
WebGIS的特征之一是其广泛的访问范围。由于依赖于互联网，用户不再受限于地理位置，可以访问并操作全球各地的服务器上的地理数据。这对于数据管理和分布式数据源的整合提供了极大的便利，使得实时更新和共享信息成为...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值