第十章JavaScript的应用

🕗 发布于 2024-11-26 08:34 javascript 开发语言 ecmascript

10.1 JavaScript概述

10.1.1 JavaScript简介

JavaScript是一种基于对象(Object)和事件驱动(Event Driven)并具有安全性能的脚本语言，能够与HTML(超文本标记语言)、Java语言一起在Web 页面中与Web客户交互，它无须经过先将数据传给服务器端(Server)、再传回来的过程，而直接可以由客户端(Client)的应用程序处理，从而可以开发客户端的应用程序等。JavaScript是通过嵌入或调入在标准的 HTML语言中实现的，弥补了HTML语言的缺陷，是Java与HTML折中的选择

10.1.1.1 简单性

JavaScript是一种脚本语言，采用小程序段的方式实现编程。像其他脚本语言一样， JavaScript同样是一种解释性语言，提供了一个简易的开发过程。

10.1.1.2 动态性

JavaScript是动态的，可以直接响应用户或客户的输入，无须经过Web服务程序，通过事动来响应用户的请求

10.1.1.3 跨平台性

JavaScrip依赖浏览器，与操作环境无关，只要能运行浏览器的计算机、支持JavaScript的浏览器就可以正确执行。

10.1.1.4 安全性

JavaScript是一种安全性语言，不允许访问本地的硬盘，并不能将数据存入到服务器上,不允许对网络文档进行修改和删除，只能通过浏览器实现信息浏览或动态交互，可有效地防止数据的丢失。

10.1.1.5 基于对象的语言

JavaScript 是一种基于对象的语言，同时可以看作是一种面向对象的语言。这意味着它能将特定功能封装在对象中。

10.1.2 JavaScript入门案例

JavaScript程序不能独立运行，必须依赖HTML文件，通常将JavaScript代码放置在 script标记内，由浏览器JavaScript脚本引擎来解释执行。

10.1.3 JavaScript放置的位置

JavaScript代码一般放置在页面的head或body部分。当页面载入时，会自动执行位于body部分的JavaScript;而位于head部分的JavaScript只有被显式调用时才会被执行。

10.1.3.1 head标记中的脚本

script标记放在头部head标记中，通JavaScript代码必定成函数形式,并在主体 body 标记内调用或通过事件触发。放在head标记内的脚本在页面装载时同时载入，这样在主体标记内调用时可以直接执行，提高了脚本执行速度。语法:
function functionname(参数1,参数2,.…,参数n){
函数体语句;
}

说明:
JavaScript自定义函数必须以function关键字开始，然后给自定义函数命名，函数命名时一定遵守标识符命名规范。函数名称后面一定要有一对括号“()”，括号内可以有参数，也可以无参数，多个参数之间用逗号“,”分隔。函数体语句必须放在大括号“{ }”内。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>head中定义的JS函数</title>
<script type="text/javascript">
function message(){
alert("调用JS函数! sum(100,200)=" + sum(100,200));
}
function sum(x,y){
return x + y;
}
</script>
</head>
<body>
<h4>head标记内定义两个JS函数</h4>
<p>无返回值函数：message()</p>
<p>有返回值函数：sum(x,y)</p>
<form>
<input name="btncal" type="button" onclick="message();" value="计算并显示两个数的和">
</form>
</body>
</html>

10.1.3.2 body标记中的脚本

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>body中的JavaScript脚本</title>
</head>
<body>
<p id="clk">Clicke Here</p>
<script type="text/javascript">
var demo=document.getElementById("clk");
demo.onclick=msg;

function msg(){
alert("我是body中的JavaScript脚本")
}
</script>
</body>
</html>

10.1.3.3 外部js文件中的脚本

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>调用外部js文件的Javascript函数</title>
<script type="text/javascript" src="js/Demo.js">
document.write("这条语句没有执行，被忽略掉了！");
</script>
</head>
<body>
<input name="btn1" type="button" onclick="message()" value="调用外部js文件的JavaScript函数"/>
</body>
</html>

JavaScript代码

function message(){
alert("调用外部js文件的JavaScript函数")
}

10.1.3.4 事件处理代码中的脚本

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>直接在事件处理代码中加入JavaScript代码</title>
</head>
<body>
<form>
<input type="button" onclick="alert('直接在事件处理代码中加入JavaScript代码')" value="直接在事件处理代码中加入JavaScript代码">
</form>
</body>
</html>

10.2 JavaScript语法

10.2.1 语法基础

JavaScript是一种脚本语言，用于为网页添加交互功能。以下是JavaScript的一些基础语法：

变量声明：
- 使用var关键字声明变量，例如：var x = 10;
- 变量名使用字母、数字、下划线和美元符号，必须以字母开头
- 变量可以存储不同类型的值，如数字、字符串、布尔值等
数据类型：
- 数字：整数和小数，例如：var num = 10;
- 字符串：一串文本，用引号包围，例如：var name = "John";
- 布尔值：表示真或假，例如：var isTrue = true;
- 数组：用于存储多个值的集合，例如：var colors = ['red', 'green', 'blue'];
- 对象：存储键值对的集合，例如：var person = {name: 'John', age: 20};
运算符：
- 算术运算符：+、-、*、/等
- 比较运算符：==、!=、>、<等
- 逻辑运算符：&&、||、!等
条件语句：
- if语句：根据条件执行不同的代码块
- else if语句：在if语句条件不满足时执行另一个代码块
- else语句：在if和else if条件都不满足时执行的代码块
循环语句：
- for循环：重复执行一段代码一定次数
- while循环：当条件为真时重复执行一段代码
- do while循环：先执行一段代码，然后再检查条件是否为真
函数：
- 使用function关键字定义函数，例如：function sayHello() {console.log("Hello");}
- 可以有参数和返回值，例如：function add(a, b) {return a + b;}

10.2.1.1 区分大小写

在JavaScript语言中，对大小写是敏感的，这在现在的很多开发语言中都是如此，所以读者要养成一种良好的习惯，这样就可以避免调试程序时遇到这些低级错误。

10.2.1.2 变量不区分类型

JavaScript中变量声明，采用其弱类型，即变量在使用前无须进行变量数据类型声明，而由解释器在运行时检查其数据类型

10.2.1.3 每行代码结尾可以省略分号

在JavaScript里面每条语句结尾的分号“;”不是必要的，如果多个语句写在一行上，
那么语句之间的分号“;”才是必需的，最后一条语句的分号“;”可以省略。为了养成良双引
好的编程习惯，建议还是在每条语句后面加上分号。

10.2.1.4 注释与C、C++、Java等语言相同

注释就是对代码的解释和说明，目的是为了让别人和自己容易读懂程序。JavaScript的符串中
注释形式与C、C++、Java等语言相同，格式如下:
例如:

//单行注释

/*
多行注释

10.2.2 标识符和常用变量

10.2.2.1 标识符

标识符是计算机语言中用来表示变量名、函数名等的有效字符序列，简单来说，标识符
"Object"
就是一个名字，JavaScript关于标识符的规定如下:

(1)必须使用英文字母或者下划线开头。
组成部分。
(2)必须使用英文字母、数字、下划线组成，不能出现空格或制表符。(3)不能使用JavaScript关键字与JavaScript保留字。
10.2
(4)不能使用JavaScript语言内部的单词，比如Infinity，NaN，undefined等。
JavaSc
(5)大小写敏感,如name和Name是不同的两个标识符。
运算符、逗
合法的标识符:Hello、_12th、sum、Dog23等。

不合法的标识符:if、3com、case、switch等。

10.2.2.2 变量声明

JavaScript是采用的隐式变量声明，但要注意在JavaScript语言的任在JavaScript语言环境中，变量是用于存储信息的容器，关键字var可应用于JavaScript中任何类型的变量声明。

10.2.2.3 变量类型

avaScript中的变量可以存储不同类型的值。以下是JavaScript支持的一些常见变量类型：

数值型(Number)：用于存储数字，可以是整数或小数，例如：var age = 25;、var price = 9.99;
字符串(String)：用于存储文本，由引号（单引号或双引号）包围，例如：var name = "John";、var message = 'Hello world';
布尔值(Boolean)：表示真或假，只有两个值：true或false，例如：var isTrue = true;、var isFalse = false;
对象(Object)：用于存储键值对的集合，每个键都是一个字符串，每个值可以是任意类型，例如：var person = {name: 'John', age: 25};
空值(Null)：表示变量没有值，例如：var x = null;
未定义(Undefined)：表示变量声明但未初始化，例如：var y;

10.2.3 运算符与表达式

10.2.3.1 算术运算符和表达式

10.2.3.2 关系运算符和表达式

10.2.3.3 逻辑运算符和表达式

10.2.3.4 赋值运算符和表达式

10.2.3.5 条件运算符和表达式

条件运算符是一个三元运算符，条件表达式由条件运算符和三个操作数构成。语法:
变量=表达式1?表达式2:表达式3说明:
该条件表达式表示，如果表达式1的结果为真(true)，则将表达式2的值赋给变量，否则将表达式3的值赋给变量。例如，变量number 1、number2比较大小，将较大的数赋值给变量 max，代码如下:
var max =( numberl>number2)?numberl:number2;

10.2.3.6 逗号运算符和表达式

逗号运算符是一个二元运算符，逗号运算符的优先级最低，由逗号运算符和操作数连接起来符合规则的式子，称为逗号表达式，其运算规则是先计算第一个表达式的值，再计算第二个表达式的值，依次类推，计算完所有表达式的值，运算结果为最后一个表达式的值
var rs=(3+5,10 *6);/*先计算第一个表达式3+5的值为8,再计算第二个表达式10*6的值为6例如:
最后将第二个表达式的值60赋给变量rs*/

10.2.4 程序设计

10.2.4.1 条件分支语句

条件分支语句如if、else if、else，用于根据不同的条件执行不同的代码块。

10.2.4.2 循环语句

循环语句如for、while、do...while，用于重复执行一段代码。

10.2.5 函数

10.2.5.1 定义函数

function 函数名(varl，var2,var3)
/*函数代码*/
varl、var2、var3等指的是传人函数的变量或值，为函数的参数;大括号定义了函数的开始和结束。

10.2.5.2 函数返回值

需要返回某个值的函数必须使用return语句。例如: function sum( a,b)
x=a+b; return x;

10.2.5.3 函数调用

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>函数调用</title>
<script type="text/javascript">
function sayHello(){
alert("Hello World!");
}
</script>
</head>
<body>
<button onclick="sayHello()">单击这里</button>
</body>
</html>

10.3 JavaScript对象

10.3.1 对象基础

10.3.1.1 概述

10.3.1.2 属性

属性是对象的特性值的表述，
JavaScript内建对象的属性可以参阅相关的技术文档，当然在Visual Studio平台中由于有智能感应功能，就可以很方便地访问对象的属性。
访问用户自定义对象属性的方式和访问JavaScript内建对象的属性方式是一样的，例如: var person= new object( );
person.birthday='1982-09-09';
属性是通过对一个已有对象的新属性进行赋值的方式来创建的，前面提到声明变量时通常用关键字 var，但是创建对象属性和赋值时不使用var。

10.3.1.3 方法

10.3.2 常用对象

10.3.2.1 window对象

window对象代表浏览器窗口，提供了许多与窗口相关的属性和方法。

属性：

window.location：返回当前窗口中加载的文档的URL。
window.history：允许访问浏览器的历史记录。
window.document：返回当前文档。
window.screen：包含有关屏幕的尺寸和设置的信息。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>移动窗口</title>
<script type="text/javascript">
function moveWin(){
myWindow.moveTo(50,50);
}
</script>
</head>
<body>
<script type="text/javascript">
myWindow=window.open('','','width=200', 'height=100');
myWindow.document.write("This is 'myWindow'");
</script>
<input type="button" value="Move 'myWindow'" onclick="moveWin()"/>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>confirm()的使用</title>
</head>
<body>
<script>
var userChoice=window.confirm("请选择“确定”或“取消”");
if(userChoice==ture){
document.write("OK");
}
if(userChoice==false){
document.write("Cancel");
}

</script>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>prompt()的使用</title>
</head>
<body>
<script type="text/javascript">
var hobby = prompt('请问您的爱好?', '请输入');
document.write("您的爱好是---"+ hobby);
</script>
</body>
</html>

10.3.2.2 document对象

document对象代表整个HTML文档，允许JavaScript访问和修改页面内容。

属性：

document.URL：返回当前文档的URL。
document.domain：设置或返回当前文档的域。
document.title：设置或返回当前文档的标题。
document.body：返回文档的<body>元素。
document.head：返回文档的<head>元素。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Document属性</title>
</head>
<body>
<img src="img/1.bmp" BORDER="0" alt=""/><br/>
<script type="text/javascript">
document.write("文件地址:"+document.location+"<br/>")
document.write("文件标题:"+document.title+"<br/>");
document.write("图片路径:"+document.images[0].src+"<br/");
</script>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Document属性</title>
</head>
<body>
<img src="img/1.bmp" BORDER="0" alt=""/><br/>
<script type="text/javascript">
document.write("文件地址:"+document.location+"<br/>")
document.write("文件标题:"+document.title+"<br/>");
document.write("图片路径:"+document.images[0].src+"<br/");
</script>
</body>
</html>

10.3.2.3 location对象

location对象提供了与当前浏览器地址栏中URL相关的属性和方法。

属性：

location.href：设置或返回当前页面的URL。
location.search：返回URL中的查询字符串（问号?之后的部分）。
location.hash：设置或返回URL中的锚点（#之后的部分）。
location.host：返回URL中的域名和端口号（如果有）。
location.hostname：返回URL中的域名。
location.port：返回URL中的端口号。
location.pathname：返回URL中的路径。
location.protocol：返回URL中的协议。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>location对象使用</title>
<script type="text/javascript">
function currLocation(){alert(window.location)}
function newLocation(){window.location="10.11.html"}
</script>
</head>
<body>
<input type="button" onclick="currLocation()" value="显示当前的URL"/>
<input type="button" onclick="newLocation()" value="改变URL"/>
</body>
</html>

10.3.2.4 navigator对象

navigator对象的中文意思为“导航器”，通常用于检测浏览器与操作系统的版本，也是 window 对象的属性。
由于navigator没有统一的标准，因此各个浏览器都有自己不同的navigator版本， navigator 的属性和方法也会有一定的不同。这里介绍普遍支持且常用的部分属性和方法。
(1)navigator对象属性。navigator中最重要的是userAgent属性，它用来返回包含浏览器版本等信息的字符串;其次cookieEnabled也很重要，使用它可以判断用户浏览器是否开启cookie。

10.3.2.5 screen对象

10.4 JavaScript事件

10.4.1 事件及事件处理

(1)直接在HTML标记中指定。这种方法用得最多。一般形式:
<标记…事件="事件处理程序”[事件="事件处理程序".]>

例如:

<html>

<head>
<meta charset=" utf-8" />

<title></title>

</head>
<body onload=" alert(欢迎访问页面!')">

</body>

</html>

以上示例<body>标记中，在文档加载完毕时弹出一个告警框，显示“欢迎访问页面”。

(2)编写特定对象特定事件的JavaScript。这种方法用得少，但是在某些场合还是很好用的。
一般形式:
<script language=" JavaScript" for="对象"event="事件">(事件处理程序代码)<script>

例如:

<html>
<head>
<meta charset =" utf-8"/>
<title></title>

<script language="JavaScript" for=" window" event=" onload" >
alert(欢迎访问页面!”)
</script>
</head>
<body>
</body>
</html>

(3)在JavaScript中说明。一般形式:
<事件主角-对象>.<事件>=<事件处理程序>;
该方法需要注意的是，“事件处理程序”是真正的代码，而不是字符串形式的代码。如果事件处理程序是一个自定义函数，如无使用参数的需要，就不要加“()”。

10.4.2 常用事件

10.4.3 事件应用举例

例10.14 onLoad事件

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>onLoad</title>
</head>
<body onload="checkCookies()">
<script type="text/javascript">
function checkCookies(){
if(navigator.cookieEnabled==true)
alert("已启用Cookie")
else
alert("未启用Cookie")
}
</script>
<p>提示框会告诉你，浏览器是否已启用Cookie</p>
</body>
</html>

例10.15onchage事件

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>onchage事件</title>
<script type="text/javascript">
function myFunction(){
var x=document.getElementById("fname");
x.value=x.value.toUpperCase();
}
</script>
</head>
<body>
请输入英文字符：<input type="text" id="fname" onchange="myFunction()"/>
<p>当您离开输入字段时，会触发将输入文本转换为大写的函数</p>
</body>
</html>

例10.16鼠标事件

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>鼠标事件</title>
<script type="text/javascript">
function mouseOver(obj){
obj.style.color="blue";
obj.innerHTML="把鼠标移开"
}
function mouseOUt(obj){
obj.style.color="red";
obj.innerHTML="把鼠标移动到上面"
}
function mouseDown(obj){
obj.style.backgroundColor="red";
obj.innerHTML="请按下鼠标按钮";
}
</script>
</head>
<body>
<div onmouseover="mouseOver(this)" onmouseout="mouseOUt(this)" style="background-color: green; width: 120px; height: 20px; padding: 20px; color: #ffffff;">
把鼠标移到上面
</div>
<br/>
<div onmousedown="mouseDown(this)" onmouseup="mouseup(this)" style="background-color: green; width: 120px; height: 20px;padding: 20px; color: #ffffff;">
请按下鼠标按钮
</div>
</body>
</html>

例10.17键盘事件

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>键盘事件</title>
<script type="text/javascript">
function keyDown(){
alert("你按下了按键");
if(event.ctrlKey){
alert("你按下了ctrl键");
}
}
function keyPress(){
alert("你按下了键，并且释放了按键");
}
</script>
</head>
<body onkeydown="keyDown()" onkeypress="keyPress()">
</body>
</html>

10.5 综合案例——轮播广告

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>图片轮播效果</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
text-decoration: none;
}
body{
padding: 20px;
}
#container{
position: relative;
width: 600px;
height: 400px;
border:1px solid #333;
overflow:hidden;
margin-left: auto;
margin-right: auto;
}
#list{
position: absolute;
z-index: 1;
width: 4200px;
height: 400px;
}
#list img{
float: left;
width: 600px;
height: 400px;
}
#buttons{
position: absolute;
left: 250px;
bottom: 20px;
z-index: 2;
height: 10px;
width: 100px;
}
#buttons span{
float: left;
margin-right: 5px;
width: 10px;
height: 10px;
border: 1px solid #fff;
border-radius: 50%;
background: #333;
cursor: pointer;
}
#buttons.on{
background: orangered;
}
.arrow{
position: absolute;
top: 180px;
z-index: 2;
display: none;
width: 40px;
height: 40px;
font-size: 36px;
font-weight: bold;
line-height: 39px;
text-align: center;
color: #fff;
background-color: RGBA(0,0,0,.3);
cursor: pointer;
}
.arrow:hover{
background-color: RGBA(0,0,0,.7);
}
#container:hover.arrow{
display: block;
}
#prev{
left: 20px;
}
#next{
right: 20px;
}
</style>
<script type="text/javascript">
window.onload=function(){
var container=document.getElementById('container');
var list=document.getElementById('list');
var buttons=document.getElementById('buttons').getElementsByTagName('span');
var prev=document.getElementById('prev');
var next=document.getElementById('next');
var index=1;
var timer;
function animate(offset){
var newLeft=parseInt(list.style.left)+offset;
list.style.left=newLeft+'px';
//无限滚动判断
if(newLeft>-600){
list.style.left=-3000+'px';
}
if(newLeft<-3000){
list.style.left=-600+'px';
}
}
function play(){
// 重复执行的定时器
timer=setInterval(function(){
next.onclick();
},2000)
}
function stop(){
clearInterval(timer);
}
function buttonsShow(){
// 将之前的小圆点的样式清楚
for(var i=0;i<buttons.length;i++){
if(buttons[i].className=="on"){
buttons[i].className="";
}
}
// 数组从0开始,index需要减1
buttons[index-1].className="on";
}
prev.onclick=function(){
index-=1;
if(index<1){
index=5
}
buttonsShow();
animate(600);
};
next.onclick=function(){
index+=1;
if(index>5){
index=1
}
animate(-600);
buttonsShow();
};
for(var i=0;i<buttons.length;i++){
(function(i){
buttons[i].onclick=function(){
var clickIndex=parseInt(this.getAttribute('index'));
var offset=600*(index-clickIndex);
animate(offset);
index=clickIndex;
buttonsShow();
}
})(i)
}
container.onmouseover=stop;
container.onmouseout=play;
play();
}
</script>
</head>
<body>
<div id="container">
<div id="list" style="left: -600px;">
<img src="img/p5.jpg" alt="5"/>
<img src="img/p1.jpg" alt="1"/>
<img src="img/p2.jpg" alt="2"/>
<img src="img/p3.jpg" alt="3"/>
<img src="img/p4.jpg" alt="4"/>
<img src="img/p5.jpg" alt="5"/>
<img src="img/p1.jpg" alt="5"/>
</div>
<div id="buttons">
<span index="1" class="on"></span>
<span index="2"></span>
<span index="3"></span>
<span index="4"></span>
<span index="5"></span>
</div>
<a href="javascript:;" id="prev" class="arrow">&lt;</a>
<a href="javascript:;" id="next" class="arrow">&gt;</a>
</div>
</body>
</html>

原文地址：https://blog.csdn.net/2401_87174676/article/details/143855712

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！

JavaScript介绍
介绍js和js主要内容。
阅读更多2024-11-27
汽车维修管理系统｜Java｜SSM｜VUE｜前后端分离
3⃣️：员工端：首页、个人中心、维修项目管理、车辆信息管理、维修预约管理、汽车修理单管理、配件领用管理、汽车修理台账管理、汽车配件库存管理、采购进货单管理、配件申请管理。2⃣️：管理端：首页、个人中心
阅读更多2024-11-27
Vue el-input 校验输入数字和小数点，首位数字不能为0
为了使这个函数能够处理小数点输入，我们需要调整验证逻辑。
阅读更多2024-11-27
金融租赁系统助力企业升级与风险管理的新篇章
金融租赁系统在现代企业运营中发挥着重要作用，通过优化资金配置和资源利用，助力企业实现升级与转型。系统的先进风控模型能够有效管理风险，同时提高业务处理效率，使企业在竞争中更具优势。此外，金融租赁的灵活性
阅读更多2024-11-27
平安养老险20年：专业书写“养老金融”答卷
中国养老金融走过20年历程中，一家金融强企正是伴随着养老金融产业从诞生走向成熟。去年，中央金融工作会议将“养老金融”列入“五篇大文章”之一。回望20年前，中国“养老金融”便已悄然发轫。2004年，“企
阅读更多2024-11-27
金融数据中心容灾“大咖说” | Commvault的“网络弹性”之道
中国人民银行发布的《金融数据中心容灾建设指引》（JR/T 0264—2024）已于2024年7月29日正式实施。这一金融行业标准对金融数据中心容灾建设中的“组织保障、需求分析、体系规划、建设要求、运维
阅读更多2024-11-27
Vercel 设置自动部署 GitHub 项目
通过配置 Vercel Deploy Hooks 和 GitHub Webhooks，可在免费计划下实现代码推送后自动触发部署。
阅读更多2024-11-27
java基础概念38：正则表达式3-捕获分组
捕获分组，非捕获分组
阅读更多2024-11-27
stm32 指定变量存储地址
指定变量存储地址__attribute__((at(0x20000000)))
阅读更多2024-11-27
LVGL加载器，led和列表学习（基于正点原子）
* 设置主体圆弧宽度 */ lv_obj_set_style_arc_width( spinner, 30, LV_PART_INDICATOR );
阅读更多2024-11-27