我和宠物做朋友教案小精灵网站,iis怎么使用来建设一个网站,新网站怎么做友情链接,做网站用什么服务器好https://blog.csdn.net/hanhanwanghaha宝藏女孩 欢迎您的关注#xff01; 欢迎关注微信公众号#xff1a;宝藏女孩的成长日记 如有转载#xff0c;请注明出处#xff08;如不注明#xff0c;盗者必究#xff09; 开头先分享个有趣的哈哈哈 承包了我一天的快乐秧 点击此处… https://blog.csdn.net/hanhanwanghaha宝藏女孩 欢迎您的关注 欢迎关注微信公众号宝藏女孩的成长日记 如有转载请注明出处如不注明盗者必究 开头先分享个有趣的哈哈哈 承包了我一天的快乐秧 点击此处给你带来快乐 独乐乐不如众乐乐哈哈哈哈 我真的很不错耶耶耶你也真的很不错耶耶耶。要做就要做最好的不要等到明天再说真的可惜我知道我能做到的就是不停不停不停不停不停不停的努力。哈哈哈哈哈哈哈哈哈哈哈哈 对了前两天有粉丝私聊我问我为什么运行出来前端没有图这是由于我们是通过JS到后端去拿的都没有连接后端的话就肯定看不到鸭 这是前面几部分的内容嘿嘿嘿 第一部分 第二部分 第三部分 第四部分 第五部分 目录一、反馈意见1.1如何实现点击反馈意见跳转到feedback.html页面1.2着手feedback页面二、首页轮播的点击事件三、完善关于我们四、增加联系我们版块五、换我的底部选项卡图标六、忘记密码七、完善登录页面八、导航一、反馈意见 1.1如何实现点击反馈意见跳转到feedback.html页面 首先去到my.html首先设置id“btnfeedback” my.html 并且为其在my.html中添加点击事件 my.html例如 !doctype html htmlheadmeta charsetUTF-8title/titlemeta nameviewport contentwidthdevice-width,initial-scale1,minimum-scale1,maximum-scale1,user-scalableno /link hrefcss/mui.min.css relstylesheet //headbodydiv classmui-contentul classmui-table-viewli idbtngotoorderlist classmui-table-view-cella classmui-navigate-right我的订单/a/lili classmui-table-view-cella classmui-navigate-right修改密码/a/lili classmui-table-view-cell idbtnfeedbacka classmui-navigate-right反馈意见/a/lili classmui-table-view-cell idbtnaboutUsa classmui-navigate-right关于我们/a/lili classmui-table-view-cell idbtnlogouta classmui-navigate-right退出系统/a/lili classmui-table-view-cell idbtncontactusa classmui-navigate-right联系我们/a/li/ul/divscript srcjs/mui.min.js/scriptscript typetext/javascriptmui.init()document.getElementById(btnaboutUs).addEventListener(tap,function(){var webview mui.openWindow({url:aboutUs.html,extras:{name:wangtiantian , //扩展参数time:2020-12-5}}); // console.log(123) 用来调试代码})document.getElementById(btncontactus).addEventListener(tap,function(){var webview mui.openWindow({url:contactus.html,extras:{name:wangtiantian , //扩展参数time:2020-12-5}}); // console.log(123) 用来调试代码})document.getElementById(btngotoorderlist).addEventListener(tap,function(){mui.openWindow({url:myorderlist.html,id:myorderlist.html});}); document.getElementById(btnfeedback).addEventListener(tap,function(){mui.openWindow({url:feedback.html,id:feedback.html});}); document.getElementById(btnlogout).addEventListener(tap,function(){localStorage.removeItem(id);localStorage.removeItem(truename);localStorage.removeItem(address);localStorage.removeItem(tel);mui.openWindow({url:login.html,id:login.html});});/script/body/html这样这个点击事件就实现了。 1.2着手feedback页面 新建一个HelloMUI项目,在example里面找到feedback的页面复制进来 从代码中我们可以看到feedback的样式没有拿过来在新建的HelloMUI项目里面找到feedback.html直接复制粘贴到自己的项目中 记得改下 下面的路径哈哈哈 feedback.html !doctype html html langen classfeedbackheadmeta charsetUTF-8 /meta nameviewport contentwidthdevice-width,initial-scale1,minimum-scale1,maximum-scale1,user-scalableno /title问题反馈/titlelink relstylesheet typetext/css hrefcss/mui.min.css /link relstylesheet typetext/css hrefcss/feedback.css /style typetext/css#tbquestion{height: 300px;}.dm-btn{display: block;width: 100%;height: 50px;background-color: pink;}/style/headbodyheader classmui-bar mui-bar-nava classmui-action-back mui-icon mui-icon-left-nav mui-pull-left/abutton idsubmit classmui-btn mui-btn-blue mui-btn-link mui-pull-right/buttonh1 classmui-title问题反馈/h1/headerdiv classmui-contentdiv classmui-content-paddeddiv classmui-inline问题和意见/diva classmui-pull-right mui-inline href#popover快捷输入span classmui-icon mui-icon-arrowdown/span/a!--快捷输入具体内容开发者可自己替换常用语--div idpopover classmui-popoverdiv classmui-popover-arrow/divdiv classmui-scroll-wrapperdiv classmui-scrollul classmui-table-view!--仅流应用环境下显示--li classmui-table-view-cell streama href#桌面快捷方式创建失败/a/lili classmui-table-view-cella href#你家的蛋糕太甜了/a/lili classmui-table-view-cella href#送得太慢了简直龟速/a/lili classmui-table-view-cella href#有点小贵配不上价格/a/lili classmui-table-view-cella href#送蛋糕的小姐姐好漂亮/a/li/ul/div/div/div/divdiv classrow mui-input-rowtextarea idtbquestion classmui-input-clear question placeholder请详细描述你的问题和意见.../textarea/divdiv idimage-list classrow image-list idtbimg/divpQQ/邮箱/pdiv classmui-input-rowinput typetext idtbqqoremail classmui-input-clear contact placeholder(选填,方便我们联系你 ) //divform classmui-input-groupbutton typebutton classdm-btn idsend发送/buttondiv /div/form/divscript srcjs/mui.min.js/scriptscript srcjs/feedback.js typetext/javascript charsetutf-8/scriptscript typetext/javascriptmui.init();mui(.mui-scroll-wrapper).scroll();document.getElementById(send).addEventListener(tap,function(){var vquestiondocument.getElementById(tbquestion).value;var vtbqqoremaildocument.getElementById(tbqqoremail).value;//var requrlhttp://192.168.43.242:8080/SweetyManage/JavaApivar requrllocalStorage.getItem(requrl);console.log(vquestion);console.log(vtbqqoremail);mui.ajax(requrl,{data:{rnum:12,question:vquestion,qqoremail:vtbqqoremail,},dataType:json,//服务器返回json格式数据type:post,//HTTP请求类型timeout:10000,//超时时间设置为10秒headers:{Content-Type:application/x-www-form-urlencoded},success:function(data){mui.toast(反馈成功!);//console.log(JSON.stringify(data)); // setTimeout(function(){ // mui.back(); // },2000);}});});/script/body/html连接后端 数据库 java函数 //获取反馈信息protected void getFeedback(HttpServletRequest request, HttpServletResponse response) throws IOException{String questionrequest.getParameter(question);String img;String qqoremailrequest.getParameter(qqoremail);String StrSql1insert into tbfeedback (question,img,qqoremail) values (?,?,?);ListObject params1 new ArrayListObject();params1.add(question);params1.add(img);params1.add(qqoremail);DBHelper Dalnew DBHelper();Dal.excuteSql(StrSql1, params1);response.setCharacterEncoding(utf-8);response.setContentType(text/json;charsetutf-8);response.getWriter().write({\msg\:\ok\});}二、首页轮播的点击事件 目前的水平只能写死的等哪天有空了去找老师研究活的 去后端看商品的id 再修改到前端 在index.html中写点击事件 index.html !DOCTYPE html htmlheadmeta charsetutf-8meta nameviewport contentwidthdevice-width,initial-scale1,minimum-scale1,maximum-scale1,user-scalableno /title/titlescript srcjs/mui.min.js/scriptlink hrefcss/mui.min.css relstylesheet /style typetext/css.mui-slider-item img{width: 100%;height: 400px;}/style/headbodydiv idslider classmui-sliderdiv classmui-slider-group mui-slider-loop!-- 额外增加的一个节点(循环轮播第一个节点是最后一张轮播) --div classmui-slider-item mui-slider-item-duplicate dir29a href#img srcimgs/cake_one.jpg /a/div!-- 第一张 --div classmui-slider-item dir26a href#img srcimgs/cake_two.jpg/a/div!-- 第二张 -- div classmui-slider-item dir27a href#img srcimgs/cake_four.jpg/a/div!-- 第三张 --div classmui-slider-item dir28a href#img srcimgs/cake_six.jpg/a/div!-- 第四张 --div classmui-slider-item dir29a href#img srcimgs/cake_seven.jpg/a/div/divdiv classmui-slider-indicatordiv classmui-indicator/divdiv classmui-indicator/divdiv classmui-indicator/divdiv classmui-indicator/div/div/divscript typetext/javascript charsetutf-8mui.init();mui(#slider).on(tap,div.mui-slider-item,function(){var currentidthis.getAttribute(dir);mui.openWindow({url:proview.html,id:proview.html,extras:{proid:currentid}});});//定时轮播一秒钟轮播一次mui(#slider).slider({interval: 1000});/script/body/html三、完善关于我们 aboutUs.html !doctype html htmlheadmeta charsetUTF-8title/titlemeta nameviewport contentwidthdevice-width,initial-scale1,minimum-scale1,maximum-scale1,user-scalableno /link hrefcss/mui.min.css relstylesheet /style typetext/css#anthorBox{height: 8px;white-space:pre;}/style/headbodyheader classmui-bar mui-bar-nava classmui-action-back mui-icon mui-icon-left-nav mui-pull-left/ah1 classmui-title关于我们/h1/headerdiv classmui-contentdiv classmui-contenth3 styletext-align: center;甜甜屋app简介/h3nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;甜甜屋商城是一款购蛋糕的app随着互联网时代的到来蛋糕的线上营销出现了——甜甜屋商城是一项基于实体店的服务型商城。它可以实时更新每日的特色蛋糕它的主要工作是推出当天的时鲜蛋糕用户可以实时预定并且蛋糕可以准时送货上门最大限度地提高用户的体验感。h3 styletext-align: center;版权声明/h3h5总则/h5nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;用户在接受甜甜屋服务之前请务必仔细阅读本条款并同意本声明。用户直接或通过各类方式如站外API引用等间接使用甜甜网服务和数据的行为都将被视作已无条件接受本声明所涉全部内容若用户对本声明的任何条款有异议请停止使用甜甜网所提供的全部服务。br声明内容brnbsp;nbsp;nbsp;nbsp;nbsp;nbsp;1、用户发表在的原创文章、评论、图片等内容的版权均归用户本人所有。brnbsp;nbsp;nbsp;nbsp;nbsp;nbsp;2、用户从或其他网站通过转载、复制、截图等方式获取他人内容并发布在的相关内容的版权属于原作者。用户不得侵犯他人包括版权在内的知识产权及其他权利。因用户发布他人作品引发知识产权或其他法律纠纷的用户须自行承担一切后果与无关。brnbsp;nbsp;nbsp;nbsp;nbsp;nbsp;3、提供的网络服务中包含的标识、版面设计、排版方式、文本、图片、图形等均受版权、商标及其它法律保护未经相关权利人含甜甜网及其他原始权利人同意上述内容均不得在任何平台被直接或间接发布、使用、出于发布或使用目的的改写或再发行或被用于其他任何商业目的。brnbsp;nbsp;nbsp;nbsp;nbsp;nbsp;4、有权但无义务对用户发布的内容进行审核并有权根据相关证据结合《侵权责任法》、《信息网络传播权保护条例》等法律法规及豆瓣社区指导原则对侵权信息进行处理。brnbsp;nbsp;nbsp;nbsp;nbsp;nbsp;5、尊重权利人的知识产权和合法权益。若权利人认为甜甜网用户上传的内容侵犯自身版权或其他合法权益可依法向甜甜网帮助邮箱 发出书面申请。甜甜网在书面审核相关齐备材料后有权在不事先通知相应发布用户的情况下自行删除相关内容并依法保留相关数据。在甜甜网发布内容即视为用户同意甜甜网就前述情况所采取的相应措施甜甜网不因此而承担任何违约、侵权或其他法律责任。brnbsp;nbsp;nbsp;nbsp;nbsp;nbsp;6、甜甜网根据上述第5条原因删除相关内容的相应发布用户如认为投诉不属实可依法向甜甜网帮助邮箱 发出关于被删除内容不侵犯著作权的书面反申请。反申请发出后甜甜网在书面审核相关齐备材料后根据实际情况依法进行处理。/divspan idanthorBox/span/divscript srcjs/mui.min.js/scriptscript typetext/javascriptmui.init()mui.plusReady(function() {var webview plus.webview.currentWebview();console.log(webview.name);document.getElementById(anthorBox).innerHTMLbr/p作者webview.name时间webview.time;})/script/body/html四、增加联系我们版块 在my.html增加联系我们并且设置id 添加绑定事件 新建contactus.html页面 然后直接在body里面快捷键mh 联系我们… contactus.html !doctype html htmlheadmeta charsetUTF-8title/titlemeta nameviewport contentwidthdevice-width,initial-scale1,minimum-scale1,maximum-scale1,user-scalableno /link hrefcss/mui.min.css relstylesheet //headbodyheader classmui-bar mui-bar-nava classmui-action-back mui-icon mui-icon-left-nav mui-pull-left/ah1 classmui-title联系我们/h1/headerdiv classmui-contentdiv classmui-contentp/ppnbsp;nbsp;nbsp;nbsp;nbsp;nbsp;如果我们有什么照顾不周请您加我们的敲击无敌大可爱王甜甜的联系方式~ QQ:990259850 /pimg srcimgs/qq.png stylewidth: 100%;//divspan idanthorBox/span/divscript srcjs/mui.min.js/scriptscript typetext/javascriptmui.init()mui.plusReady(function() {var webview plus.webview.currentWebview();console.log(webview.name);document.getElementById(anthorBox).innerHTMLpbr/修改人webview.namebr/ 上一次修改webview.time;})/script/body/html五、换我的底部选项卡图标 注意到我下面那四个图标和名称对不上了吗哈哈哈所以要改嗷嗷嗷嗷 在hello mui就是直接新建一个移动app项目 直接勾选hello mui就可以了中有各种各样的图标可以选择哦找到图标的那个模板找就是的了有句话说得特别好占在巨人的肩膀上看得更远别人已经写好的东西我们直接拿来用就可以了当然如果你贼6想自己写的话那也非常nice哈哈哈哈。 我的原页面是这样的 去hello mui模板下去找哈哈哈觉得哪个合适用哪个 记得把hello mui的css 、js、还有字体拿到自己项目中去 还有就是改路径比如放进我的项目就应该改为js/mui.min.js 这是我更改好了的 main.html !DOCTYPE html htmlheadmeta charsetutf-8titleHello MUI/titlemeta nameviewport contentwidthdevice-width, initial-scale1,maximum-scale1,user-scalablenometa nameapple-mobile-web-app-capable contentyesmeta nameapple-mobile-web-app-status-bar-style contentblacklink relstylesheet hrefcss/mui.min.csslink relstylesheet typetext/css hrefcss/icons-extra.css/stylehtml,body {background-color: #efeff4;}/style/headbodyheader classmui-bar mui-bar-nava classmui-action-back mui-icon mui-icon-left-nav mui-pull-left/ah1 idtitle classmui-title欢迎来到甜甜屋/h1/headernav classmui-bar mui-bar-taba iddefaultTab classmui-tab-item mui-active hrefindex.htmlspan classmui-icon mui-icon-home/spanspan classmui-tab-label首页/span/aa idprolist classmui-tab-item hrefprolist.htmlspan classmui-icon mui-icon-extra mui-icon-extra-orderspan classmui-badge9/span/spanspan classmui-tab-label商品列表/span/aa idcar classmui-tab-item hrefcar.htmlspan classmui-icon mui-icon-extra mui-icon-extra-cartspan classmui-badge9/span/span/spanspan classmui-tab-label购物车/span/aa classmui-tab-item hrefmy.htmlspan classmui-icon mui-icon-contact/spanspan classmui-tab-label我的/span/a/navscript srcjs/mui.min.js/scriptscript typetext/javascript charsetutf-8//mui初始化mui.init();var subpages [index.html, prolist.html, car.html, my.html];var subpage_style {top: 45px,bottom: 51px};var aniShow {};//创建子页面首个选项卡页面显示其它均隐藏mui.plusReady(function() {var self plus.webview.currentWebview();for (var i 0; i 4; i) {var temp {};var sub plus.webview.create(subpages[i], subpages[i], subpage_style);if (i 0) {sub.hide();}else{temp[subpages[i]] true;mui.extend(aniShow,temp);}self.append(sub);}});//当前激活选项var activeTab subpages[0];var title document.getElementById(title);//选项卡点击事件mui(.mui-bar-tab).on(tap, a, function(e) {var targetTab this.getAttribute(href);if (targetTab activeTab) {return;}//更换标题title.innerHTML this.querySelector(.mui-tab-label).innerHTML;//显示目标选项卡//若为iOS平台或非首次显示则直接显示if(mui.os.ios||aniShow[targetTab]){plus.webview.show(targetTab);}else{//否则使用fade-in动画且保存变量var temp {};temp[targetTab] true;mui.extend(aniShow,temp);plus.webview.show(targetTab,fade-in,300);}//隐藏当前;plus.webview.hide(activeTab);//更改当前活跃的选项卡activeTab targetTab;});//自定义事件模拟点击“首页选项卡”document.addEventListener(gohome, function() {var defaultTab document.getElementById(defaultTab);//模拟首页点击mui.trigger(defaultTab, tap);//切换选项卡高亮var current document.querySelector(.mui-bar-tab.mui-tab-item.mui-active);if (defaultTab ! current) {current.classList.remove(mui-active);defaultTab.classList.add(mui-active);}});document.addEventListener(goprolist, function() {var prolist document.getElementById(prolist);//模拟首页点击mui.trigger(prolist, tap);//切换选项卡高亮var current document.querySelector(.mui-bar-tab.mui-tab-item.mui-active);if (prolist ! current) {current.classList.remove(mui-active);prolist.classList.add(mui-active);}});document.addEventListener(gocar, function() {var car document.getElementById(car);mui.trigger(car, tap);//切换选项卡高亮var current document.querySelector(.mui-bar-tab.mui-tab-item.mui-active);if (car ! current) {current.classList.remove(mui-active);car.classList.add(mui-active);}});/script/body/html六、忘记密码 添加登录页面的点击事件 forgotpassword.html !doctype html htmlheadmeta charsetUTF-8title/titlemeta nameviewport contentwidthdevice-width,initial-scale1,minimum-scale1,maximum-scale1,user-scalableno /link hrefcss/mui.min.css relstylesheet /style typetext/css#mui-title{position: absolute;}.dm-btn2{display: block;width:calc(100% - 20px);height:40px;margin-left: 10px;margin-top: 10px; color: white;background-color: darkblue}/style/headbodyheader classmui-bar mui-bar-nava classmui-action-back mui-icon mui-icon-left-nav mui-pull-left/ah1 classmui-title忘记密码/h1/headerdiv classmui-contentform classmui-input-groupdiv classmui-input-rowlabel真实姓名:/labelinput typetext classmui-input-clear idtbtruename placeholder真实姓名//divdiv classmui-input-rowlabel电话:/labelinput typetext classmui-input-clear idtbtel placeholder电话//divdiv classmui-contentdiv classmui-input-rowlabel新密码/labelinput typepassword classmui-input-clear idtbpassword placeholder新密码//divdiv classmui-contentdiv classmui-input-rowlabel确认新密码/labelinput typepassword classmui-input-clear idtbpassword2 placeholder确认新密码//div/formbutton typebutton classdm-btn2 idbtnforget确定/buttonscript srcjs/mui.min.js/scriptscript typetext/javascriptmui.init()document.getElementById(btnforget).addEventListener(tap,function(){var truenamedocument.getElementById(tbtruename).value;var teldocument.getElementById(tbtel).value;var pass1document.getElementById(tbpassword).value;var pass2document.getElementById(tbpassword2).value;if(pass1pass2){var requrllocalStorage.getItem(requrl);mui.ajax(requrl,{data:{rnum:13,tel:tel,truename:truename,password:pass1},dataType:json,//服务器返回json格式数据type:post,//HTTP请求类型timeout:10000,//超时时间设置为10秒headers:{Content-Type:application/x-www-form-urlencoded},success:function(data){mui.toast(data.msg);}});}else{mui.toast(两次密码不一致);}});/script/body/html**后端 ** 数据库 java后端 protected void getForgetPassword(HttpServletRequest request, HttpServletResponse response) throws IOException{String truenamerequest.getParameter(truename);String telrequest.getParameter(tel);String passwordrequest.getParameter(password);String strSqlselect * from tbmember where truename? and tel? ;ListObject params new ArrayListObject();params.add(truename);params.add(tel);DBHelper Dalnew DBHelper();//定义userlist为nullListMapString, Object userlist null;//执行sql语句把数据库的数据传给userlisttry {userlistDal.executeQuery(strSql, params);} catch (SQLException e) {//打印数据e.printStackTrace();}String res;if (userlist.size()0){//改密码String strSql2 update tbmember set password? where truename? and tel?;ListObject params2 new ArrayListObject();params2.add(password);params2.add(truename);params2.add(tel);Dal.excuteSql(strSql2, params2);res {\msg\:\密码修改成功!\};}else{res {\msg\:\用户名和电话号码不匹配不允许修改密码!\};}response.setCharacterEncoding(utf-8);response.setContentType(text/json;charsetutf-8);response.getWriter().write(res);} 七、完善登录页面 !doctype html htmlheadmeta charsetUTF-8title/titlemeta nameviewport contentwidthdevice-width,initial-scale1,minimum-scale1,maximum-scale1,user-scalableno /link hrefcss/mui.min.css relstylesheet /style typetext/css.mui-content-padded {margin-top: 25px;}.mui-input-group {margin-top: 15px;}.mui-input-row{height: 30px;}.link-area {display: block;margin-top: 25px;text-align: center;}.spliter {color: #bbb;padding: 0px 8px;}/style/headbodyheader classmui-bar mui-bar-nava classmui-action-back mui-icon mui-icon-left-nav mui-pull-left/ah1 classmui-title登录/h1/headerdiv classmui-contentform classmui-input-groupdiv classmui-input-rowlabel用户名/labelinput typetext idtbnusername classmui-input-clear value杰子 placeholder用户名/divdiv classmui-input-rowlabel密码/labelinput typetext idtbnpassword classmui-input-clear value123 placeholder密码/div/formdiv classmui-content-paddedbutton idbtnlogin classmui-btn-block stylebackground-color: pink; opacity: 0.8;登录/buttondiv classlink-areaa idbtnreg注册账号/a span classspliter|/spana idbtnforget忘记密码/a/divdiv classmui-content-padded oauth-area/div/div/divscript srcjs/mui.min.js/scriptscript typetext/javascriptmui.init();document.getElementById(btnreg).addEventListener(tap, function() {console.log(11);mui.openWindow({url: reg.html,id: reg.html});});document.getElementById(btnforget).addEventListener(tap, function() {console.log(123);mui.openWindow({url: forgetpassword.html,id: forgetpassword.html});});document.getElementById(btnlogin).addEventListener(tap, function() {var vusername document.getElementById(tbnusername).value;var vpassword document.getElementById(tbnpassword).value;var requrl http://192.168.43.242:8080/SweetyManage/JavaApi;localStorage.setItem(requrl, requrl);mui.ajax(requrl, {data: {rnum: 2,username: vusername,password: vpassword},dataType: json, //服务器返回json格式数据type: post, //HTTP请求类型timeout: 10000, //超时时间设置为10秒headers: { Content-Type: application/x-www-form-urlencoded },success: function(data) {console.log(JSON.stringify(data));if(data null || data ) {mui.toast(用户名或者密码错误!);} else {console.log(data[0]);mui.toast(登录成功!);localStorage.setItem(id, data[0].id);localStorage.setItem(truename, data[0].truename);localStorage.setItem(tel, data[0].tel);localStorage.setItem(address, data[0].address);//登录成功之后就把当前人的信息保存在localStorage中mui.openWindow({url: main.html,id: main.html});}}});});/script/body/html八、导航 去hello mui中去找到guide.html复制粘贴到自己的项目中 记得更改css和js路径改成适应你的项目的路径 最好把它的图片也放进自己的Img中 我更改后的guide.html !DOCTYPE html htmlheadmeta charsetutf-8titleHello MUI/titlemeta nameviewport contentwidthdevice-width, initial-scale1,maximum-scale1,user-scalablenometa nameapple-mobile-web-app-capable contentyesmeta nameapple-mobile-web-app-status-bar-style contentblacklink relstylesheet hrefcss/mui.min.cssstyle#close {position: absolute;width: 160px;left: 50%;margin-left: -80px;bottom: 15%;padding: 10px;color: #fff;border-color: #fff;}.item-logo {width: 100%;height: 100%;position: relative;}.item-logo a {width: 200px;height: 200px;display: block;border: 1px solid #FFFFFF;border-color: rgba(255, 255, 255, 0.5);text-align: center;line-height: 200px;border-radius: 50%;font-size: 40px;color: #fff;position: absolute;top: 15%;left: 50%;margin-left: -100px;}.animate {position: absolute;left: 0;bottom: 15%;width: 100%;color: #fff;display: -moz-box;}.animate h2 {text-align: center;margin-bottom: 20px;}.animate li {width: 50%;height: 30px;line-height: 30px;list-style: none;font-size: 16px;text-align: right;}.animate li:nth-child(3) {text-align: left;float: right;}.animated {-webkit-animation-duration: 1s;-webkit-animation-play-state: paused;-webkit-animation-fill-mode: both;}.guide-show .bounceInDown {-webkit-animation-name: bounceInDown;-webkit-animation-play-state: running;-webkit-animation-delay: 1s;display: block;}.guide-show .bounceInLeft {-webkit-animation-name: bounceInLeft;display: block;-webkit-animation-play-state: running;}.guide-show .bounceInRight {-webkit-animation-name: bounceInRight;display: block;-webkit-animation-play-state: running;-webkit-animation-delay: 0.5s;}-webkit-keyframes bounceInDown {0%, 60%, 75%, 90%, 100% {-webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);}0% {opacity: 0;-webkit-transform: translate3d(0, -3000px, 0);transform: translate3d(0, -3000px, 0);}60% {opacity: 1;-webkit-transform: translate3d(0, 25px, 0);transform: translate3d(0, 25px, 0);}75% {-webkit-transform: translate3d(0, -5px, 0);transform: translate3d(0, -5px, 0);}90% {-webkit-transform: translate3d(0, 3px, 0);transform: translate3d(0, 3px, 0);}100% {-webkit-transform: none;transform: none;}}-webkit-keyframes bounceInLeft {0%, 60%, 75%, 90%, 100% {-webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);}0% {opacity: 0;-webkit-transform: translate3d(-3000px, 0, 0);transform: translate3d(-3000px, 0, 0);}60% {opacity: 1;-webkit-transform: translate3d(25px, 0, 0);transform: translate3d(25px, 0, 0);}75% {-webkit-transform: translate3d(-10px, 0, 0);transform: translate3d(-10px, 0, 0);}90% {-webkit-transform: translate3d(5px, 0, 0);transform: translate3d(5px, 0, 0);}100% {-webkit-transform: none;transform: none;}}-webkit-keyframes bounceInRight {0%, 60%, 75%, 90%, 100% {-webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);}0% {opacity: 0;-webkit-transform: translate3d(3000px, 0, 0);transform: translate3d(3000px, 0, 0);}60% {opacity: 1;-webkit-transform: translate3d(-25px, 0, 0);transform: translate3d(-25px, 0, 0);}75% {-webkit-transform: translate3d(10px, 0, 0);transform: translate3d(10px, 0, 0);}90% {-webkit-transform: translate3d(-5px, 0, 0);transform: translate3d(-5px, 0, 0);}100% {-webkit-transform: none;transform: none;}}/style/headbodydiv idslider classmui-slider mui-fullscreen stylebackground-color: black;div classmui-slider-group!-- 第一张 --div classmui-slider-itemdiv classitem-logo stylebackground-color: pinka href#Sweety/adiv classanimate guide-showh2 classanimated bounceInDown色香味俱全/h2li classanimated bounceInLeft哒哒哒/lili classanimated bounceInRight超级无敌可爱鸭/li/div/div/div!-- 第二张 --div classmui-slider-itemdiv classitem-logo stylebackground-color: plum;a hrefhttps://blog.csdn.net/hanhanwanghaha点击此处/adiv idtips-2 classanimate mui-hiddenh2 classanimated bounceInDown甜甜在线/h2li classanimated bounceInLeft点击圆框框/lili classanimated bounceInRight主人在线解答/li/div/div/div!-- 第三张 --div classmui-slider-itemdiv classitem-logo stylebackground-color: lightpink;a href#甜甜商城/adiv classanimatebutton idclose classmui-btn mui-btn-warning mui-btn-outlined立即体验/button/div/div/div/divdiv classmui-slider-indicatordiv classmui-indicator mui-active/divdiv classmui-indicator/divdiv classmui-indicator/div/div/divscript srcjs/mui.min.js/scriptscriptmui.back function() {};mui.plusReady(function() {if(mui.os.ios){plus.navigator.setFullscreen(true);}plus.navigator.closeSplashscreen();});//立即体验按钮点击事件document.getElementById(close).addEventListener(tap, function(event) {plus.storage.setItem(lauchFlag, true);plus.navigator.setFullscreen(false);plus.webview.currentWebview().close();}, false);//图片切换时触发动画document.querySelector(.mui-slider).addEventListener(slide, function(event) {//注意slideNumber是从0开始的var index event.detail.slideNumber1;if(index2||index3){var item document.getElementById(tips-index);if(item.classList.contains(mui-hidden)){item.classList.remove(mui-hidden);item.classList.add(guide-show);}}});/script/body/htmlhttps://blog.csdn.net/hanhanwanghaha 我是一个超级无敌可爱的人鸭欢迎关注有什么问题留言私信皆可看见必回 创作不易如有转载请注明出处