资源描述
《JavaScript初探》
《JavaScript移动开发》课第1单元
课程单元教学设计
（2020～ 2021学年第1学期）
单元名称： JavaScript初探
所属系部： 计算机与通信工程学院
制定人： 郑丽萍
合作人：
制定时间： 2020.3
******学院 教务处 制
JavaScript移动开发课程单元教学设计
单元标题：JavaScript初探
单元教学学时
2
在整体设计中的位置
第1次
授课班级
16web班
上课
时间
每周一1,2节
上课
地点
计算机实验室
教学
目标
能力目标
知识目标
素质目标
1.能够使用多种方案引入JavaScript脚本代码到HTML文档中。
2.能够使用常用的输出语句。
3.能够获取元素并改变元素内容。
了解JavaScript简史和引擎的工作原理。掌握JavaScript的组成、主要特点和相关应用。
树立学习信心；培养讨论思考的习惯
能力训练任务
任务：JavaScript初探
教学组织：
1. 带领学生了解课程任务
2. 讲解JavaScript简史及相关术语
3. 引入JavaScript脚本代码到HTML文档中，使用常用的输出语句
本次课的单词
JavaScript Web function
document getElementById innerHTML
案例和
教学
材料
案例：JavaScript初探-文字的切换
教学材料：
1.教材名称：《JavaScript移动开发项目教程（微课版）》,郑丽萍, 人民邮电出版社。
2.参考教材名称：《JavaScript与jQuery案例教程》,郑丽萍，出版社：高等教育出版社。
3.教学多媒体课件，项目源文件。
多媒体资料：http://www.icourse163.org/course/HCIT-1206706828
4.仪器与设备：计算机等
单元教学进度设计（纲要）
步骤
教学内容及能力/知识目标
教师活动
学生活动
时间（分钟）
1
情境导入
介绍本节课的教学目标．
导入本次课教学情境
学生了解工作情境
2
2
引入
任务：JavaScript初探-文字的切换
交代任务
学生接受任务
3
3
知识点
讲解
JavaScript初探
讲解JavaScript简史及相关术语
了解JavaScript简史及相关术语
10
讲解JavaScript引擎的工作原理
了解JavaScript引擎的工作原理
10
讲解引入JavaScript脚本代码到HTML文档中方法
掌握引入JavaScript脚本代码到HTML文档中方法
10
教师巡视，发现问题
多种引入方案练习
15
4 实践
JavaScript初探-文字的切换
教师演示
掌握常用的输出语句方法
10
教师巡视，发现问题
常用的输出语句练习
20
5
评比
检查学生完成情况
抽查学生完成情况，讲解出现的问题
演示自己的界面，修改出现的问题
5
6
总结
JavaScript初探
重点强调学生练习中出现的问题
学生思考反馈
5
作业
Javascript的主要特点？
课后
体会
一、情境导入
介绍本节课的教学目标
二、引入
任务 ：JavaScript初探-文字的切换
三、知识点讲解
术语“ECMAScript”和“JavaScript”指的是同一个东西。但如果把JavaScript看成是“Mozilla或其他组织的ECMAScript实现”，那么ECMAScript就是实现JavaScript所依据的标准。术语“ECMAScript”也用来描述语言版本(比如ECMAScript5)。
JavaScript解析引擎就是能够“读懂”JavaScript代码，并准确地给出代码运行结果的一段程序。比方说，当编写了 var a = 1 + 1; 这样一段代码，JavaScript引擎做的事情就是看懂（解析）你这段代码，并且将a的值变为2。JavaScript引擎就是直接解析并将代码运行结果输出的JavaScript的解释器
JavaScript由三部分组成：
l 核心（ECMAScript） 描述了该语言的语法和基本对象
l 文档对象模型(DOM，Documnet)描述了处理网页内容的方法和接口
l 浏览器对象模型(BOM)描述了与浏览器进行交互的方法和接口
JavaScript的主要特点
JavaScript相关应用
选择 JavaScript 脚本编辑器
引入JavaScript脚本代码到HTML文档中方法
Javascript常用的输出语句：
• 使用 window.alert() 弹出警告框。
• 使用 document.write() 方法将内容写到 HTML 文档中。
• 使用 innerHTML 写入到 HTML 元素。
• 使用 console.log() 写入到浏览器的控制台。
边改边看有2个控制台，默认控制台显示在HBuilder下方，直接输出了log和错误日志。控制台显示了代码行号，点击后可直接转到该行代码，如图所示Chrome调试效果。
边改边看是轻量级的界面调试工具，如图1-12，最方便最常用。在HBuilder右上角切换开发模式，可以选边改边看方式，切换模式的快捷键是Ctrl+p。进入边改边看后，左边显示代码，右边显示浏览器。
边改边看有2个控制台，默认控制台显示在HBuilder下方，直接输出了log和错误日志。
控制台显示了代码行号，点击后可直接转到该行代码，如图所示。
四、任务实施
document.getElementById("demo")，使用 id 属性来查找id为demo HTML 元素，然后给它的innerHTML属性重新的赋值为新的字符串，就有了我们看到的切换文字的效果。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> Sample Page!</title>
</head>
<body>
<script>
function clickMe()
{
document.getElementById("demo").innerHTML = "开始学习JavaScript!";
}
</script>
<div id="demo" style=" font-family:'微软雅黑'; font-size:36px; color:#00f;" onclick="clickMe()">准备好了就点击这里!</div>
</body>
</html>
作为初学者，体验JavaScript的编写方法与技巧，实现文字切换效果，体验浏览水果名词简要信息如图1-1所示，当点击图片后，显示水果名词详细信息展示，如图1-2所示。
五、评比
检查学生完成情况
六、总结
文字切换
作业实现如下效果：
《猜数游戏页面》
《JavaScript移动开发》课第2单元
课程单元教学设计
（2020～ 2021学年第1学期）
单元名称： 猜数游戏页面
所属系部： 计算机与通信工程学院
制定人： 郑丽萍
合作人：
制定时间： 2020.3
******学院 教务处 制
JavaScript移动开发课程单元教学设计
单元标题：猜数游戏页面
单元教学学时
4
在整体设计中的位置
第2，3次
授课班级
21web班
上课
时间
每周一1,2节
上课
地点
计算机实验室
教学
目标
能力目标
知识目标
素质目标
1.能够声明变量，转换数据类型，实现猜数游戏页面；内置对象Math
2.能够运用流程控制语句和异常处理语句。
掌握语法变量、数据类型的转换、Math、掌握函数的定义和调用。
培养学生利用网络学习新知识的能力；培养学生编写代码规范
能力训练任务
任务：猜数游戏页面
教学组织：
1. 带领学生了解课程任务
2. 讲解JavaScript语法变量、数据类型数据类型的转换；内置对象Math的应用
3. 设计游戏界面及功能的实现
本次课使用的外语单词
div+css
Javascript if else
For for/in while do/while
height width
Math Math.floor Math.random
Prompt parseInt
案例和
教学
材料
案例：猜数游戏页面
教学材料：
1.教材名称：《JavaScript移动开发项目教程（微课版）》,郑丽萍, 人民邮电出版社。
2.参考教材名称：《JavaScript与jQuery案例教程》,郑丽萍，出版社：高等教育出版社。
3.教学多媒体课件，项目源文件。
多媒体资料：http://www.icourse163.org/course/HCIT-1206706828
4.仪器与设备：计算机等
单元教学进度设计（纲要）
步骤
教学内容及能力/知识目标
教师活动
学生活动
时间（分钟）
1情境导入
介绍本节课的教学目标．
导入本次课教学情境
学生了解工作情境
2
2引入
任务：猜数字
交代任务
学生接受任务
3
3知识点讲解
内置对象Math
讲解常用的输入输出语句；
掌握动态数字的输入；
10
讲解Math.random()及Math.random()应用；
掌握Math.floor（）及Math.random()实现随机数字
10
讲解语法变量、数据类型；数据类型的转换；
掌握parseInt数据类型的强制转换；
10
教师巡视，发现问题
使用javascript 实现随机数字，和动态输入及随机数字
15
4 子页面设计
设计子页面界面
教师演示
掌握if else语句的嵌套使用；Do while实现循环多次猜测
10
教师巡视，发现问题
制作子页面界面，实现；猜数游戏功能页面
20
5评比
检查学生完成情况
抽查学生完成情况，讲解出现的问题
演示自己的界面，修改出现的问题
5
6 总结
猜数字页面；
重点强调学生练习中出现的问题
学生思考反馈
5
作业
Javascript常用的循环语句？
课后
体会
一、情境导入
介绍本节课的教学目标
二、引入
任务 ：猜数字游戏页面
三、知识点讲解
JavaScript 可以通过不同的方式来输出数据：
使用 innerHTML 写入到 HTML 元素。
JavaScript 循环
如果您希望一遍又一遍地运行相同的代码，并且每次的值都不同，那么使用循环是很方便的。
不同类型的循环
JavaScript 支持不同类型的循环：
for - 循环代码块一定的次数
for/in - 循环遍历对象的属性
while - 当指定的条件为 true 时循环指定的代码块
do/while - 同样当指定的条件为 true 时循环指定的代码块
类型转换
parseInt (String)
将字符串转换为整型数字
如: parseInt (“86”)将字符串“86”转换为整型值86
parseFloat(String)
将字符串转换为浮点型数字
如: parseInt (“34.45”)将字符串“34.45”转换为浮点值34.4
JavaScript Math（算数） 对象
Math（算数）对象的作用是：执行常见的算数任务。
round()
如何使用 round()。
random()
如何使用 random() 来返回 0 到 1 之间的随机数。
下面的例子使用了 Math 对象的 floor() 方法和 random() 来返回一个介于 0 和 11 之间的随机数：
document.write(Math.floor(Math.random()*11));
四、任务实现
功能实现
var num = Math.floor(Math.random()*100+1); //产生1～100之间的随机整数
do{
var guess =parseInt(prompt("下面进行猜数游戏\n请输入1-100之间的整数：",""));
if (guess ==num){
alert("^_^ ,恭喜你，猜对了，幸运数字是："+num);
break;}
else
{ if(guess > num){
alert("^_^ ,你猜的数字大了");
go_on =confirm("是否继续游戏？");
}
else{
alert("^_^ ,你猜的数字小了");
go_on =confirm("是否继续游戏？");
}
}
}while(go_on);
alert("谢谢参与游戏！");
五、评比
检查学生完成情况
六、总结
循环的应用 ，猜数字页面的实现，
《试卷展示页面》
《JavaScript移动开发》课第4单元
课程单元教学设计
（2020～ 2021学年第2学期）
单元名称： 试卷展示页面
所属系部： 计算机与通信工程学院
制定人： 郑丽萍
合作人：
制定时间： 2020.3
淮安信息职业技术学院 教务处 制
JavaScript移动开发课程单元教学设计
单元标题：试卷展示页面
单元教学学时
2
在整体设计中的位置
第4次
授课班级
16web班
上课
时间
每周一1,2节
上课
地点
计算机实验室
教学
目标
能力目标
知识目标
素质目标
1.能够能够实现数组的新建，数组元素的插入、删除、替换，数组的合并。理解JavaScript数组的动态性。
2.能够实现数组的输出及二维数组的遍历。
掌握Array对象常用方法和属性的访问，了解复合数据类型json
培养学生利用网络学习新知识的能力；培养学生编写代码规范
能力训练任务
任务：试卷展示页面
教学组织：
4. 带领学生了解课程任务
5. 讲解JavaScript二维数组的应用，复合类型json的应用
6. 设计试卷展示界面及功能的实现
本次课使用的外语单词
div+css
JavaScript if else
For for/in while do/while
height width Array
Math Math.floor Math.random
Prompt parseInt
案例和
教学
材料
案例：试卷展示页面
教学材料：
1.教材名称：《JavaScript移动开发项目教程（微课版）》,郑丽萍, 人民邮电出版社。
2.参考教材名称：《JavaScript与jQuery案例教程》,郑丽萍，出版社：高等教育出版社。
3.教学多媒体课件，项目源文件。
多媒体资料：http://www.icourse163.org/course/HCIT-1206706828
4.仪器与设备：计算机等
单元教学进度设计（纲要）
步骤
教学内容及能力/知识目标
教师活动
学生活动
时间（分钟）
1情境导入
介绍本节课的教学目标．
导入本次课教学情境
学生了解工作情境
2
2引入
任务：猜数字
交代任务
学生接受任务
3
3知识点讲解
内置对象Math
讲解常用的数组对象；了解提供数组模型、存储大量有序的数据的Array对象。
掌握数组的新建，理解JavaScript数组的动态性。
10
讲解数组元素的插入、删除、替换，数组的合并的相关应用；
掌握数组元素的插入、删除、替换，数组的合并。
10
讲解实现数组的输出及二维数组的遍历；
掌握实现数组的输出及二维数组的遍历；
10
教师巡视，发现问题
使用数组的输出及二维数组的遍历实现试卷展示
15
4 子页面设计
设计子页面界面
教师演示
掌握使用数组的输出及二维数组的遍历实现试卷展示
10
教师巡视，发现问题
制作子页面界面，实现试卷展示页面
20
5评比
检查学生完成情况
抽查学生完成情况，讲解出现的问题
演示自己的界面，修改出现的问题
5
6 总结
猜数字页面；
重点强调学生练习中出现的问题
学生思考反馈
5
作业
Javascript常用的循环语句？
课后
体会
一、情境导入
介绍本节课的教学目标
二、引入
任务 ：试卷展示页面
三、知识点讲解
JavaScript 可以通过不同的方式来输出数据：
使用 innerHTML 写入到 HTML 元素。
JavaScript 循环
如果您希望一遍又一遍地运行相同的代码，并且每次的值都不同，那么使用循环是很方便的。
不同类型的循环
JavaScript 支持不同类型的循环：
for - 循环代码块一定的次数
for/in - 循环遍历对象的属性
while - 当指定的条件为 true 时循环指定的代码块
do/while - 同样当指定的条件为 true 时循环指定的代码块
表 数组的常用方法
方法名称
意义
示例
toString()
把数组转换成一个字符串
var s=a1.toString() 结果s为a,b,c
join(分隔符)
把数组转换成一个用符号连接的字符串
var s=a1.join("+") 结果s为a+b+c
shift()
将数组头部的第一个元素移出
var s=a1.shift() 结果s为a
unshift()
在数组的头部插入一个元素
a1.unshift("m","n") 结果a1中为m,n,a,b,c
pop()
从数组尾部删除一个元素，返回移除的项
var s=a1.pop() 结果s为c
push()
把一个元素添加到数组的尾部，返回修改后数组的长度
var s=a1.push("m","n")结果a1为a,b,c,m,n同时s为5
concat()
合并数组
a1.concat(a2) 结果a1为数组a,b,c,y,x,z
slice()
返回数组的部分
var s=a1.slice (1,3) 结果s为b,c
splice()
插入、删除或者替换一个数组元素
a1.splice(1,2)结果a1为a
sort()
对数组进行排序操作（默认按字母升序）
a2.sort()结果为 x,y,z
reverse()
将数组反向排序
a2. reverse()结果为z,y, x
二维数组
二维数组的定义是在一维数组基础上定义的，即当一维数组的元素又都是一维数组是，就形成了二维数组，例如：
var submenus =new Array();
submenus[0]= [];
submenus[1]= ["建设目标","建设建设","培养队伍"];
submenus[2]= ["负责人","队伍结构","任课教师","教学管理","合作办学"];
以上的代码也可以表示下列等价代码：
var submenus =new Array(
new Array(),
new Array("建设目标","建设建设","培养队伍"),
new Array("负责人","队伍结构","任课教师","教学管理","合作办学"));
以上代码还可以这样写：
var submenus =[[] ,["建设目标","建设建设","培养队伍"], ["负责人","队伍结构","任课教师","教学管理","合作办学"]];
通过数组名和下标访问数组元素。二维数组的元素必须使用数组名和两个下标来访问，第一个为行下标，第二个为列下标。格式为：二维数组名[行下标][列下标]
数组元素的下标不能出界，否则会显示“undefined”（空值）。
二维数组的数据访问，页面效果如图 所示。代码如下：
四、任务实现
功能实现
<script >
var questions = new Array(); //定义问题数组，用以存储题目
var questionXz = new Array(); //定义选项数组，用以存储题目选项
var answers = new Array(); //定义答案数组，用以存储题目答案
questions[0] = "下列选项中( )可以用来检索下拉列表框中被选项目的索引号。";
questionXz[0]=["A. selectedlndex","B. options","C. length","D. size"];
answers[0]='A'; //问题的答案
questions[1] = "在JavaScript中( )方法可以对数组元素进行排序。";
questionXz[1]=["A. add()","B. join()","C. sort()","D. length()"];
answers[1] = "C"
for (var i = 0; i < questionXz.length; i++) {
document.write(questions[i]+"<br />");
document.write(questionXz[i][0] + "<br />");
document.write(questionXz[i][1] + "<br />");
document.write(questionXz[i][2] + "<br />");
document.write(questionXz[i][3] + "<br />");
document.write('答案是'+answers[i]+ "<br />");
}
</script>
案例拓展：增加布局如：<div id="tmshow"></div>放在script标签的前面。
JavaScript代码循环部分修改如下：
tmshow =document.getElementById("tmshow");
for (var i = 0; i < questions.length; i++)
{
tmshow.innerHTML+=i+1+". "+questions[i] + "<br />"+questionXz[i][0]+ "<br />"+questionXz[i][1] + "<br />"+questionXz[i][2] + "<br />"+questionXz[i][3] + '<br />答案是'+answers[i]+ "<br/>"
}
JavaScript代码循环部分也可以采用双层for循环实现，代码优化如下：
for(var i=0;i<questionXz.length;i++)
{
tmshow.innerHTML+=i+1+"."+questions[i]+"<br/>";
for(var j=0;j<questionXz[i].length;j++)
tmshow.innerHTML+=questionXz[i][j]+"<br/>";
tmshow.innerHTML+=答案是'+answers[i]+ "<br/>"
}
五、评比
检查学生完成情况
六、总结
循环的应用 ，试卷展示页面的实现，
《倒计时及事件管理》
《JavaScript移动开发》课第5单元
课程单元教学设计
（2021～ 2022学年第1学期）
单元名称： 倒计时及事件管理
所属系部： 计算机与通信工程学院
制定人： 郑丽萍
合作人：
制定时间： 2021.3
淮安信息职业技术学院 教务处 制
JavaScript移动开发课程单元教学设计
单元标题：倒计时及事件管理
单元教学学时
2
在整体设计中的位置
第5次
授课班级
16web班
上课
时间
每周一1,2节
上课
地点
计算机实验室
教学
目标
能力目标
知识目标
素质目标
1.能够运用DATE常用的方法
2.能够实现日期的显示；倒计时的实现。
掌握内置对象DATE的常用方法；掌握MUI的事件绑定、事件取消、事件触发、手势事件
培养学生思考问题、分析问题和解决问题的能力。
能力训练任务
任务：运行的时钟的显示；节日倒计时的实现
教学组织：
l 带领学生了解课程任务
l 讲解内置对象DATE的常用方法
l 实现日期的显示；倒计时的实现。
l 实现MUI的事件绑定、事件取消、事件触发、手势事件
本次课使用的外语单词
div+css
JavaScript
DATE getFullYear
getMonth()getDate() getHours( ) getSeconds( ); setTimeout；getTime
案例和
教学
材料
案例：倒计时及事件管理
教学材料：
1. 教材名称：《JavaScript移动开发项目教程（微课版）》,郑丽萍, 人民邮电出版社。
2.参考教材名称：《JavaScript与jQuery案例教程》,郑丽萍，出版社：高等教育出版社。
3.教学多媒体课件，项目源文件。
多媒体资料：http://www.icourse163.org/course/HCIT-1206706828
4.仪器与设备：计算机等
单元教学进度设计（纲要）
步骤
教学内容及能力/知识目标
教师活动
学生活动
时间（分钟）
1情境导入
介绍本节课的教学目标．
导入本次课教学情境
学生了解工作情境
2
2引入
任务：日期显示及倒计时
交代任务
学生接受任务
3
3知识点讲解
日期显示及倒计时
讲解内置对象DATE的常用方法
掌握getFullYear()，getMonth()，getDate() getHours()， getSeconds( )，
10
讲解时钟 的设定
掌握样式的设定，
10
讲解JavaScript 实现实现正在运行的时钟的显示节日倒计时的实现。
掌握javascript中定时器setTimeout；getTime()换成毫秒数计算差值实现效果
10
教师巡视，发现问题
界面样式的设定setTimeout和getTime()的使用
15
4 时钟页面设计
设计时钟页面
教师演示
掌握MUI的事件绑定、事件取消、事件触发、手势事件
10
教师巡视，发现问题
制作页面效果
20
5评比
检查学生完成情况
抽查学生完成情况，讲解出现的问题
演示自己的界面，修改出现的问题
5
6 总结
日期显示及倒计时
重点强调学生练习中出现的问题
学生思考反馈
5
作业
点击按钮展示试卷及考试倒计时
课后
体会
一、情境导入
介绍本节课的教学目标
二、引入
任务 ：试卷动态展示界面的设计
三、知识点讲解
date对象的使用实现正在运行的时钟的显示；节日倒计时的实现
内置对象DATE
内置对象DATE的常用方法getFullYear()getMonth()getDate() getHours( ) getSeconds( ); 定时器setTimeout；getTime()换成毫秒数计算差值;
使用 getFullYear() 获取年份。
getTime() 返回从 1970 年 1 月 1 日至今的毫秒数。
如何使用 setFullYear() 设置具体的日期。
如何使用 getDay() 和数组来显示星期，而不仅仅是数字。
创建日期
Date 对象用于处理日期和时间。
可以通过 new 关键词来定义 Date 对象。以下代码定义了名为 myDate 的 Date 对象：
有四种方式初始化日期:
new Date() // 当前日期和时间
new Date(milliseconds) //返回从 1970 年 1 月 1 日至今的毫秒数
new Date(dateString)
new Date(year, month, day, hours, minutes, seconds, milliseconds)
实例化一个日期的一些例子：
var today = new Date()
var d1 = new Date("October 13, 1975 11:13:00")
var d2 = new Date(79,5,24)
var d3 = new Date(79,5,24,11,33,0)
设置日期
通过使用针对日期对象的方法，我们可以很容易地对日期进行操作。
在下面的例子中，我们为日期对象设置了一个特定的日期 (2010 年 1 月 14 日)：
var myDate=new Date();
myDate.setFullYear(2010,0,14);
在下面的例子中，我们将日期对象设置为 5 天后的日期：
var myDate=new Date();
myDate.setDate(myDate.getDate()+5);
注意: 如果增加天数会改变月份或者年份，那么日期对象会自动完成这种转换。
定时器函数
JavaScript定时器有以下两个方法：
setInterval() ：按照指定的周期（以毫秒计）来调用函数或计算表达式。方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。setInterval()函数用法如下：
setInterval() ("调用函数","周期性执行或调用code之间的时间间隔")，
function hello(){ alert("hello"); }
重复执行某个方法：
var t1= window.setInterval("hello()",3000);
去掉定时器的方法
window.clearInterval(t1);
setTimeout() ：在指定的毫秒数后调用函数或计算表达式。
setTimeOut()函数用法如：setTimeOut("调用函数","在执行代码前需等待的毫秒数。")
只执行一次，3 秒后显示一个弹窗:var t=setTimeout(function(){alert("Hello")},3000)
实现循环调用需要把setTimeout定时器函数写在被调用函数里面。如下：
function show(){
alert("Hello")；
var myTime = setTimeout("show()",1000);
}
关闭定时器的用法：clearTimeOut(myTime);
其中，myTime为setTimeOut()函数返回的定时器对象。
动态改变元素样式
style对象代表一个单独的样式声明。可从应用样式的文档或元素访问style对象。使用 style对象属性的语法：document.getElementById("id").style.property="值"
设置一个已有元素的style属性如下：
document.getElementById("myH1").style.color = "red"; //改变元素内字体的颜色为红色
按钮
mui默认按钮为灰色，另外还提供了蓝色（blue）、绿色(green)、黄色(yellow)、红色(red)、紫色(purple)五种色系 的按钮，五种色系对应五种场景，分别为primary、success、warning、danger、royal；使用.mui-btn类即可生成一个 默认按钮，继续添加.mui-btn-颜色值或.mui-btn-场景可生成对应色系的按钮，例如：通过.mui-btn-blue或.mui-btn- primary均可生成蓝色按钮；
普通按钮
在button节点上增加.mui-btn类，即可生成默认按钮；若需要其他颜色的按钮，则继续增加对应class即可，比如.mui-btn-blue即可变成蓝色按钮
<button type="button" class="mui-btn">默认</button>
<button type="button" class="mui-btn mui-btn-primary">蓝色</button>
<button type="button" class="mui-btn mui-btn-success">绿色</button>
<button type="button" class="mui-btn mui-btn-warning">黄色</button>
<button type="button" class="mui-btn mui-btn-danger">红色</button>
<button type="button" class="mui-btn mui-btn-royal">紫色</button>
若希望无底色、有边框的按钮，仅需增加.mui-btn-outlined类即可，代码如下：
<button type="button" class="mui-btn mui-btn-outlined">默认</button>
<button type="button" class="mui-btn mui-btn-primary mui-btn-outlined">蓝色</button>
<button type="button" class="mui-btn mui-btn-success mui-btn-outlined">绿色</button>
<button type="button" class="mui-btn mui-btn-warning mui-btn-outlined">黄色</button>
<button type="button" class="mui-btn mui-btn-danger mui-btn-outlined">红色</button>
<butt
展开阅读全文
浙ICP备2021020529号-1 | 浙B2-20240490 
