Cesium事件处理

文章目录

  • 0.引言
  • 1.鼠标事件
    • 1.1鼠标左键事件
    • 1.2鼠标右键事件
    • 1.3鼠标移动事件
    • 1.4鼠标滚轮事件
  • 2.键盘事件
  • 3.相机事件
  • 4.场景渲染事件

0.引言

无论是二维GIS应用系统还是三维GIS应用系统，都离不开各种事件的应用，特别是鼠标左键单击事件、鼠标左键双击事件等。根据事件的类型、用途，Cesium将事件大致分成了三大类，即屏幕空间事件处理程序（Screen Space Event Handler）、屏幕空间相机控制器（Screen Space Camera Controller）和场景渲染事件。

1.鼠标事件

1.1鼠标左键事件

Cesium的鼠标左键事件包括鼠标左键按下、弹起、单击及双击事件。我们可以在这些事件中添加自定义函数，以便用户在输入时执行某些操作。在使用鼠标左键事件前，我们需要先通过ScreenSpaceEventHandler类进行实例化，然后注册或删除相应的事件。
（1）关键代码
  在这里插入图片描述

3_1.1_鼠标左键事件.html

<!DOCTYPE html>
<html lang="en">  
  
<head>  
    <meta charset="UTF-8">  
    <meta http-equiv="X-UA-Compatible" content="IE=edge">  
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  
    <title>鼠标事件_左键事件</title>  
    <script src="./Build/Cesium/Cesium.js"></script>  
    <link rel="stylesheet" href="./Build/Cesium/Widgets/widgets.css">  
    <style>  
        html,  
        body,  
        #cesiumContainer {  
            width: 100%;  
            height: 100%;  
            margin: 0;  
            padding: 0;  
            overflow: hidden;  
        }  
    </style>  
</head>  
  
<body>  
    <div id="cesiumContainer">  
    </div>  
  
    <script>  
        Cesium.Ion.defaultAccessToken = '你的token';  
        var viewer = new Cesium.Viewer("cesiumContainer", {  
            geocoder: true,  //是否显示地名查找工具  
            homeButton: true,    //是否显示首页位置工具  
            sceneModePicker: true,   //是否显示视角模式切换工具  
            baseLayerPicker: true,   //是否显示默认图层选择工具  
            navigationHelpButton: true,  //是否显示导航帮助工具  
            animation: true, //是否显示动画工具  
            timeline: true,  //是否显示时间轴工具  
            fullscreenButton: true,  //是否显示全屏按钮工具  
        });  
  
        var handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);  
        handler.setInputAction(function (event) {  
            console.log('左键按下：', event.position);//左键按下时响应  
        }, Cesium.ScreenSpaceEventType.LEFT_DOWN);  
        handler.setInputAction(function (event) {  
            console.log('左键弹起：', event.position);//左键弹起时响应  
        }, Cesium.ScreenSpaceEventType.LEFT_UP);  
        handler.setInputAction(function (event) {  
            console.log('左键点击：', event.position);//左键按下和弹起记作一次点击，点击后响应  
        }, Cesium.ScreenSpaceEventType.LEFT_CLICK);  
        handler.setInputAction(function (event) {  
            console.log('左键双击：', event.position);//左键双击后响应  
        }, Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK);  
        // 移除屏幕空间事件  
        //handler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_DOWN);  
    </script>  
</body>  
  
</html>

（2）加载效果
运行代码后出现网页地球，按F12，调出控制台，在地球体上任意位置左键双击，双击结果如下图右侧控制台响应消息。
  在这里插入图片描述

1.2鼠标右键事件

Cesium的鼠标右键事件包括鼠标右键按下、弹起及单击事件。我们可以在这些事件中添加自定义函数，以便用户在输入时执行某些操作。在使用鼠标右键事件前，我们需要先通过ScreenSpaceEventHandler类进行实例化，然后注册或删除相应的事件。
（1）关键代码
  在这里插入图片描述

3_1.2_鼠标右键事件.html

Cesium.Ion.defaultAccessToken = '你的token';
var viewer = new Cesium.Viewer("cesiumContainer", {  
    geocoder: true,  //是否显示地名查找工具  
    homeButton: true,    //是否显示首页位置工具  
    sceneModePicker: true,   //是否显示视角模式切换工具  
    baseLayerPicker: true,   //是否显示默认图层选择工具  
    navigationHelpButton: true,  //是否显示导航帮助工具  
    animation: true, //是否显示动画工具  
    timeline: true,  //是否显示时间轴工具  
    fullscreenButton: true,  //是否显示全屏按钮工具  
});  
  
let handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);  
handler.setInputAction(function (event) {  
    console.log('右键按下：', event.position);//右键按下时响应  
}, Cesium.ScreenSpaceEventType.RIGHT_DOWN);  
handler.setInputAction(function (event) {  
    console.log('右键弹起：', event.position);//右键弹起时响应  
}, Cesium.ScreenSpaceEventType.RIGHT_UP);  
handler.setInputAction(function (event) {  
    console.log('右键点击：', event.position);//右键按下和弹起记作一次点击，点击后响应  
}, Cesium.ScreenSpaceEventType.RIGHT_CLICK);  
// 移除屏幕空间事件  
//handler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK, Cesium.KeyboardEventModifier.SHIFT);

其他代码参见1.1

（2）加载效果
运行代码后出现网页地球，按F12，调出控制台，在地球体上任意位置右击，右键单击结果如下图右侧控制台响应消息。
  在这里插入图片描述

1.3鼠标移动事件

首先实例化一个ScreenSpaceEventHandler对象，然后注册鼠标移动事件MOUSE_MOVE，并通过setInputAction设置要在鼠标移动事件上执行的功能。例如，在鼠标移动事件上打印“鼠标正在移动”这句话，则只要鼠标移动，控制台就会不断打印这句话。
（1）关键代码
  在这里插入图片描述

Cesium.Ion.defaultAccessToken = '你的token';
var viewer = new Cesium.Viewer("cesiumContainer", {  
    animation: false, //是否显示动画工具  
    timeline: false,  //是否显示时间轴工具  
    fullscreenButton: false,  //是否显示全屏按钮工具  
});  
  
var handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);  
handler.setInputAction(function (event) {  
    console.log('鼠标正在移动');  
}, Cesium.ScreenSpaceEventType.MOUSE_MOVE);  
// 移除屏幕空间事件  
//handler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK, Cesium.KeyboardEventModifier.SHIFT);

其他代码参见1.1

（2）加载效果
运行代码后出现网页地球，按F12，调出控制台，在地球体上移动鼠标，移动结果如下图右侧控制台响应消息。
  在这里插入图片描述

1.4鼠标滚轮事件

Cesium的鼠标滚轮事件包括鼠标滚轮按下、弹起、单击及滚动事件。我们可以在这些事件中添加自定义函数，以便用户在输入时执行某些操作。在使用鼠标滚轮事件前，我们需要先通过ScreenSpaceEventHandler类进行实例化，然后注册或删除相应的事件。
（1）关键代码
  在这里插入图片描述

Cesium.Ion.defaultAccessToken = '你的token';
var viewer = new Cesium.Viewer("cesiumContainer", {  
    geocoder: true,  //是否显示地名查找工具  
    homeButton: true,    //是否显示首页位置工具  
    sceneModePicker: true,   //是否显示视角模式切换工具  
    baseLayerPicker: true,   //是否显示默认图层选择工具  
    navigationHelpButton: true,  //是否显示导航帮助工具  
    animation: true, //是否显示动画工具  
    timeline: true,  //是否显示时间轴工具  
    fullscreenButton: true,  //是否显示全屏按钮工具  
});  
  
let handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);  
handler.setInputAction(function (event) {  
    console.log('中键按下：', event.position);  
}, Cesium.ScreenSpaceEventType.MIDDLE_DOWN);  
handler.setInputAction(function (event) {  
    console.log('中键弹起：', event.position);  
}, Cesium.ScreenSpaceEventType.MIDDLE_UP);  
handler.setInputAction(function (event) {  
    console.log('中键点击：', event.position);  
}, Cesium.ScreenSpaceEventType.MIDDLE_CLICK);  
handler.setInputAction(function (event) {  
    console.log('鼠标滚轮正在滚动', event.position);  
}, Cesium.ScreenSpaceEventType.WHEEL);  
// 移除屏幕空间事件  
//handler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK, Cesium.KeyboardEventModifier.SHIFT);

其他代码参见1.1

（2）加载效果
运行代码后出现网页地球，按F12，调出控制台，在地球体上任意位置单击一次滚轮并滚动滚轮，结果如下图右侧控制台响应消息。
  在这里插入图片描述

2.键盘事件

键盘事件也属于屏幕空间事件处理程序中的一种，但是它们不能单独使用，而是需要配合鼠标事件一起使用，如鼠标左键+Shift键、鼠标右键+Alt键等。
在Cesium中，键盘事件主要包括Shift键被按住、Ctrl键被按住及Alt键被按住3种类型。
（1）关键代码
  在这里插入图片描述

Cesium.Ion.defaultAccessToken = '你的token';
var viewer = new Cesium.Viewer("cesiumContainer", {  
    animation: false, //是否显示动画工具  
    timeline: false,  //是否显示时间轴工具  
    fullscreenButton: false,  //是否显示全屏按钮工具  
});  
  
var handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);  
handler.setInputAction(function (event) {  
    console.log('SHIFT+鼠标左键点击：', event.position);  
}, Cesium.ScreenSpaceEventType.LEFT_CLICK,Cesium.KeyboardEventModifier.SHIFT);  
handler.setInputAction(function (event) {  
    console.log('CTRL+鼠标左键点击：', event.position);  
}, Cesium.ScreenSpaceEventType.LEFT_CLICK,Cesium.KeyboardEventModifier.CTRL);  
handler.setInputAction(function (event) {  
    console.log('ALT+鼠标左键点击：', event.position);  
}, Cesium.ScreenSpaceEventType.LEFT_CLICK,Cesium.KeyboardEventModifier.ALT);  
// 移除屏幕空间事件  
//handler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK, Cesium.KeyboardEventModifier.SHIFT);

其他代码参见1.1

（2）加载效果
运行代码后出现网页地球，按F12，调出控制台，在地球体上分别按SHIFT+左击、CTRL+左击和ALT+左击，结果如下图右侧控制台响应消息。
  在这里插入图片描述

3.相机事件

根据画布上的鼠标移动或键盘输入修改摄像机的位置和方向，可被理解为我们常说的相机事件，它是与屏幕空间相机控制器相关的事件处理程序。
相机事件与之前所说的鼠标事件、键盘事件不同，它不需要先实例化，而是在Viewer类的实例化过程中就将实例化结果赋给了viewer.scene.screenSpaceCameraController，所以，我们直接操作viewer.scene.screenSpaceCameraController即可。
（1）关键代码
  在这里插入图片描述

3_3_相机事件.html

Cesium.Ion.defaultAccessToken = '你的token';
var viewer = new Cesium.Viewer("cesiumContainer", {  
    geocoder: true,  //是否显示地名查找工具  
    homeButton: true,    //是否显示首页位置工具  
    sceneModePicker: true,   //是否显示视角模式切换工具  
    baseLayerPicker: true,   //是否显示默认图层选择工具  
    navigationHelpButton: true,  //是否显示导航帮助工具  
    animation: true, //是否显示动画工具  
    timeline: true,  //是否显示时间轴工具  
    fullscreenButton: true,  //是否显示全屏按钮工具  
});  
  
//修改鼠标右键为相机旋转  
viewer.scene.screenSpaceCameraController.tiltEventTypes = [  
    Cesium.CameraEventType.RIGHT_DRAG,//添加右键  
];  
//修改鼠标中键为相机缩放  
viewer.scene.screenSpaceCameraController.zoomEventTypes = [  
    Cesium.CameraEventType.MIDDLE_DRAG,//添加中键  
    Cesium.CameraEventType.WHEEL,//可添加其他事件，如滚轮等  
];

其他代码参见1.1

（2）加载效果
运行代码后出现网页地球，在地球上测试鼠标右键和鼠标中键操作相机情况。
  在这里插入图片描述

4.场景渲染事件

场景渲染事件是Cesium中十分重要的事件，特别是当我们需要实时监听场景渲染时，这几个事件是必不可少的。例如，我们要实时监听标签位置或者实时动态更新实体坐标时，就需要在场景渲染事件中进行回调。
Cesium的场景渲染事件主要包括4种，preUpdate、postUpdate、preRender、postRender。
（1）关键代码
  在这里插入图片描述

Cesium.Ion.defaultAccessToken = '你的token';
var viewer = new Cesium.Viewer("cesiumContainer", {  
    geocoder: true,  //是否显示地名查找工具  
    homeButton: true,    //是否显示首页位置工具  
    sceneModePicker: true,   //是否显示视角模式切换工具  
    baseLayerPicker: true,   //是否显示默认图层选择工具  
    navigationHelpButton: true,  //是否显示导航帮助工具  
    animation: true, //是否显示动画工具  
    timeline: true,  //是否显示时间轴工具  
    fullscreenButton: true,  //是否显示全屏按钮工具  
});  
  
// 需要回调的函数   
function callbackFunc(event) {  
    console.log("注册更新之前执行了回调函数");  
}  
// 注册更新之前执行回调函数  
viewer.scene.preUpdate.addEventListener(callbackFunc);  
// 需要回调的函数   
function callbackFun(event) {  
    console.log("注册更新之后执行了回调函数");  
}  
// 注册更新之后执行回调函数  
viewer.scene.postUpdate.addEventListener(callbackFun);  
// 需要回调的函数   
function callbackFun(event) {  
    console.log("注册渲染之前执行了回调函数");  
}  
// 注册渲染之前执行回调函数  
viewer.scene.preRender.addEventListener(callbackFun);  
// 需要回调的函数   
function callbackFun(event) {  
    console.log("注册渲染之后执行了回调函数");  
}  
// 注册渲染之后执行回调函数  
viewer.scene.postRender.addEventListener(callbackFun);  
// 注销之前所注册的回调函数  
//viewer.scene.preUpdate.removeEventListener (callbackFunc);

其他代码参见1.1

（2）加载效果
运行代码后出现网页地球，按F12，调出控制台，下图右侧控制台刷新场景渲染事件。
  在这里插入图片描述

[1] 郭明强. 《WebGIS之Cesium三维软件开发》; 2023-04-01 [accessed 2024-01-26].
[2] GISer小辉. Cesium 事件详解（鼠标事件、相机事件、键盘事件、场景触发事件）; 2023-01-01 [accessed 2024-01-26].
[3] Codifier. Cesium 更改默认的鼠标操作; 2019-10-09 [accessed 2024-01-26].
[4] 锦岁. cesium教程（二）：Viewer、Scene、影像、地形、坐标、相机、追踪、交互; 2022-01-27 [accessed 2024-01-26].

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/349613.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

python-自动化篇-运维-监控-简单实例-道出如何使⽤Python进⾏系统监控？

python-自动化篇-运维-监控-简单实例-道出如何使⽤Python进⾏系统监控？

如何使⽤Python进⾏系统监控&#xff1f; 使⽤Python进⾏系统监控涉及以下⼀般步骤&#xff1a; 选择监控指标&#xff1a; ⾸先&#xff0c;确定希望监控的系统指标&#xff0c;这可以包括 CPU 利⽤率、内存使⽤情况、磁盘空间、⽹络流量、服务可⽤性等。选择监控⼯具&#x…
阅读更多...
Spirngboot3+Vue3-0125

Spirngboot3+Vue3-0125

Spirngboot3Vue3-0125 扫描配置文件 Value ConfigurationProperties(prefix "email") 扫描bean ComponentScan bean注册 -三方的bean Bean注册bean Bean("自定义名称") Import 设置bean注册的条件 Conditional -自己的bean Repository Service Controlle…
阅读更多...
全桥变压器计算2

全桥变压器计算2

1 根据输入最高电压与磁通密度计算出来原边的圈数 2 根据输入输入电压计算出来原副边圈数 3 输入功率计算 4 根据输入功率计算DC输出的平均值，有效值，峰值电流 5根据副边电感感量，然后写出励磁电感的表达式 6 根据写出理想变压器原边绕组电流表达式<
阅读更多...
中级ccnp多久可以考下来？ccnp 课件哪里有？

中级ccnp多久可以考下来？ccnp 课件哪里有？

思科中级CCNP考试要求考生具备一定的网络基础知识&#xff0c;包括IP地址规划、VLAN配置、STP协议等。然而&#xff0c;对于许多初学者来说&#xff0c;中级CCNP考试的难度和门槛都是一个不小的挑战。那么&#xff0c;究竟需要多久才能考下中级CCNP证书呢?下面将为你详细解读。…
阅读更多...
CodeGPT

CodeGPT

GitCode - 开发者的代码家园 gitcode.com/ inscode.csdn.net/liujiaping/java_1706242128563/edit?openFileMain.java&editTypelite marketplace.visualstudio.com/items?itemNameCSDN.csdn-codegpt&spm1018.2226.3001.9836&extra%5Butm_source%5Dvip_chatgpt_c…
阅读更多...
SIP UPDATE method

SIP UPDATE method

UPDATE 在RFC3311中定义。 UPDATE 允许客户端更新session的参数&#xff0c;例如媒体流集及其codec&#xff0c;但对dialog的状态没有影响。从这个意义上说&#xff0c;它就像re-INVITE&#xff0c;但与re-INVITE不同&#xff0c;因为UPDATE是在intial INVITE完成之前发送(MT发…
阅读更多...
锂电池升6V输出3A芯片。2.7v-5.5v输入，输出6v给马达供电

锂电池升6V输出3A芯片。2.7v-5.5v输入，输出6v给马达供电

锂电池升压输出芯片是一种常见的电子元件&#xff0c;广泛应用于各种电子设备中。本文将介绍一款锂电池升压输出芯片&#xff0c;AH8681可以将2.7V-5.5V的输入电压升压至6V&#xff0c;电流可达3A&#xff0c;内置MOS管。 该锂电池升压输出芯片具有以下特点&#xff1a; 1. 输…
阅读更多...
代理模式-C#实现

代理模式-C#实现

该实例基于WPF实现&#xff0c;直接上代码&#xff0c;下面为三层架构的代码。 目录 一 Model 二 View 三 ViewModel 一 Model using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.Threading.Tasks;namespace 设计模式练…
阅读更多...
技术必备：推荐一款超强接口管理神器 Apifox

技术必备：推荐一款超强接口管理神器 Apifox

去年&#xff0c;给大家推荐了一款新面市不久的接口测试神器&#xff1a;Apifox&#xff0c;最近一年&#xff0c;Apifox官方又发布了一些新特性&#xff0c;趁此机会&#xff0c;再给大家分享一波。 简单来说&#xff0c;Apifox它是集&#xff1a;接口文档管理、接口调试、Mo…
阅读更多...
php框架laravel项目中错误与解决方案

php框架laravel项目中错误与解决方案

在 Laravel 中&#xff0c;项目解决方案通常包括一系列的组件、模式和约定&#xff0c;用于快速开发高质量的 Web 应用程序。下面是一段关于 Laravel 项目解决方案的简短介绍&#xff1a; "Laravel 提供了一个完整的项目解决方案&#xff0c;旨在帮助开发人员快速构建可靠…
阅读更多...
什么是Vue.js的响应式系统？如何实现数据的双向绑定？

什么是Vue.js的响应式系统？如何实现数据的双向绑定？

目录 一、Vue.js介绍 二、响应式系统 三、数据的双向绑定 四、如何实现数据的双向绑定 一、Vue.js介绍 Vue.js 是一种用于构建用户界面的渐进式 JavaScript 框架。它由尤雨溪开发并于2014年首次发布。Vue.js 的核心库只关注视图层&#xff0c;其设计灵感来自于 Angular 和…
阅读更多...
如何使用Docker安装Spug并实现远程访问本地运维管理界面

如何使用Docker安装Spug并实现远程访问本地运维管理界面

文章目录 前言1. Docker安装Spug2 . 本地访问测试3. Linux 安装cpolar4. 配置Spug公网访问地址5. 公网远程访问Spug管理界面6. 固定Spug公网地址 前言 Spug 面向中小型企业设计的轻量级无 Agent 的自动化运维平台&#xff0c;整合了主机管理、主机批量执行、主机在线终端、文件…
阅读更多...
PaddleOCR将自己训练的模型转换为openvino格式模型

PaddleOCR将自己训练的模型转换为openvino格式模型

1 训练模型 python train_steelseal_det.py2 checkpoints模型转换为inference 模型 加载配置文件ch_PP-OCRv4_det_student_steelseal.yml&#xff0c;从./output/ch_PP-OCRv4/best_model/目录下加载model模型&#xff0c;inference模型保存在./output/ch_PP-OCRv4/best_model…
阅读更多...
Pandas ------ 向 Excel 文件中写入含有合并表头的数据

Pandas ------ 向 Excel 文件中写入含有合并表头的数据

Pandas ------ 向 Excel 文件中写入含有合并表头的数据 推荐阅读引言正文 推荐阅读 Pandas ------ 向 Excel 文件中写入含有 multi-index 和 Multi-column 表头的数据 引言 这里给大家介绍一下如何向 Excel 中写入带有合并表头的数据。 正文 import pandas as pddf1 pd.D…
阅读更多...
代码随想录 Leetcode226.翻转二叉树

代码随想录 Leetcode226.翻转二叉树

题目&#xff1a; 代码(首刷看解析 2024年1月25日&#xff09;&#xff1a; class Solution { public:TreeNode* invertTree(TreeNode* root) {if(root nullptr) return root;swap(root->left,root->right);invertTree(root->left);invertTree(root->right);retu…
阅读更多...
09.Elasticsearch应用（九）

09.Elasticsearch应用（九）

Elasticsearch应用&#xff08;九&#xff09; 1.搜索结果处理包括什么 排序分页高亮返回指定字段 2.排序 介绍 Elasticsearch支持对搜索结果排序&#xff0c;默认是根据相关度算分来排序 支持排序的字段 keyword数值地理坐标日期类型 排序语法 GET /[索引名称]/_sear…
阅读更多...
C# 使用AutoMapper实现类映射

C# 使用AutoMapper实现类映射

写在前面 AutoMapper是一个用于.NET中简化类之间的映射的扩展库&#xff1b;可以在执行对象映射的过程&#xff0c;省去的繁琐转换代码&#xff0c;实现了对DTO的快速装配&#xff0c;有效的减少了代码量。 通过NuGet安装&#xff0c;AutoMapper&#xff0c; 由于本例用到了D…
阅读更多...
Altair SimSolid常见问题解答 衡祖仿真

Altair SimSolid常见问题解答 衡祖仿真

Q&#xff1a;SimSolid究竟有什么特别之处&#xff1f; A&#xff1a;Altair SimSolid是专为设计工程师开发的结构分析软件且非常有创新性。它消除了传统 FEA 中特别耗时和非常专业的两项庞大任务——几何结构简化和网格划分&#xff0c;是一场仿真变革。简而言之&#xff0c;…
阅读更多...
再识C语言 DAY12 【再识函数（上）】

再识C语言 DAY12 【再识函数（上）】

文章目录 前言一、函数是什么&#xff1f;二、自定义函数参数返回值void修饰函数的返回值和参数 函数不能嵌套定义形参和实参的区别return的用法补充if……else if……else……的用法 后面会讲解“函数调用&#xff0c;函数声明以及函数原型&#xff0c;块级变量&#xff0c;归…
阅读更多...
响应式Web开发项目教程（HTML5+CSS3+Bootstrap）第2版 例4-11 HTML5 表单验证

响应式Web开发项目教程（HTML5+CSS3+Bootstrap）第2版 例4-11 HTML5 表单验证

代码 <!doctype html> <html> <head> <meta charset"utf-8"> <title>HTML5 表单验证</title> </head><body> <form action"#" method"get" novalidate>请输入您的邮箱:<input type&q…
阅读更多...
最新文章

Copyright @ 2022~2023