ESP32-Web-Server编程- JS 基础5

ESP32-Web-Server编程- JS 基础5

概述

JS 编程内容颇多,我们提供一些简单的示例,先玩再学,边玩边学。

示例1-演示通过 JS 进行温度转换

在这里插入图片描述

资源链接

对应示例的 code 链接 (点击直达代码仓库)

示例2-增加网页弹窗

演示在网页上通过 window.alert()弹出一个弹窗。

<p><button onclick="trige_waring()">Don't clike me</button></p>
<script>function trige_waring() {var a = "Oh, This is a waring";window.alert(a);}
</script>

示例效果

在这里插入图片描述

点击按钮:

在这里插入图片描述

资源链接

对应示例的 code 链接 (点击直达代码仓库)

示例3- 使用 console.log() 在控制台输出 debug 信息。

console.log() 方法用于在控制台输出信息。

该方法对于开发过程进行测试很有帮助。

提示: 在测试该方法的过程中,控制台需要可见 (浏览器按下 F12 打开控制台)。

示例解析

前端代码

在前端代码的 js 脚本中,调用 console.log 方法。当运行到该函数时,将在控制台中输出对应的 log 提示。

<script>var count = 0;function trige_waring() {var myObj = { name : "LaoWang", say : "Ohh, you click me" };console.log(myObj);console.log("click_count=", count);count = count + 1;}
</script>

F12按下后,每次点击按钮,控制台出现 console 提示:

全局变量 click 记录按下的次数。并打印固定的 Json 对象:

在这里插入图片描述
使用 console 需要打开浏览器控制台,可以通过 F12 快捷键打开控制台程序。

资源链接

对应示例的 code 链接 (点击直达代码仓库)

示例4-通过鼠标的事件机制演示 JS event 机制

演示通过鼠标的事件机制,在网页上显示不同的效果。

示例解析

前端设计

前端代码建立了两断 text 文字,并设置了鼠标按下-mouseDown()、鼠标抬起-mouseUp(),鼠标在文字上-mouseOver()、鼠标离开文字-mouseOut() 四个事件。

<body><p id="text1" onmousedown="mouseDown()" onmouseup="mouseUp()">Press down to change color to red. Release to change to green.</p><p id="text2" onmouseover="mouseOver()" onmouseout="mouseOut()">Move the mouse over this text to make it bigger.</p><script>function mouseDown() {document.getElementById("text1").style.color = "red";}function mouseUp() {document.getElementById("text1").style.color = "green";}function mouseOver() {document.getElementById("text2").style.fontSize = "20px";}function mouseOut() {document.getElementById("text2").style.fontSize = "16px";}</script></body>
示例效果

移动鼠标在不同的文字上,可以看到不同的效果:

在这里插入图片描述

主要是演示鼠标事件的使用方法。在网页端可以设计鼠标按下-mouseDown()、鼠标抬起-mouseUp(),鼠标在文字上-mouseOver()、鼠标离开文字-mouseOut() 四个事件。

资源链接

对应示例的 code 链接 (点击直达代码仓库)

总结

1)本节主要是演示一些典型的 JS 编程的用法。在 ESP32 Web Server 编程中,JS 部分负责很多动态、解释性的内容,是需要重点了解的内容,我们将在后面逐渐学习更多有趣的应用。

资源链接

1)ESP32-Web-Server ESP-IDF系列博客介绍

2)下一篇:ESP32-Web-Server 实战编程-通过网页控制设备的 GPIO

(码字不易感谢点赞或收藏)

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【攻防世界-misc】reverseMe

1.下载后&#xff0c;得到这样一张图片 2.利用在线翻转网站获取值&#xff0c;在线旋转图片工具|在线翻转照片|调整照片方向|生成镜像图片 - 改图宝 反转后的图片&#xff0c;将值提取并上传。

Java零基础——Nginx篇

1.【熟悉】服务器概述 1.1 目前常见的web服务器 1&#xff0c;Apache(http://httpd.apache.org) 它是世界上用的最多的web服务器&#xff0c;市场占有率达60%左右&#xff0c;模块非常丰富&#xff0c;系统非常稳定&#xff0c;可移植性好&#xff0c;但是比较消耗资源 2&…

Rust之构建命令行程序(一):接受命令行参数

开发环境 Windows 10Rust 1.73.0 VS Code 1.84.2 项目工程 这次创建了新的工程minigrep. IO工程&#xff1a;构建命令行程序 这一章回顾了到目前为止你所学的许多技能&#xff0c;并探索了一些更标准的库特性。我们将构建一个与文件和命令行输入/输出交互的命令行工具&#…

业务流程图用什么软件绘制?

在企业的日常工作中&#xff0c;对于业务流程的把控和优化显得非常重要。为了更好地理解和管理业务流程&#xff0c;业务流程图便应运而生。 业务流程图是企业管理的图形化工具&#xff0c;它描述了企业在生产和服务提供过程中&#xff0c;在各个环节中所涉及的各种操作、任务…

python如何抓取携程酒店的价格,让工作更简单点

有时候老板没事安排点事&#xff0c;为了偷懒&#xff0c;只能使出大招&#xff0c;毕竟自己不是那么老老实实干活的人&#xff0c;整理数据这类累和繁琐的活&#xff0c;我怎么能轻易动&#xff0c;好在gpt可以帮我来实现&#xff0c;有人可能会说&#xff0c;这么点内容你还不…

OpenCvSharp从入门到实践-(05)通道

目录 1、拆分通道 1.1、实例1-拆分一副BGR图像的通道 1.2、实例2-拆分一副HSV图像的通道 2、合并通道 2.1 实例3-合并通道的顺序不同&#xff0c;图像的显示效果也不通 实例4-合格H通道图像、S通道图像、V通道图像 3、综合运用拆分通道和合并通道 2.2、实例5-只把H通道的…

Vue3-admin-template 导入模板功能

先看效果&#xff1a; 直接上代码&#xff1a; 1.绑定事件&#xff1a; <el-button type"primary" click"templates">模板导入</el-button> 2.写结构样式 <!-- 模板导入 --><el-dialog v-model"Statusimprot" title&quo…

js相同字符串截取拼接

原数据 const list [999-1234567801,999-1234567802,999-1234567803, ]; const list1 [999-1234567899,999-1234567900,999-1234567901, ];期望数据 999-1234567801/2/3 //list 999-1234567899/900/901 //list1处理代码 // 连续号码处理 export const formatNumber (tick…

9.二维数组——打印出杨辉三角形(要求打印出10行)

文章目录 前言一、题目描述 二、题目分析 三、解题 程序运行代码 前言 本系列为二维数组编程题&#xff0c;点滴成长&#xff0c;一起逆袭。 一、题目描述 打印出杨辉三角形&#xff08;要求打印出10行&#xff09;。 二、题目分析 三、解题 程序运行代码 #include<s…

在柯桥西班牙语论文写作,连接词只会用porquepero?西语连接词大全来啦~

Adicin -agregan nuevos datos al desarrollo de una idea o introduce otro aspecto del tema. 为观点的论述增添新的信息&#xff0c;或介绍主题的另一个方面。 1 Lista de conectores 连接词列表 Adems. As mismo. Hay que mencionar, adems. Habra que decir tambin. Mas …

[算法总结] - 蓄水池采样算法

问题描述 在长度为N的数组中&#xff0c;随机等概率选取K个元素&#xff0c;如何实现这个随机算法。 思路很简单&#xff0c;生成一个[0, N]的随机数index&#xff0c;然后返回index上的数值即可。 但是&#xff0c;如果输入是一个长度未知的数组比如stream&#xff0c;先遍历…

JUC(Java.util.concurrent)的常见类

目录 ♫ReentrantLock ♪什么是ReentrantLock ♪ReentrantLock的用法 ♪ReentrantLock和synchronized的区别 ♫Semaphore ♪什么是Semaphore ♪semaphore的用法 ♫CountDownLatch ♪什么是CountDownLatch ♪CountDownLatch的使用 ♫多线程环境使用ArrayList ♫多线程环…

数据分享 I 重点城市现状建筑数据,shp格式放送

数据名称: 现状建筑数据 数据格式: Shp 数据时间: 不同城市的数据时间有所不同&#xff0c;详情可搜“吧唧数据” 数据几何类型: 面 数据坐标系: WGS84坐标系 数据来源&#xff1a;网络公开数据 深圳市现状建筑数据示意图 东莞市部分镇街现状建筑数据示意图 武汉市部…

深入了解MySQL数据库管理与应用

&#x1f482; 个人网站:【 海拥】【神级代码资源网站】【办公神器】&#x1f91f; 基于Web端打造的&#xff1a;&#x1f449;轻量化工具创作平台&#x1f485; 想寻找共同学习交流的小伙伴&#xff0c;请点击【全栈技术交流群】 当涉及MySQL数据库管理与应用时&#xff0c;深…

【Cisco Packet Tracer】构造超网

​​&#x1f308;个人主页&#xff1a;Sarapines Programmer&#x1f525; 系列专栏&#xff1a;《Cisco Packet Tracer | 奇遇记》⏰寄 语&#xff1a;风翻云浪激&#xff0c;剑舞星河寂。 临风豪情壮志在&#xff0c;拨云见日昂首立。 目录 ⛳️1. Cisco Packet Trace…

在数据库中进行表内容的修改(MYSQL)

根据表中内容&#xff0c;用命令语句创建数据库&#xff0c;表格&#xff0c;以及插入&#xff0c;修改&#xff0c;删除表格中的内容。 创建数据库&#xff1a;zrzy mysql> create database zrzy; 引用zrzy数据库&#xff1a; mysql> use zrzy; 创建student_info表&…

vulnhub靶机gigachad_vh

下载地址&#xff1a;Gigachad: 1 ~ VulnHub 主机发现 目标166 端口扫描 端口服务扫描 漏洞扫描 这玩意多得离谱 于是我用a重新扫了一遍 先去看web (⊙﹏⊙)离谱&#xff0c;目录扫描&#xff08;之前先去看一下nmap扫到的html&#xff09; 后面扫描的目录奇多&#xff0c;而…

NX二次开发UF_MTX3_x_vec 函数介绍

文章作者&#xff1a;里海 来源网站&#xff1a;https://blog.csdn.net/WangPaiFeiXingYuan UF_MTX3_x_vec Defined in: uf_mtx.h void UF_MTX3_x_vec(const double mtx [ 9 ] , double x_vec [ 3 ] ) overview 概述 Returns the X-direction vector of a matrix. 返回矩阵…

uniapp地图基本使用及解决添加markers不生效问题?

uniapp地图使用 App端 通过 nvue 页面实现地图 文章目录 uniapp地图使用效果图templatejs添加 marker使用地图查看位置移到到当前位置 效果图 template <template><view class"mapWrap"><!-- #ifdef APP-NVUE --><map class"map-containe…

springboot自定义更换启动banner动画

springboot自定义更换启动banner动画 文章目录 springboot自定义更换启动banner动画 &#x1f4d5;1.新建banner&#x1f5a5;️2.启动项目&#x1f516;3.自动生成工具&#x1f9e3;4.彩蛋 &#x1f58a;️最后总结 &#x1f4d5;1.新建banner 在resources中新建banner.txt文…