上海网站建设渠道,专门建站的公司,网站开发实例,某公司的网站建设的资金预算书我是歌谣 代码重构不易 公众号关注小歌谣 前言
网络上流行了一款jq生成月经计算器的代码 是这样的 实现效果如图所示 本次讲解就是说明如何用VantjqVue实现此代码的重构 先看一眼重构演示的效果 这个是可以直接进行接口调用的 首先我们看一眼目录结构 我们这边贴出我自己手… 我是歌谣 代码重构不易 公众号关注小歌谣 前言
网络上流行了一款jq生成月经计算器的代码 是这样的 实现效果如图所示 本次讲解就是说明如何用VantjqVue实现此代码的重构 先看一眼重构演示的效果 这个是可以直接进行接口调用的 首先我们看一眼目录结构 我们这边贴出我自己手写的代码的核心部分 index.js
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0, maximum-scale1.0, user-scalable0!-- 引入样式文件 --link relstylesheet href./css/index.css /!-- 引入 Vue 和 Vant 的 JS 文件 --script src./js/vue.js/scriptscript src./js/vant.js/scriptscript typetext/javascript src./js/jquery-1.7.2.js/scriptscript src./js/axios.js/scriptscript typetext/javascript srcjs/index.js/scripttitle萌芽APP/titlestylebody {width: 100%;}.SetTime {width: 100%;height: 40px;background: #F6F7F9;opacity: 1;}span {margin-left: 12px;width: 286px;height: 37px;font-size: 13px;font-family: PingFang SC;font-weight: 400;line-height: 30px;color: #333333;opacity: 1;line-height: 40px;}.SetDate {width: 100%;display: block;}input[typedate] {box-sizing: border-box;text-align: center;font-size: 1.4em;height: 2.7em;border-radius: 4px;border: 1px solid #c8cccf;color: #6a6f77;-web-kit-appearance: none;-moz-appearance: none;display: block;outline: 0;padding: 0 1em;text-decoration: none;width: 100%;}input[typedate]:focus {border: 1px solid #ff7496;}input[typenumber] {box-sizing: border-box;text-align: center;font-size: 1.4em;height: 2.7em;border-radius: 4px;border: 1px solid #c8cccf;color: #6a6f77;-web-kit-appearance: none;-moz-appearance: none;display: block;outline: 0;padding: 0 1em;text-decoration: none;width: 100%;}input[typenumber]:focus {border: 1px solid #ff7496;}input[typebutton] {box-sizing: border-box;text-align: center;font-size: 1.4em;height: 2.7em;border-radius: 4px;border: 1px solid #c8cccf;color: #6a6f77;-web-kit-appearance: none;-moz-appearance: none;display: block;outline: 0;padding: 0 1em;text-decoration: none;width: 100%;}.SetButton {width: 50%;left: 25%;margin-top: 20px;text-align: center;}.button{bottom: -100px;display: block;margin: 0 auto;width: 140px;height: 45px;background: #FFA9B5;opacity: 1;border-radius: 78px;border: none;font-size: 17px;font-family: PingFang SC;font-weight: 400;line-height: 5px;color: #FFFFFF;opacity: 1;}.van-picker-column{font-size: 24px;}/style
/headbodydiv idapp styleposition: relativediv classSetTimespan你最近来月经的日期是/span/divdiv classSetDatevan-field focusSetTimeShow refScanTextBox v-modelform.SetTime placeholder请输入日期 //divvan-popup positionbottom stylewidth:100% v-modelshowvan-datetime-picker classvan-picker-column v-modelcurrentDate confirmDataSelect typedate title选择年月日 :min-dateminDate :max-datemaxDate //van-popupdiv classSetTimespan月经持续天数(天)/span/divdiv classSetDatevan-field focusSetDateShow refScanTextBox1 v-modelform.KeepTime placeholder请输入天数 //divdiv classSetTimespan月经周期(天)/span/divdiv classSetDatevan-field focusSetDateShow1 refScanTextBox2 v-modelform.WeekTime placeholder请输入周期 //div!-- button classbutton clicksubmit确定/button--!-- input typebutton styledisplay: block;width: 100px;height:100px;margin: 0 auto;border-radius: 50%;background: #E7659D;color: white; value确定 clicksubmit --button classbutton round classSetButton typeinfo color#ff7496 clicksubmit确nbsp;nbsp;定/buttonvan-popup positionbottom stylewidth:100% v-modelshow1van-picker title持续天数 show-toolbar classvan-picker-column :columnscolumns confirmonConfirm cancelonCancel changeonChange placeholder请输入天数 //van-popupvan-popup positionbottom stylewidth:100%; v-modelshow2van-picker title月经周期 classvan-picker-column show-toolbar :columnscolumns1 confirmonConfirm1 cancelonCancel changeonChange placeholder请输入天数 //van-popup!-- van-button typeprimary clicktoNotify classbtn顶部通知/van-button--/div
/body
script// 在 #app 标签下渲染一个按钮组件new Vue({el: #app,data() {return {minDate: new Date(2020, 0, 1),maxDate: new Date(),currentDate: new Date(),/*定义日期的显示*/show: false,/*定义月经周期的显示*/show1: false,/*定义时间的显示*/show2: false,form: {KeepTime:5,WeekTime:28,SetTime:new Date()},bzDate: ,/*定于月经周期的选择框*/columns1: []/*定义时间周期的选择框*/,columns: [],};},watch: {form: {handler(newName, oldName) {console.log(newName)},immediate: true,deep: true}},created(){var d new Date();let dateYear d.getFullYear(); //获取年getAction(/menstrual/historyListByYeardateYear).then(res{console.log(res,res)})let dateMonth d.getMonth() 1 10 ? 0 (d.getMonth() 1) : d.getMonth() 1; //获取月let dateDate d.getDate() 10 ? 0 d.getDate() : new Date(d).getDate(); //获取当日this.form.SetTime dateYear - dateMonth - dateDatethis.columns[]this.columns1[]for(var i1;i90;i){this.columns.push(i)}console.log(this.columns1,columns1)for(var i1;i365;i){this.columns1.push(i)}},methods: {/* toChangeDate(date) {console.log(new Date(date).getFullYear())console.log(new Date(date).getMonth())console.log(new Date(date).getDay())let dateYear new Date(date).getFullYear(); //获取年let dateMonth new Date(date).getMonth() 1 10 ? 0 new Date(e).getMonth() : new Date(e).getMonth(); //获取月let dateDate new Date(date).getDate() 10 ? 0 new Date(e).getDate() : new Date(e).getDate(); //获取当日return dateYear - dateMonth - dateDate}, */async submit() {/* let SetTimeOutnew Date(this.form.SetTime)*/await postAction(/menstrual/basicsAddOrUpdate?firstDate this.form.SetTime continuousDays this.form.KeepTime cycleNumber this.form.WeekTime).then(res {console.log(res)var Request new Object();Request this.GetRequest();let tokenRequest.tokenif (this.noNull(this.form.SetTime) this.noNull(this.form.KeepTime) this.noNull(this.form.WeekTime)) {
/*http://114.215.149.84:8086/*/window.location.href ./index.html?lastDate this.bzDate keepDate this.form.KeepTime weekDate this.form.WeekTimetokentoken;} else {this.$toast.success(当前所填项不能为空)}})},toNotify() {},/*点击确定之后触发的点击事件*/GetRequest() {var url location.search; //获取url中?符后的字串var theRequest new Object();if (url.indexOf(?) ! -1) {var str url.substr(1);strs str.split();for(var i 0; i strs.length; i ) {theRequest[strs[i].split()[0]] unescape(strs[i].split()[1]);}}return theRequest;},onConfirm(value, index) {console.log(value)this.form.KeepTime valuethis.show1 false},/*点击确定之后触发的点击事件*/onConfirm1(value, index) {console.log(value)this.form.WeekTime valuethis.show2 false},onChange(picker, value, index) {},/*定义显示弹出框的方法*/SetDateShow() {this.$refs.ScanTextBox1.readonlyreadonly;setTimeout(() {this.$refs.ScanTextBox1.readonlynull;}, 200);console.log(11111)this.show1 true},/*定于显示弹出框的方法*/SetDateShow1() {this.$refs.ScanTextBox2.readonlyreadonly;setTimeout(() {this.$refs.ScanTextBox2.readonlynull;}, 200);this.show2 true},onCancel() {this.show falsethis.show1 falsethis.show2 false},/*定于显示弹出框的方法*/SetTimeShow() {this.$refs.ScanTextBox.readonlyreadonly;setTimeout(() {this.$refs.ScanTextBox.readonlynull;}, 200);this.show true},/* 执行日期的回调函数 处理日期的回调函数*/DataSelect(e) {var d new Date(e);var datetime d.getFullYear() - (d.getMonth() 1) - d.getDate();/* console.log(e)console.log(e.getFullYear()) */let dateYear e.getFullYear(); //获取年let dateMonth e.getMonth() 1 10 ? 0 (e.getMonth() 1) : e.getMonth() 1; //获取月let dateDate e.getDate() 10 ? 0 e.getDate() : new Date(e).getDate(); //获取当日this.form.SetTime dateYear - dateMonth - dateDatethis.bzDate e;this.show false},noNull(x) {if (x || x undefined || x null) {return false;}return true;}/* timestampToDate(timestamp) {let data new Date();data.setTime(timestamp * 1000)return data} */},});// 调用函数组件弹出一个 Toast// 通过 CDN 引入时不会自动注册 Lazyload 组件// 可以通过下面的方式手动注册/* Vue.use(DatetimePicker);*//* let lastDate document.getElementById(lastDate).value;let keepDate $(#keepDate).val()let weekDate $(#keepDate).val() *//* function upperCase(x) {var y document.getElementById(x).valuelastDate y;}function upperKeepDate(x) {var y document.getElementById(x).valuekeepDate y;}function upperWeepDate(x) {var y document.getElementById(x).valueweekDate y;}$(#thisOk).click(function() {console.log(1);console.log(lastDate);console.log(keepDate);console.log(weekDate);if (noNull(lastDate) noNull(keepDate) noNull(weekDate)) {window.location.href ../index.html?lastDate lastDate keepDate keepDate weekDate weekDate;} else {alert(请输入正确得值)}});function noNull(x) {if (x || x undefined || x null) {return false;}return true;}*/
/script/html
!DOCTYPE html
htmlheadmeta nameviewport contentwidthdevice-width, initial-scale1.0, maximum-scale1.0, user-scalable0meta http-equivContent-Type contenttext/html; charsetutf-8 /title萌芽App/titlelink typetext/css relstylesheet hrefcss/public_v2.css /link typetext/css relstylesheet hrefcss/base.css /link typetext/css relstylesheet hrefcss/blue.css /link hrefcss/userLogin.css relstylesheet typetext/css /script typetext/javascript srcjs/jquery-1.7.2.js/scriptscript typetext/javascript srcjs/newfemale.js/scriptscript languagejavascript srcjs/userLogin.js/scriptmeta http-equivCache-Control contentno-transform /link relstylesheet href./css/index.css /!-- 引入 Vue 和 Vant 的 JS 文件 --script src./js/vue.js/scriptscript src./js/vant.js/scriptscript src./js/axios.js/scriptscript typetext/javascript src./js/index.js/script/headbodyINPUT styleDISPLAY: none idnowElement typehiddendiv classwrapper!-- header end --!-- main --div classmaindiv classmod_2b!--控制标题的数据--!--h2女性月经周期与排卵期计算器/h2--!--div classhealth clearfix--div classmod_1b mod_safediv styledisplay: none classtime_lag clearfixspan平常两次月经大概相隔/spana classminus onclickfemale.fallOff();/ainput typetext idminMensesPriod readonly value28 /!-- INPUT typehidden idminMensesing classcircleCss value5--a onclickfemale.increase(); classplus/aspan月经期时间/spana classminus onclickfemale.fallOff2();/aINPUT typetype idminMensesing classcircleCss value5a onclickfemale.increase2(); classplus/aa onclickfemale.creset(); idacrest classagain重新测试/a/divdiv classsafe_detail idwomensafeDateCondiv classsafe_calendar idchosecalspan classdate_first idpopCss请点击选择月经第一天/spandiv classdate_selectspan classyear idleftYear2012/spanb年/b!--a hrefjavascript:void(0); idyearLink/a--span idleftMonth classmonth10月/spanb月/b!--a hrefjavascript:void(0); idmonthLink class/a--/div!--处理li的逻辑--ul classdate_detail idleftTableli classweek周日/lili classweek周一/lili classweek周二/lili classweek周三/lili classweek周四/lili classweek周五/lili classweek周六/lili/lili/lili/lili/lili/lili/lili/lili/lili/lili/lili/lili/lili/lili/lili/lili/lili/lili/lili/lili/lili/lili/lili/lili/lili/lili/lili/lili/lili/lili/lili/lili/lili/lili/lili/lili/lili/lili/lili/lili/lili/lili/li/ul/divdiv classsafe_calendar safe_calendar_right idrightCal styleclear: bothdiv classdate_selectspan classyear idrightYear2012/spanb年/ba hrefjavascript:void(0); idrYearLink classlink/aspan classmonth idrightMonth10/spanb月/ba hrefjavascript:void(0); idrMonthLink classlink/a/divul classdate_detail idrightTableli classweek周日/lili classweek周一/lili classweek周二/lili classweek周三/lili classweek周四/lili classweek周五/lili classweek周六/lili/lili/lili/lili/lili/lili/lili/lili/lili/lili/lili/lili/lili/lili/lili/lili/lili/lili/lili/lili/lili/lili/lili/lili/lili/lili/lili/lili/lili/lili/lili/lili/lili/lili/lili/lili/lili/lili/lili/lili/lili/lili/li/ul/div/div/divdiv styleclear: both/divul classsafe_calendar_tips stylewidth: 100%;height: 100px!--li styledisplay: none idaZlueem classaBlue/em所选日期/lili styledisplay: none idaBlueem classaBlue/em所选日期/li--li stylefloat: left; idaYellowem stylefloat:left;width: 11px;margin-top: 4px;height: 11px;border-radius: 11px;line-height: 66px;font-size: 12px classaYellow/emp stylefloat: left;font-size: 12px;月经期/p/lili stylefloat: left; idaRedem stylefloat:left;margin-top: 4px;margin-left:5px;width: 11px;height: 11px;border-radius: 11px;line-height: 66px;font-size: 12px classaRed/emp stylefloat: left;font-size: 12px;排卵期/p/lili stylefloat: left; idaGreenem stylefloat:left;margin-left:5px;margin-top: 4px;width: 11px;height: 11px;border-radius: 11px;line-height: 66px; classaGreen/emp stylefloat: left;font-size: 12px;安全期/p/li/ul/div/div/divdiv idapp styleclear: both;position: fixed;bottom: 0;width: 100%;opacity: 0.8;van-cell-groupvan-switch-cell size24px :active-valueactive active-color#FFA9B5 inactive-color#FFA9B5 v-modelchecked changeChangeStatus title大姨妈来了 //van-cell-group!--van-cell is-link clickshowPopup展示弹出层/van-cell--van-popup v-modelshow positionbottomvan-datetime-picker cancelonCancel confirmonConfirm v-modelcurrentDate typedate title选择年月日 :min-dateminDate :max-datemaxDate //van-popup/div!--div idabc stylewidth: 100px;height:200px;border:1px solid red/div--!--div styletext-align:center;margin:50px 0; font:normal 14px/24px MicroSoft YaHei;
p适用浏览器IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗./p
p来源a hrefhttp://down.admin5.com/info/ target_blankA5源码/a/pbr
/div--/body/html
script$(function() {var Query $(.date_detail a).children().text()var list $(.date_detail)$(.link).each(function() {//console.log(this,123456)console.log($(this).attr(class))})/* console.log(list,dssdds );$([aYellow]).css(display,none);*//*for (let i 0; i Query.length ; i) {var li Query[i]var $aa $(li).find(a)console.log($aa,);console.log($aa.get(0),);}*/console.log(Query, Query)console.log(document.body.clientWidth, clientWidth)console.log(------------)console.log(document.body.clientWidth 414, clientWidth)console.log(------------)if (300 document.body.clientWidth document.body.clientWidth 350) {$(.date_detail li).css(margin-left, 3px);$(.date_detail li).addClass(geyao);} else if (350 document.body.clientWidth document.body.clientWidth 400) {$(.date_detail li).css(margin-left, 8px);$(.date_detail li).addClass(geyao);} else if (400 document.body.clientWidth document.body.clientWidth 430) {$(.date_detail li).css(margin-left, 15px);$(.date_detail li).addClass(geyao);}let aGeyao document.getElementsByClassName(geyao)/* console.log($(.geyao a))$(.geyao a).each(function(){console.log($(this).addClass(geyao))});*//*console.log(Query,Query)*/});var lastTime null;let map_callback (self) {console.log(self.lastTime, abssddsdsd)lastTime self.lastTime;var m new Date(lastTime).getMonth();var y new Date(lastTime).getFullYear();calendar.show(y, m, null)female.calculate(new Date(lastTime).getTime());}new Vue({el: #app,data() {return {active: 是,checked: false,show: false,minDate: new Date(2020, 0, 1),maxDate: new Date(),currentDate: new Date(),lastTime: ,/*存储数据的数据结构*/cycleNumber: 0,continuousDays: 0,SetTime: ,/*传入id*/SetId: ,endTime: ,SetTime1: ,};},methods: {formatter(type, val) {if (type month) {return ${val}月;} else if (type day) {return ${val}日;}return val;},onCancel() {this.checked falsethis.show false},async historyListByYear(dateYear) {await getAction(/menstrual/historyListByYear?year dateYear).then(res {console.log(res, LastYear)if (res.data.code 200) {let {cycleNumber,continuousDays} res.data.result.userMenstrualBasics;this.cycleNumber cycleNumberthis.continuousDays continuousDaysconsole.log(cycleNumber, cycleNumber);console.log(continuousDays, continuousDays);}})},async historyAdd() {await postAction(/menstrual/historyAdd?startTime this.SetTime).then(res {if (res.data.code 200) {console.log(res, result)this.SetId res.data.result.idconsole.log(this.SetId, SetId)this.historyEdit(this.SetId)}})},async historyEdit(id) {await postAction(/menstrual/historyEdit?endTime this.SetTime1 id id).then(res {if (res.data.code 200) {/*let myDate new Date();
myDate.setDate(myDate.getDate()5)*/console.log(this.endTime, endTime);console.log(res, 操作成功)}})},onConfirm(e) {let dateYear e.getFullYear(); //获取年let dateMonth e.getMonth() 1 10 ? 0 (e.getMonth() 1) : e.getMonth() 1; //获取月let dateDate e.getDate() 10 ? 0 e.getDate() : new Date(e).getDate(); //获取当日this.SetTime dateYear - dateMonth - dateDate/*控制日期参数*/this.historyListByYear(dateYear)/*let LastYeare.getFullYear()*/console.log(我进来了)/* new Date(( new Date()).getTime()1000*60*60*24);*//*dateTime.setDate(dateTime.getDate()1);*//* let datanew Date(e.getTime()(1000*60*60*this.cycleNumber));*//*let datae*/this.historyAdd()var data econsole.log(this.continuousDays, continuousDays)data data.setDate(data.getDate() this.continuousDays);data new Date(e);console.log(data, data)let dateYear1 data.getFullYear(); //获取年console.log(dateYear1, dateYear1)let dateMonth1 data.getMonth() 1 10 ? 0 (data.getMonth() 1) : data.getMonth() 1; //获取月console.log(dateMonth1, dateMonth1)let dateDate1 data.getDate() 10 ? 0 data.getDate() : new Date(data).getDate(); //获取当日console.log(dateDate1, dateDate1)this.SetTime1 dateYear1 - dateMonth1 - dateDate1console.log(this.SetTime1, SetTime1)console.log(this.SetId, SetId)console.log(我出去了)this.checked falsethis.show falsethis.lastTime e;map_callback(this)},ChangeStatus() {this.show true;},/* timestampToDate(timestamp) {let data new Date();data.setTime(timestamp * 1000)return data} */},});/* var lastDate nullvar keepDate null;var weekDate null;$(document).ready(function (){function GetRequest() {var url location.search; //获取url中?符后的字串var theRequest new Object();if (url.indexOf(?) ! -1) {var str url.substr(1);strs str.split();for(var i 0; i strs.length; i ) {theRequest[strs[i].split()[0]] unescape(strs[i].split()[1]);}}return theRequest;}var Request new Object();Request GetRequest();lastDate Request.lastDate;keepDate Request.keepDate;weekDate Request.weekDateconsole.log(lastDate);console.log(keepDate);console.log(weekDate);})*/window.onload function() {document.querySelectorAll(a).forEach(a {if (a.className ) {a.style.display none}})}
/script
我是歌谣放弃 很难 坚持一定很酷
