JavaScript移动开发项目教程教学大纲教案.docx

章节或项目名称社会主义核心价值观暮本内容动态展示本次授课类型理论口实脸回理实一体口实训口实习班级地点周次星期节次授课进度319191T-10614五3.4团符合超前口滞后319192TTo6M5.6团符合口超前口滞后319193T-4O6113.4团符合口超前口滞后319194T-106145.6符合口超前口滞后教学目标进一步体会社会主义核心价值观的深刻含义掌握样式的实现颜色搭配视口标签的使用.元素的访问,获得文字容器，,IavaScript定时器的应用实现指定时间后显示数组存放文字,实现内容逐个输出,项目完善拓展教学重点进一步体会社会主义核心价值观的深刻含义；教学难点JaVaSCrlPt定时器的应用实现指定时间后显示；教学设计教学环节内容要点教学方法与手段间配时分思政引入进一步体会社会主义核心价值观的深刻含义师生交流法7呈现新知页面布局，样式的实现颜色搭配,视口标签的使用.元素的访问，获得文字容器任务驱动法10练习JavaScript实现社会主义核心价值观的内容愉出任务驱动法15呈现新知JavaScript定时器的应用实现指定时间后显示数组存放文字,实现内容逐个榆出任务驱动法15练习.IavaScripi实现社会主义核心价值观的内容定时输出任务驱动法15练习及拓展应用项目完善拓展:采用图片后样式的设置案例驱动法25总结深空小结，布置拓展作业师生交流法3教学效果及改进思路通过学习.使学生掌握页面布局及样式的实现颜色搭配.视口标签的使用.元素的访问.获得文字容器.课程名称：JavaScript移动开发授课教师：一一、知识回我们已经学习过了内岂对象数组等相关核心属性和方法应用学生，定义数组社会主义核心价值观从国家、社会、公民三个层面分别例述ch2nShU了价值目标、取向和准则，正确理解社会主义核心价值观的内涵对于传承优秀传统文化基因，增强国家文化软实力，引领社会思潮，凝聚社会共识，具有重要的理论意义和实践意义。社会主义核心价值观从国家、社会、公民三个层面分别阐述ChenShii了价值目标、取向和准则，让我们传承优秀传统文化基因，增强国家文化软实力,引领社会思潮，凝聚社会共识，具有重要的理论意义和实践意义。富强、民主、文明、和谐，是国家层面的价值目标：自由、平等、公正、法治，是社会层面的价值取向:爱国、敬业、诚信、友善，是公民个人层面的价值准则。体现了中国特色社会主义的价值追求反映了社会主义社会的基本属性是对美好社会的生动表述也是中国共产党矢志不渝、长期实践的核心价值理念。二、目标任务展示：社会主义核心价值观立本内容动态展示同学们好，今天我们介绍JaVaSClip(移动开发的第8讲，来实现社会主义核心价值观基本内容的动态展示效果，我们使用chrome浏览港来模拟移动设备的效果，它可以模拟多种移动端设备的效果，我们选择常用的iPhonc678型号来看相应的效果。这就是这次课要实现的文字动态输出的效果.社会主义核心价值观大家都很熟悉。而旦都能够背诵下来。(1)社会主义核心价值观及其含义师生交流：提向学生，回答含义.富强、民主、文明、和谐，是我国社会主义现代化国家的建设目标，也是从价值目标层次对社会主义核心价值观基本理念的凝练，在社会主义核心价值观中居于最高层次，对其他层次的价值观具有统领作用。自由、平等、公正、法治，是对美好社会的描述，也是从社会层面对社会主义核心价值观基本理念的凝练。爱国敬业诚信友善，是公民基本道德规范，是从个人行为必面对社会主义核心价值观基本理念的凝练。它覆盖了社会主义道德生活的各个领域，是公民必须恪守的基本道镌准则，也是评价公民道德.行为选择的基本价值标准。(2)旗色搭配今天我们要实现社会主义核心价值观基本内容的动态展示效果.页面中要有布局实现文字的容纳。然后要选择一个合适的色彩搭配。对于思政项目网站,通常我们用红底黄字的效果.明亮又能体现思政项目的含义。三、知识讲授与学生实践I林式的实现包搭配(1)页面的基本布局<divid="box"><h4>社会主义核心价值观<M><div>设置容器来展示(2)页面背景色及文字的样式设置bodybackground-color:red;/*页面背一色的设?t#D52019;*/font-size:2.5cm:*页面文字的设置”/color:yellow;loin-weight:bold;)视口标签的使用<metanane="viewort"content="width=device-widh,initial-scale=I">例I前面的案例增加动态访问指定的行功能，核心代码：background-color:red;学生，动手实践实现样式设置四、知识讲授与学生实践，动态效果的实现文字出(1)元素的访问,获得文字容器varbox-docunent.getElenentByld("box");一获取一来展示的兀素box.inncrHTM1.+="南强民主显示<2)定时器的应用实现指定时间后显示setTimeout("show()",1000);"1杪钟前调用函数AhOW()functionshow()box.inncrHTM1.+="富强民主”；/显示I(3)作品展示与解析：作品展示，解析，调试bug,指出核心问题，引导学生对同类型问题的查找，运用技巧改正修更bug。五、案例拓展<1)数蛆存放文字，并显示VarSz=富强民主"文明:"和谐","自由"平等","公正",“法治"爱国二“敬业诚信友善box.innerHTM1.+=sz;显示例I数组元素的输出，核心代码：输出所有SZ输出指定下标的元素szO:输出SZjOin("")学生I获取页面元素和输出数组到页面显示(2)内容逐个输出functionshow()box.inncrHTM1.+=sz(indcx+""：显示varmyTine=null;myTimc=sctHmcout("show()".600);“跳动切换控制边界(3)作品展示与解析：作品展示，解析,调试bug,指出核心问题，引导学生对同类型问题的直找,运用技巧改正修城bug。(4)项目完善：采用图片后样式的设布局增加图片,样式修改(5)相仿案例实现I课堂点名器学生：实践操作六、爆卷小结对课堂上讲解的知识点进行总结，使用随堂练习题巩固本节课的知识点。布置本次课对应的线上单元测试，预习下次课对应知识点的微课。其做单元的课程患政议其他单元的课程思政建议如：生鲜购物车改成：特产购物车，在线测试系统改成：党史专题测试系统等等，这样教材中的功能代码和实现逻辑几乎不变，主要有js知识题目换成党史题目，特产购物车也是如此<JavaScript初探UavaScript移动开发课第1单元课程单元教学设计（2020-2021学年第1学期）单元名林：JaVaSCriPt初探所属系部：计算机与通信工检学丁制定人：赤丽.合作人：.制定时间：2020.3*学院教务处制JavaScript移动开发课程单元教学设计单元标题:JavaScrip七初探单元教学学时2在搂体设计中的位置第1次校课班级16web班上课时间每周一1,2节上课地点计算机实脸室教学目标能力目标知识目标素质目标1 .能燃使用多种方爰引入JaVaSCriPt脚本代码到HTM1.文档中。2 .能够使用常用的输出语句。3 .能修获取元素并改变元素内容。了解JavaScript同史和引擎的工作原理。学坯JavaScript的纽成、主妥特点和相关应用。树立学习信心；培养讨论思考的习惯能力训练任务任务:JaVaSCriPt初探教学组织：1.带领学生了解课程任务2,讲解JaVaSCriPt筒史及机关术语3,引入JavaScript脚本代码到HTM1.文档中,使用常用的输出语句本次课的单词JavaScriptWebfunctiondocumentgetEIementByIdinnerHTM1.案例和教学材料案例：JaVaSCriPt沏探-文字的切换教学材料:1.教材名称：JavaScript移动开发项目教程（然课版），郑丽芬，人民邮也出版社。2 .参考教材名称：JavaScript与juery案例教程，郑丽萍，出版社：高等教育出版社。3 .教学多媒体深件，项目源文件。多娱体资料：http:/WWw.icours163.org/course/HCIT_12067068284 .仪器与谀备:计算机等单元教学进度设计（纲要）步辣教学内容及能力/知识目标救婶活动学生活动时间（分）1情境导入介绍本节课的教学目标.导入本次课教学情境学生了解工作情境22引入任务：JavaScript初探-文字的切换交代任务学生接受任务33知识点讲解JavaScript初探讲解JaVaSCriPt简史及.相关术语T解JavaScript简史及相关术语10讲解JaVaSCriPt引擎的工作原理了解JavaScript引擎的工作原理10讲解引入JavaScript的本代码到HTM1.文档中方法掌握引入JavaScript脚本代码到HTM1.4中方法10按师巡视，发现问题多种引入方爰练习154实践JavaScript初探-文字的切换故师演示掌握常用的饰出洁句方法10技师巡视，发现问叁常用的输出语句练习205评比性查学生完成情况抽受学生完成情况,讲解出现的问趋演示自己的界面，修改出现的问趋56总结JavaScript初探支点强调学生练习中出现的问题学生思考反馈5作业Javascript的主要特点？课后体会一、情境导入介绍本节课的教学目标二、引入任务：JavaScript初探-文字的切换三、知火点讲解术语"ECMAScrip1.和“JavaScript指的是同一个东西。但如果把JavaScript看成是wMozilla或其他组织的ECMAScript实现“，那么ECMASCriPt就是实现JavaSCriPt所依据的标准。术语“ECMAScript”也用来描述语言版本(比如ECMASCriPt5).JUvaSCriPI解析引孽就是能够“读懂"JaYaSCriPI代码，井准确地给出代码运行结果的一段程序。比方说，当编写fVara=I+1：这样一段代码，JavaScript引整做的事情就是看懂(解析)你这段代码，并且将a的值变为2,JavaScript引擎就是直接解析并将代码运行结果输出的JavaScript的解释器JaVaSCriPt由三部分组成： 核心(EeMASCript)描述了该语言的语法和基本对象 文档对彖模型(DOM，DOCUmnet)描述了处理网页内容的方法和接口 浏览器时象模型(BOM)描述r与浏览器进行交互的方法和接口JaVaSCriPt的主要特点JavaScript相关应用选择JavaScript脚本编辑器引入JavaScript脚本代码到HTM1.文档中方法Javascript常HJ的输出语句： 使用VVindOW.alert。曲出警告框。 使用document.write()方法将内容写到HTM1.文档中. 使用InnerHTM1.写入到HTM1.元素。 使用COnSoIe.log()写入到浏览器的控制台。边改边看有2个控制台，默认控制台显示在HBUiIder下方，直接输出了Iog和错误日志。控制台显示了代码行号，点击后可直接转到该行代码，如图所示Chrome调试效果。边改边看是轻量级的界面调试工具，如图1-12,最方便最常用。在HBUiMer右上角切换开发模式，可以选边改边看方式，切换模式的快捷键是Ctrl÷p0进入边改边看后，左边显示代码，右边显示浏览器。边改边看有2个控制台，默认控制台显示在HBUiIder卜方，直接输出了Iog和错误日志。控制台显示了代码行号，点击后可直接转到该行代码，如图所示.四、任务实施documet.getEementByld("demo),使用id属性来查找id为demoHTM1.元素,然后给它的innerHTM1.属性重新的赋值为新的字符串,就有了我们看到的切换文字的效果，<!DOCTYPEhtml><html><head>VmetaCharsei=fUTF-8'><titte>SamplePa9e<titl><ead><body><$Cripl>functionclickMe<)(documentgetElemetByld('de11>o*).innerHTM1.=开始学习JavaScnpt!")<script><divd=,demo*style="fonlamiM微软雅圾'；font-s(ze:36px;COtorffoOf:“Ondick二ZickMe<)f准备好了就点击这里!<di><body><html>作力初学者，体验JaVaSCrM的编写方法与技巧,实现文字切换效果,体验浏览水果名词简要信息如图1-1所示,当点击图片后,显示水果名词详细信息展示,如图1-2所示。菠萝蜜菠萝蜜XM三r<SB.HH.*3*M.也超心R上的水a.Ti法&20公斤,0M59公斤.”UikcxxeaA.BH.W.三J:WfflM5).*2；四*.M4S*ta;B9*WKHff.3XMX.««M.BttanBMKICHtfWI.五、评比检杳学生完成情况六、总结文字切换作业实现如卜效果：裨国湾楙树湾«9*trmww*s-.tiGA*Ajusae万猜数游戏页面UavaScript移动开发课第2单元课程单元教学设计（20202021学年第1学期）单元名林：猜数游戏页面所属系部：计算机与通信工检学丁制定人：赤丽.合作人：.制定时间：2020.3*学院教务处制JavaScript移动开发课程单元教学设计单元标题：精数游戏页面单元教学学时4在整体设计中的位正第2,3次校课班级21web班上课时间每周一1,2节上谭地点计算机实验室救学目标能力目标知识目标素质目标1.能够声明变量，转换或据类型，实现精数游戏.页面：内起对象Math2.能物运用流程控制话句和异常处理语句。学握语法变量、敦据美型的转接、Math、掌握函效的定义和调用。培忝学生利用网络学习新知识的能力：培养学生编写代码规范能力训练任务任务：精数游戏员面教学组织：1 .带4真学生了耨课程任务2 .讲解JaVaSCriPt语法变量、数据类型数据类型的转换；内置对象Math的应用3 .设计游戏界面及功能的实现本次课使用的外语单词div÷cssJavascriptifelseForfor/inwhiledo/whiIeheightwidthMathMath.floorMath.randomPromptparseInt案例和教学材料案例:猜数游戏页面教学材料：1 .板材名称：JavaScript移动开发项目教程（微课版），郑丽萍，人民邮电出版社。2 .参考教材名称：JavaScript与JQUery案例教程，郑丽萍，出板社：高等校育出版社.3 .教学多媒体课件，项目通文件。多媒体资料：httpwww.icourse163.org/course/HCIT-12067068284 .仪客与设备:计算机等介绍本节课的教学目标二、引入任务：猜数字游戏页面三、知识点讲解JavaScript<4以通过不同的方式来输出数据：使用innerHTM1.写入到HTM1.元素。JavaScript循环如果您希望一遍又一遍地运行相同的代码，并且每次的值都不同，那么使用循环是很方便的。不同类型的循环JavaScript支持不同类型的循环：for-循环代码块一定的次数for/in-循环遍历对象的属性while-当指定的条件为true时循环指定的代码块do/while-同样当指定的条件为IrUe时循环指定的代码块类型转换parselnt(String)将字符串转换为整型数字如:ParSemt(“86”)将字符串“86”转换为整里值86ParseFIoat(Stnng)将字符串转换为浮点型数字如:ParSelnt(“34.45")将字符串“34,45”转换为浮点值34.4JavaScriptMath（算数）对象Math(算数)对象的作用是：执行常见的算数任务。roud()如何使用round()oradom()如何使用random()来返回0到1之间的随机数。下面的例子使用了Math对象的floor)方法和random()来返回一个介于。和11之间的随机数：document.write(Math.floor(Math.randomOll);四、任务实现功能实现varnum=Math.floor(Math.random()*100+1);产生.l-100之间的随机整数do(varguess=ParSeInt(PromPte卜.面进行猜数游戏n请输入I-100之间的整数：丁)；if(guess=num)alertU.恭喜你，猜对了,幸运数字是："+num)：break;elseif(guess>num)alert("-,你猜的数字大厂)：go_on=COnfirmc"是否继续游戏？elseJavaScript移动开发课程单元教学设计单元标题：试卷展示页面单元教学学时2在整体设计中的位正第4次校课班级16web班上课时间每周一1,2节上谭地点计算机实验室做学目标能力目标知识目标素质目标1 .能够能,够实现教组的新迂，数组元素的插入、删除、替换，敦组的合并。理解JavaScript教组的动态性.2 .能够实现数组的输出及二维敷组的遍历。掌握Array对象常用方法和属性的访问，了解复台数据英型json培养学生利用网络学习新知识的能,力；培养学生编写代码规范能力训练任务任务：试卷展示页面故学组织：4,带4员学生了解课程任务5 .讲相JaVaSCriPt二维数组的应用，复合类型json的应用6 .谩计试卷展示界面及功能的实现本次课使用的外语单询div÷cssJavaScriptifelseForfor/inwhiledo/whiIeheightwidthArrayMathMath.floorMath.randomPromptparseInt案例和教学材料案例：试卷展示页面校学材料：1 .教材名称：JavaScript移动开发项目教程微课版），郑丽萍，人民邮电出版社。2 .参考教材名称：JavaScript与JoUery案例教程，郑丽萍,出版社：高等教育出版社.3 .教学多媒体课件，项目通文件。多媒体资料：httpww.icourse163.org/course/HCIT-12067068284 .仪客与设备：计算机等一、情境导入介绍本节课的教学目标二、引入任务：试卷展示页面三、知火点讲解JaVaSCrlPt可以通过不同的方式来输出数据：使用innerHTM1.写入到HTM1.元素。JavaScnpt循环如果您希望迪乂遍地运行相同的代码，并I1.每次的值都不同，那么使用循环是很方便的.不同类型的循环JavaScript支持不同类型的循环：for-循环代码块定的次数for/in-循环遍历对象的属性while-当指定的条件为true时循环指定的代码块do/while-同样当指定的条件为true时循环指定的代码块*敬俎的常用方法方送名林义示例xoanngO杞数组轮投成一个翔出r5=al.toStr11g(>饴果5为,bcIOe分隔物怛数烯眄校成一个用符号正接的字符率vurs=al.j11C,3铉SB%为a*b*cSi11O再做继头弟的第一个凡索格出v(3ai.5NftO给聚3力8UnshttO在兹坦的4部卷人T元第ggm11n二)络双羽中为m.na©JCPoPD从效俎尾毋需除一个元素,遮E3哪除的项var5=l.pop<结果为CPUShQ杞一个元素添加为IMa的尼部,返33修改后敛蛆的长度nrA:nl.pu5hCm.F1结果al为JlECJnn月罚5为5COnatO合并跌势alccncat<a2结粤a为数担mJDQyX2GCeO谢叵兹研的筋分v3rS=a1.slkc(1)蛀豪%为bt州视0临人.*徐磷看使用一个鼓组1.IraMce(1.2)站果81为8WXlO时0组遂行掷柞31.作（常队按字母升序）QaE出翼为M.y2cvcto;将敷组反向排部92rvcW结粤力Zyxdocumentv>nte(,SSJE,*answersf*<bf>>);<*,¼crip<>案例拓展：增加布局如：<divid="lmshow"xAI2放在script标签的前面。JavaScript代码循环部分脩改如下：tms<jw=docmeruoeiEementByIdCmShM)；for(vari=(i<questionslength;÷+)(tmshow.innefHTM1.*=i41""questifsi,<br>*questionXz(i(0*<br>,quest)X2l"<br>,÷queston×z()(2*"<br>÷questK)11X2113*'<b">答案是"answeIH<t>r>>>JavaScript代码Ift环部分也可以采用双层for循环实现.代码优化如下：for(var=Oii<QuestoXz.tength,*)tmshAi11nerHTM1.*=i+lquest>o11s(i)÷*<br>"for(vari=04<questionXzf.lengthj+-t)trtshow.ierHTM1.=quest>oXz(ij*-',<br>"【mshowinnerHYM一二答案是'+answers+"<br>')C127A0.133MM？r*etm11.下列份酬中()6以用聚怆素下投列表松中帽名：fi的索弓；0A.Selectedlndex.optionsC. lengthD. sizeSXAA2.在JaaSCriPt中()方法研J俎元素进行琲序.A.add().join0C.soctOD.IengthQMUK五、邰比检查学生完成情况六、总结循环的应用，试卷展示页面的实现,单元教学进度设计（纲要）步辣教学内容及能力/知识目标教师活动学生活动时间（分钟）1情境导入介绍本节深的教学目标.导入本次深教学情境学生了解工作情境22引入任务：日期显示及倒计时交代任务学生接受任务33知识点讲解日期显示及倒计时评解内儿对象DATE的常用方法掌握getFulIYear(),getMonth0,getDate()getHoursO,getSeconds(),10讲解叶仲的设定掌握样式的设定，10讲解JaVaSCriPt实现实现正在运行的时钟的显示节日倒计时的实现。掌握javascript中定时器SetTimeout:getTime（）换成受秒数计算是值实现效果10教师巡视，发现问题界面样式的设定SetTimeout和getTime0的使用154时钟页面谈计设计时钟页面教师演示掌握MUl的事件绑定、事件取消、平件触发、手势事件10教师逖视，发现问题制作页面效果205评比检查学生完成恬况柚查学生完成情况，讲解出现的问题演示自己的界面.修改出现的问超56总结日期显示及倒计时空点强调学生练习中出现的问题学生思考反馈5作业点击按钮展示试卷及考试倒计时课后体会一、情境导入<buttontype='button*class=*mui-btnmuibtnroyal,>fe</button>若希也无底色.有边框的按钮,仅需堵加muibmOUHined类即可，代码如下：<buttontype='button'class=*mui-btnmui-btn-outlined>>Ki<button>VbUUglype="bulk>n*C尿dnuib<nnu-IxivprinuryminbInpiHlinc>低色ShHIuiA<btftcMilypc=,'btt<*11*clas?;=*fnuib<nmuiNn-Micccvsmuib<noutlined”,绿色<mlton><bu(ontype='button*class=*mui-b<nmui-b(n-wamingmuibnQUUinCd">黄色<tnlton><buonIyPC1.bUnOffclas=*muib<nmui-b(n-<lancrmui-IxibMUirtCd>红色ybunonvbuUonlyxr="butt<m*class=*nui-blnmui-Mn-yalItIUiHItYxnIllIe<>紫色<bulk>n>MUl-事件管理及自定义事件1.,件绑定可以使用addEvent1.istene0方法监听某个相定元度上的的的卜，也可以使用.on()方送实现妣元京的事件绑定.addEvent1.istener示例(单个族叫牛IS三):mui.pliRcady(function()documentgetEementByld(butl').addEentUstener(,tap,functonOatert(l);)；)；Ono示例，适用于批量元素绑定.演示代码：<divclass="mul-contenf><ulid=*6t,>小明vH><i>½<i><li>小的<ll><ul><div><body><SC11pttpe="xe×tjav3scnpt,'>mul.j>lusReady(functlon()mui(iltl,).on(tap'r'li,rfunction(Hvarthi(Htrnl=this.innerHTM1.；aen(thisHtml);)；)；<script>2、事件取i#使用Ono方法绑定事件后，若希里JR酒绑定,贝何以使用。制方.mui('*lirtl')-off(tap,'li,);3、事件触发使用mui.trigger<)方法可以动态触发特定DOM元素上的事件.varbtnctocument.getElementByld("iubmit');监听点击事件btna<i<iVent1.isteneri'tap',function0consolelog!'tapeventt11ser")4);性发submrt按钿的点击学件mui.triggw(btn,'tap);4 .手势事件在开发移动端的应用时，会用到很多的手劳模作，比如滑动.长技等，为了方便开放者快速集成这些手电,mui内置了常用的手势事件,目前支持的手势事件见如下列表.点击tap彳I山屏糕doubletap<i>:,f'.-长按Iongtap氏按冰能hold按住屏窑release离开屏滑动Swipefcft向左滑动swiperight向右滑动Swlpeup向匕计动swipedown拖动dragstart开始拖动drag拖动中dagend拖动结束5 .Sl定义件在App开发中，嫂常会遇到页面间传佰的需求,比如从新间列表页进入详情页，需要将新(8)idISiSiZt去；HtmISPIus规范设计了evaUS方法来解决该问寇；但evaS方法仅接收字符串参数，涉及多个参效时,需要开发人员手动拼字符申；为静化开发，m3框架在evaIJS方法的基破上,封装了自定义事件，通过自定义事件,用户可以轻松实现多WebVIeW向座传递.添加自定义事件监听操作和标准js事件监听类似,可直接通过window对象添加,如下：wlndow.addEventUstener('customEver>f,funcOon(even)mu<.toast('ok'););6 .触发自定义事件通过muifre方法可触发目标窗口的自定义事件：参数targetType:WebwewObjectn传':'Jll而webviewevent<SCript>在浏览器中查名页面时，输出结柒如下图所示。3>b)图动态时钟效果施行时刻的因同显示b施行一收前间和府的笈裳考试倒计时的实现。首先添加一个出以用来显示动态倒计时，设置属性id,代码如下：<<vjd三*,tme"><div>然后编写一个样式表设置div的样式。<stytetype="te×tcss,'>和meh的M100px;background:url(imgjz3.g<f)no-repeat:padding:20px126px;COtof：*。OOOFF;font-size：28p×)<style>场写时钟显示的日期对象代码VSCnPl>vartime=docm11tgetElmentByki(,tim,);YarkS=newDateQ:获得当前时问,设为考试开始时间varmsks=ksgetTme();“换成亳秒数varjs=msks÷60604000.考试结束时间的豪秒ItfunctionjSOV()(varSyfz:MathflooaQsFewDate().getTime()/(100o60»计算弼金的分钟敢varsyn=Mathfloor(fts-newDa<e()getme<)-syf24000，60V1(XX);计算剩余的秒数rf(syz<5timestyleb9ckground="rl(imggl.grf)noTspeaf”更换为紧张的图片背景f(syfz<3)timestyIebackgrcund=,url(imgZjz2.grf)norepemf:更换为紧强流汗的图片背景f(sfz<O)WGradeO”的间到自动提交试卷.清除定昵器twne.innerHTM1.=*:clearlterval(timelD);elseIiEeinnerHTM1.F寓考试结束还砂+sy“分'sym+“杪：dv中SI示当前的第余时间<ahref="*"class=*navtopqr”>确认<a><div>使用javascript访问元素的样式document.getElementById(menu).style,color='green'rcpass.style,display*J='block'<!DOCTYPEhtml><html><hoad><metacharset=*ulf-8>><mctaname="viewport"contcnt=wwidth=devicc-width,initialscale=1,minimum-seale-l,maximum-sealel,user-scalable=no*><litle><litle><scriptsrc=-jsmui.rain,js*><script><linkhref=*cssnui.min.css*ro1=*sty1esheet*><linkhref=*,cssnycss.css*rel=*stylesheet*><scripttype=*text/javascript*CharSet="utf-8”>mui.init():<script><head><body><headerClaSS="mui-barmui-bar-nav*><hlCIaSS="mui-title”>登录<hl><header><divclass=*mui-content*><formclass=*mui-input-group*name="regfOrn><divc1ass=,mui-input-row">Cabe1>账号/label)< inputIyPe="Iext"class=*nui-inputc1ear"placeholder="iftl入用户名"name="user”>< !<spanid=*userlnfo*class=*pc*><span>><div>< divclass=,mui-input-row"><label>密码"label)案例：用户叠J及密码修改界面的严建脸证物学材料：案例和1.教材名称：JavaScript移动开发项目教程纸课版），郑丽萍，人民邮电出版社。教学2